Skip to main content

BACK

m3u8 HLS video

View360 will not offer any type of video type extensions, but you can use it with other libraries that offers additional video formats.

Here, I'll show how to use View360 with hls.js to play m3u8 hls video.

HTML

Just add a video element with display: none inside View360 container.

<div class="view360-container">
  <canvas class="view360-canvas" />
  <video id="video" playsInline crossOrigin="anonymous" style="display: none;" />
</div>

JS

Then you can use it like this.

const video = document.querySelector("#video");
const videoUrl = "/pano/equirect/m3u8/equi.m3u8";

if (Hls.isSupported()) {
  var hls = new Hls();
  hls.loadSource(videoUrl);
  hls.attachMedia(video);
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
  video.src = videoUrl;
}

view360.load(new EquirectProjection({
  src: video,
  video: { autoplay: false }
}))

HTML
JS