Electroteque Media

Controls Api

Control VR camera rotation using API methods

This example demonstrates controlling the rotation of the video with api controls.

This is an auto rotation which uses the same friction setting as the key board controls using keyDamping

function app() {
  return {

    init() {
      //do init stuff here
    },
    moveLeft() {
        player.moveLeft();
    },
    moveRight() {
        player.moveRight();
    },
    moveUp() {
        player.moveUp();
    },
    moveDown() {
        player.moveDown();
    },
    toggleVR() {
        player.toggleVR();
    },
    getOrientationAngles(e) {
        console.log(player.getOrientationAngles());
    }
  }
}

    
  <div class="flex flex-col w-full">
          <div id="api" class=""></div>

  </div>

  <script type="text/javascript">

  	var player = flowplayer("#api", {
    "src": [
        {
            "src": "//videos.electroteque.org/360/ultra_light_flight_720p.webm",
            "type": "video/webm"
        },
        {
            "src": "//videos.electroteque.org/360/ultra_light_flight_720p.mp4",
            "type": "video/mp4"
        },
        {
            "src": "//videos.electroteque.org/360/ultra_light_flight_720p.ogv",
            "type": "video/ogg"
        }
    ],
    "token": "eyJraWQiOiIyeHRpc0Q5NHZzTjIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCIyeHRpc0Q5NHZzTjJcIixcImRvbWFpblwiOltcImVsZWN0cm90ZXF1ZS5vcmdcIl19IiwiaXNzIjoiRmxvd3BsYXllciJ9.WLUkZHpDNoaXWDaFO2V5UfXm7SnDvE1pFAM0e7ppnFovOSyCCZM-b8gQNBSElB5yirTP__x76Qyo8pMWh6lVrw",
    "vrvideo": {}
});

  </script>