@epiclabs/epic-video-player
Version:
Video player wrapper to support different video sources with an unified interface
128 lines (118 loc) • 4.82 kB
HTML
<html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>epic-video-player demo</title><style>#source-selector {
margin-bottom: 1rem;
}
#rendition-selector {
margin-top: 1rem;
}
#stats {
padding: 0.5rem;
border: 1px solid gray;
border-radius: 4px;
}</style><script defer="defer" src="index.min.js"></script></head><body><h3 id="player-type"></h3><select id="source-selector"></select><video id="my-video" style="width: 100%" autoplay controls muted></video><select id="rendition-selector"><option value="-1">Auto</option></select> <button id="rendition-button">Change!</button><h4>Stats<pre id="stats"></pre><script>let myPlayer = window.myPlayer;
const sources = [
{
src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
label: 'MPEG-DASH',
},
{
src: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
label: 'HLS',
},
{
src: 'http://techslides.com/demos/sample-videos/small.mp4',
label: 'MP4',
},
{
src: 'https://dl6.webmfiles.org/elephants-dream.webm',
label: 'WebM',
},
{
src: 'https://archive.org/download/SampleVideo_908/Bear.ogv',
label: 'Ogg',
},
];
function initSourcesDemoFeatures() {
const select = document.getElementById('source-selector');
for (const source of sources) {
const option = document.createElement('option');
option.setAttribute('value', source.src);
option.text = source.label;
select.appendChild(option);
}
select.onchange = () => {
myPlayer.destroy();
const selectedValue = select.options[select.selectedIndex].value;
myPlayer = evp.newPlayer(
selectedValue,
document.getElementById('my-video'),
);
updatePlayerType();
};
}
function initRenditionsDemoFeatures() {
myPlayer.htmlPlayer.oncanplay = () => {
cleanRenditionsInSelector();
addRenditionsToSelector(myPlayer.getRenditions());
};
document
.getElementById('rendition-button')
.addEventListener('click', () => changeRendition());
}
function cleanRenditionsInSelector() {
const select = document.getElementById('rendition-selector');
while (select.children[1]) {
select.children[1].remove();
}
}
function addRenditionsToSelector(renditions) {
const select = document.getElementById('rendition-selector');
const button = document.getElementById('rendition-button');
if (!renditions.length) {
select.setAttribute('disabled', '');
button.setAttribute('disabled', '');
} else {
select.removeAttribute('disabled');
button.removeAttribute('disabled');
for (const rendition of renditions) {
const option = document.createElement('option');
option.setAttribute('value', JSON.stringify(rendition));
const dimensions = `${rendition.width}x${rendition.height}`;
const bitrate = `${Math.ceil(rendition.bitrate / 1000)} kbps`;
option.text = `${dimensions} - ${bitrate}`;
select.appendChild(option);
}
}
}
function changeRendition() {
const select = document.getElementById('rendition-selector');
const selectedRendition = select.options[select.selectedIndex].value;
if (selectedRendition === '-1') {
myPlayer.setRendition(-1, true);
} else {
myPlayer.setRendition(JSON.parse(selectedRendition), true);
}
}
function updatePlayerType() {
const placeholder = document.getElementById('player-type');
placeholder.innerText = `Using ${myPlayer.playerType} Player`;
}
function updateStats() {
const stats = document.getElementById('stats');
setInterval(() => {
if (myPlayer) {
stats.innerText = JSON.stringify(myPlayer.getStats(), null, 2);
} else {
stats.innerText = '';
}
}, 2_000);
}
document.addEventListener('DOMContentLoaded', () => {
myPlayer = evp.newPlayer(
sources[0].src,
document.getElementById('my-video'),
);
updateStats();
updatePlayerType();
initSourcesDemoFeatures();
initRenditionsDemoFeatures();
});</script></h4></body></html>