56 lines
2.1 KiB
HTML
56 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
|
<title>videojs-vr example</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
|
<script src="./dist/player-skin.js"></script>
|
|
<script src="./dist/player.full.js"></script>
|
|
|
|
<style>
|
|
html{height:100%;width:100%;padding:0;margin:0}
|
|
body{height:100%;width:100%;padding:0;margin:0;overflow:hidden}
|
|
object{height:100%;width:100%}
|
|
#video-container {width:100%;height:100%}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<video id="video-container" class="video-js vjs-default-skin" preload="auto" crossOrigin="anonymous" width="100%" height="100%" data-setup="{}" controls playsinline webkit-playsinline>
|
|
<!-- Even with local/relative source, HLS will result in blank screen. This means no Live 360 on iOS - thanks Apple! https://bugs.webkit.org/show_bug.cgi?id=163866#c3 -->
|
|
<!-- There is a hack in src/jsi/videojs.vr.js - see comments -->
|
|
<source id='video' src="" type="application/x-mpegURL">
|
|
</video>
|
|
|
|
<!--
|
|
video.js will automatically initialize the video element since it's loaded in
|
|
the head of the document but you still need to configure and initialize the
|
|
plugin.
|
|
-->
|
|
|
|
<script>
|
|
(function(){
|
|
document.addEventListener("DOMContentLoaded", function(){
|
|
let protocol = window.location.href.split('/')[3].split('=')[1];
|
|
let domain = window.location.href.split('/')[5]
|
|
let uid = window.location.href.split('/')[8];
|
|
|
|
let video = document.getElementById('video');
|
|
video.src = protocol+'//'+domain+'/static/streaming-playlists/hls/'+uid+'/master.m3u8';
|
|
|
|
let player = videojs( '#video-container', {
|
|
techOrder: ['html5']
|
|
});
|
|
player.vr({projection: "360"});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|