247 lines
8 KiB
HTML
247 lines
8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Silly video player</title>
|
||
|
|
<link rel="stylesheet" href="./dash.js/contrib/akamai/controlbar/controlbar.css">
|
||
|
|
<link rel="stylesheet" href="silicon.min.css">
|
||
|
|
<script src="./dash.js/contrib/akamai/controlbar/ControlBar.js"></script>
|
||
|
|
<script>
|
||
|
|
function onFullscreenClick() {
|
||
|
|
var element = document.querySelector("#player");
|
||
|
|
if (!document.fullscreenElement) {
|
||
|
|
if (element.requestFullscreen) {
|
||
|
|
element.requestFullscreen();
|
||
|
|
} else if (element.msRequestFullscreen) {
|
||
|
|
element.msRequestFullscreen();
|
||
|
|
} else if (element.mozRequestFullScreen) {
|
||
|
|
element.mozRequestFullScreen();
|
||
|
|
} else {
|
||
|
|
element.webkitRequestFullScreen();
|
||
|
|
}
|
||
|
|
let videoControls = document.querySelector("#videoController");
|
||
|
|
videoControls.style.top = "95%";
|
||
|
|
} else {
|
||
|
|
if (document.exitFullscreen) {
|
||
|
|
document.exitFullscreen();
|
||
|
|
} else if (document.mozCancelFullScreen) {
|
||
|
|
document.mozCancelFullScreen();
|
||
|
|
} else if (document.msExitFullscreen) {
|
||
|
|
document.msExitFullscreen();
|
||
|
|
} else {
|
||
|
|
document.webkitCancelFullScreen();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let wakeLock;
|
||
|
|
async function initWakelock() {
|
||
|
|
try {
|
||
|
|
wakeLock = await navigator.wakeLock.request("screen");
|
||
|
|
} catch (err) {
|
||
|
|
// the wake lock request fails - usually system related, such being low on battery
|
||
|
|
console.log(`${err.name}, ${err.message}`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function blur() {
|
||
|
|
let vid = document.querySelector("#videoPlayer");
|
||
|
|
if (vid.paused || vid.ended) {
|
||
|
|
requestAnimationFrame(blur);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let canvas = document.querySelector("#bgBlur");
|
||
|
|
|
||
|
|
if (canvas.width != vid.offsetWidth || canvas.height != vid.offsetHeight) {
|
||
|
|
canvas.width = vid.offsetWidth;
|
||
|
|
canvas.height = vid.offsetHeight;
|
||
|
|
}
|
||
|
|
let ctx = canvas.getContext("2d");
|
||
|
|
// Figure out scaled size
|
||
|
|
|
||
|
|
let sw_ratio = vid.videoWidth / vid.videoHeight;
|
||
|
|
let sh_ratio = vid.videoHeight / vid.videoWidth;
|
||
|
|
let sw = Math.min(canvas.width, canvas.height*sw_ratio);
|
||
|
|
let sh = Math.min(canvas.height, canvas.width*sh_ratio);
|
||
|
|
|
||
|
|
let left = (canvas.width - sw)/2;
|
||
|
|
let top = (canvas.height - sh)/2;
|
||
|
|
|
||
|
|
ctx.drawImage(vid, left, top, sw, sh);
|
||
|
|
requestAnimationFrame(blur);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = function() {
|
||
|
|
let cdt = new Date();
|
||
|
|
let tzo = parseInt(cdt.toString().split("GMT")[1].substring(0,3));
|
||
|
|
console.log(tzo);
|
||
|
|
if (tzo > -11 & tzo < -2) {
|
||
|
|
url = "https://r2-nam.ssi.fyi/packaged/manifest.mpd";
|
||
|
|
} else {
|
||
|
|
url = "https://r2-eur.ssi.fyi/packaged/manifest.mpd";
|
||
|
|
}
|
||
|
|
let bypass = true;
|
||
|
|
if (bypass) {
|
||
|
|
url = "https://rdmedia.bbc.co.uk/testcard/lowlatency/manifests/ll-avc-ctv-en.mpd";
|
||
|
|
//url = "https://livesim.dashif.org/dash/vod/testpic_2s/multi_subs.mpd";
|
||
|
|
}
|
||
|
|
let player = dashjs.MediaPlayer().create();
|
||
|
|
|
||
|
|
let video = document.querySelector("#videoPlayer");
|
||
|
|
player.updateSettings({
|
||
|
|
streaming: {
|
||
|
|
liveCatchup: { enabled: true },
|
||
|
|
},
|
||
|
|
});
|
||
|
|
player.initialize(video, url, true);
|
||
|
|
|
||
|
|
// Slight hack
|
||
|
|
let fullscreenBtn = document.querySelector("#fullscreenBtn");
|
||
|
|
let addEventListener = fullscreenBtn.addEventListener;
|
||
|
|
fullscreenBtn.addEventListener = function() {}; // Prevent events from being registered
|
||
|
|
let TTMLRenderingDiv = document.querySelector("#subsBox");
|
||
|
|
player.attachTTMLRenderingDiv(TTMLRenderingDiv)
|
||
|
|
player.attachView(video);
|
||
|
|
let controlbar = new ControlBar(player);
|
||
|
|
controlbar.initialize();
|
||
|
|
fullscreenBtn.addEventListener = addEventListener;
|
||
|
|
fullscreenBtn.addEventListener('click', onFullscreenClick);
|
||
|
|
|
||
|
|
initWakelock();
|
||
|
|
blur();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<!--
|
||
|
|
Getting an error?
|
||
|
|
Make sure to build dash.js
|
||
|
|
npm install (ignore errors)
|
||
|
|
npm run webpack-build
|
||
|
|
-->
|
||
|
|
<script src="./dash.js/dist/dash.all.debug.js"></script>
|
||
|
|
<style>
|
||
|
|
html {
|
||
|
|
background: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.videoControls {
|
||
|
|
position:absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.videoController {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 3;
|
||
|
|
opacity: 1%;
|
||
|
|
transition: opacity 0.25s ease-in-out;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.videoController:hover {
|
||
|
|
opacity: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-icon-layout, .time-display, .duration-display, .seekContainer {
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.videoView {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.volumeContainer {
|
||
|
|
width: 10%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seekContainer {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#bgBlur, #videoPlayer {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#videoPlayer {
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#bgBlur {
|
||
|
|
filter: blur(100px);
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#subsBox {
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
#subsBox * {
|
||
|
|
color: #ffffff !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- control bar -->
|
||
|
|
<div id="player">
|
||
|
|
<div class="videoControls">
|
||
|
|
<div id="videoController" class="videoController unselectable">
|
||
|
|
<div id="playPauseBtn" class="btn-play-pause control-icon-layout" title="Play/Pause">
|
||
|
|
<span id="iconPlayPause" class="icon-play"></span>
|
||
|
|
</div>
|
||
|
|
<div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
|
||
|
|
<span class="icon-fullscreen-enter"></span>
|
||
|
|
</div>
|
||
|
|
<div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
|
||
|
|
<span class="icon-bitrate"></span>
|
||
|
|
</div>
|
||
|
|
<div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
|
||
|
|
<span id="iconMute" class="icon-mute-off"></span>
|
||
|
|
</div>
|
||
|
|
<div class="volumeContainer">
|
||
|
|
<input type="range" id="volumebar" class="volumeBar" value="1" min="0" max="1" step=".01"/>
|
||
|
|
</div>
|
||
|
|
<div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
|
||
|
|
<span class="icon-tracks"></span>
|
||
|
|
</div>
|
||
|
|
<div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
|
||
|
|
<span class="icon-caption"></span>
|
||
|
|
</div>
|
||
|
|
<span id="videoTime" class="time-display">00:00:00</span>
|
||
|
|
<div class="seekContainer">
|
||
|
|
<input type="range" id="seekbar" value="0" class="seekbar" min="0" step="0.01"/>
|
||
|
|
</div>
|
||
|
|
<span id="videoDuration" class="duration-display">00:00:00</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="videoView">
|
||
|
|
<video muted autoplay id="videoPlayer"></video>
|
||
|
|
<canvas width="100" height="100" id="bgBlur"></canvas>
|
||
|
|
<div id="subsBox"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|