Skip to main content

BACK

Using video.js with View360

Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time -:-
 
1x
    • Chapters
    • descriptions off, selected
    • captions off, selected

      View360 can be used with other video player libraries.
      You can use it like this if you want additional features that video library offers, or to apply a better video player UI.

      Here, I'll how to use View360 with the video.js for demonstration.

      HTML​

      The usage is the same as video.js, but one <canvas> is added to the container element.

      <div id="container" data-vjs-player>
        <video id="video"
          class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered vjs-controls-enabled"
          data-setup='{"controls": true, "autoplay": false, "playsinline": true}'
        >
          <source src="/pano/equirect/seven.mp4" type="video/mp4" />
          <source src="/pano/equirect/seven.webm" type="video/webm" />
        </video>

        <!-- Add "canvas" inside video.js container -->
        <canvas class="view360-canvas"></canvas>
      </div>

      JS​

      Init video.js, then mount View360 above it.

      const container = document.querySelector("#container");
      const video = document.querySelector("#video");

      videojs(video).ready(() => {
        const viewer = new View360(container, {
          projection: new EquirectProjection({
            src: video,
            video: {
              autoplay: false
            }
          }),
          plugins: [new ControlBar({
            autoHide: false,
            showBackground: false,
            progressBar: false,
            playButton: false,
            volumeButton: false,
            fullscreenButton: false,
            videoTime: false,
            pieView: { order: 0 },
            gyroButton: { position: "top-right", order: 1 },
            vrButton: { position: "top-right", order: 2 }
          })]
        });
      });