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 w-full h-auto my-auto">
      <video class="video-js vjs-default-skin vjs-fluid " crossorigin="anonymous" controls="" id="api"></video>
  </div>

  <script type="text/javascript">

  	var player = videojs("api", {
    "plugins": {
        "vrvideo": {}
    },
    "sources": [
        {
            "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"
        }
    ]
});

  </script>