stream-centre-player
Version:
Dash.js wrapper for easy-peasy usage
97 lines (80 loc) • 3.34 kB
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Qoollo StreamCentre VideoPlayer</title>
<link href="player.css" rel="stylesheet" />
</head>
<body>
<div class="fullscreen-bg">
<div class="errors-container">
<ul class="errors-list"></ul>
</div>
<video id="video-player" class="fullscreen-bg__video"></video>
<div id="codec-not-supported" class="hidden">
Ошибка воспроизведения
<!-- Codec is not supported -->
</div>
</div>
<script src="player.js"></script>
<script>
var video = document.getElementsByTagName('video')[0],
tests = [ 'video/mp4; codecs="avc1"', 'video/mp4; codecs="avc1.4D401E"' ];
console.group('StreamCentre VideoPlayer initialize');
tests.forEach(t => {
console.log(`- Can play ${t}?`);
console.log(`- ${video.canPlayType(t)}`);
});
player = new Qoollo.StreamCentre.Player(document.getElementById('video-player'), {
controls: true,
poster: 'poster.gif'
});
player.initialize('http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd');
player.addEventListener("error", displayError);
player.addEventListener("error", executeCallback);
player.addEventListener("playbacktimechange", executeCallback);
console.groupEnd();
Qoollo.StreamCentre.player = player;
///////////////////////////////////////////////////////////////////////////////////////
function executeCallback(e) {
if (typeof BrowserCallback !== 'undefined' && BrowserCallback.call) {
BrowserCallback.call('handlePlayerEvent', e);
}
}
function displayError(e) {
var errorsList = document.querySelector('.errors-container .errors-list'),
li = document.createElement('li'),
span = document.createElement('span'),
btn = document.createElement('button');
errorsList.appendChild(li);
li.classList.add('errors-list_item');
li.appendChild(btn);
li.appendChild(span);
span.innerText = e.error;
btn.classList.add('close-btn');
btn.innerHTML = '×';
btn.addEventListener('click', () => errorsList.removeChild(li));
if (e.errorType === 'CodecNotSupported') {
showCodecNotSupported();
}
}
function showCodecNotSupported() {
var banner = document.getElementById('codec-not-supported');
banner.classList.remove('hidden');
this.element.classList.add('hidden');
}
function simulateDashJsError(player) {
var err = {
type: 'error',
error: 'download',
event: {
id: 'context',
request: new XMLHttpRequest(),
url: '/some/url'
}
};
player.onMediaPlayerEvent(err);
}
</script>
</body>
</html>