176 lines
6.9 KiB
HTML
176 lines
6.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset=utf-8>
|
||
|
|
<title>HLS WebM test</title>
|
||
|
|
<link rel=stylesheet type=text/css href=video-js/video-js.css>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>HLS WebM test</h1>
|
||
|
|
|
||
|
|
<p id=hls>Checking HLS support...</p>
|
||
|
|
<p id=mse>Checking MSE support...</p>
|
||
|
|
<p id=webm>Checking flat WebM VP8 / Vorbis support...</p>
|
||
|
|
<p id=webm2>Checking flat WebM generic support...</p>
|
||
|
|
<p id=wasm>Checking WebAssembly support...</p>
|
||
|
|
|
||
|
|
<h2>Caminandes - Llamigos</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<p>HLS with AAC audio and VP9-in-MP4 at several resolutions:</p>
|
||
|
|
<video id=hls0 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-aac.m3u8>
|
||
|
|
<source type=video/webm src=caminandes-llamigos.webm.flat.webm>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>HLS with MP3 audio (mp4a.40.34) and VP9-in-MP4 at several resolutions:</p>
|
||
|
|
<video id=hls1 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3.m3u8>
|
||
|
|
<source type=video/webm src=caminandes-llamigos.webm.flat.webm>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>HLS with MP3 audio (mp4a.6b) and VP9-in-MP4 at several resolutions:</p>
|
||
|
|
<video id=hls2 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3b.m3u8>
|
||
|
|
<source type=video/webm src=caminandes-llamigos.webm.flat.webm>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>HLS with MP3 audio (mp3) and VP9-in-MP4 at several resolutions:</p>
|
||
|
|
<video id=hls3 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3c.m3u8>
|
||
|
|
<source type=video/webm src=caminandes-llamigos.webm.flat.webm>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<p>HLS with elementary MP3 audio (mp4a.40.34) and VP9-in-MP4 at several resolutions:</p>
|
||
|
|
<video id=hls4 controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3d.m3u8>
|
||
|
|
<source type=video/webm src=caminandes-llamigos.webm.flat.webm>
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
if (hls1.canPlayType('application/vnd.apple.mpegurl')) {
|
||
|
|
hls.textContent = 'native HLS playback supported';
|
||
|
|
hls.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
hls.textContent = 'no native HLS';
|
||
|
|
hls.style.color = 'red';
|
||
|
|
}
|
||
|
|
if (typeof MediaSource == 'function') {
|
||
|
|
if (MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.10.08"') &&
|
||
|
|
MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.02"')) {
|
||
|
|
mse.textContent = 'MSE supports VP9 & AAC-LC in MP4';
|
||
|
|
mse.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
mse.textContent = 'MSE doesn\'t support one of VP9 or AAC in MP4';
|
||
|
|
mse.style.color = 'orange';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
mse.textContent = 'MSE not supported';
|
||
|
|
mse.style.color = 'red';
|
||
|
|
}
|
||
|
|
if (hls1.canPlayType('video/webm')) {
|
||
|
|
webm.textContent = 'flat WebM generic supported';
|
||
|
|
webm.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
webm.textContent = 'flat WebM generic not supported';
|
||
|
|
webm.style.color = 'red';
|
||
|
|
}
|
||
|
|
if (hls1.canPlayType('video/webm; codecs="vp8, vorbis"')) {
|
||
|
|
webm2.textContent = 'flat WebM VP8/Vorbis supported';
|
||
|
|
webm2.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
webm2.textContent = 'flat WebM VP8/Vorbis not supported';
|
||
|
|
webm2.style.color = 'red';
|
||
|
|
}
|
||
|
|
if (typeof WebAssembly == 'object') {
|
||
|
|
wasm.textContent = 'WebAssembly supported';
|
||
|
|
wasm.style.color = 'green';
|
||
|
|
} else {
|
||
|
|
wasm.textContent = 'no WebAssembly support';
|
||
|
|
wasm.style.color = 'red';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<script src=ogvjs-1.8.4/ogv.js></script>
|
||
|
|
<script src=video-js/video.js></script>
|
||
|
|
<script src=videojs-ogvjs.js></script>
|
||
|
|
<script type=text/x-disabled>
|
||
|
|
|
||
|
|
var playerConfig = {
|
||
|
|
responsive: true,
|
||
|
|
controlBar: {
|
||
|
|
volumePanel: {
|
||
|
|
vertical: true,
|
||
|
|
inline: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
techOrder: [ 'html5' ],
|
||
|
|
html5: {}
|
||
|
|
};
|
||
|
|
|
||
|
|
var mse = (typeof MediaSource == 'function') &&
|
||
|
|
MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.10.08"') &&
|
||
|
|
MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.02"');
|
||
|
|
if (mse) {
|
||
|
|
// enable streaming plugin
|
||
|
|
playerConfig.html5.vhs = {
|
||
|
|
overrideNative: true,
|
||
|
|
useDevicePixelRatio: true
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var webm = null;
|
||
|
|
for (let source of hls1.querySelectorAll('source')) {
|
||
|
|
if (source.type.startsWith('video/webm')) {
|
||
|
|
webm = source;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var ogv = webm &&
|
||
|
|
!mse &&
|
||
|
|
!hls1.canPlayType(webm.type) &&
|
||
|
|
(typeof WebAssembly == 'object') &&
|
||
|
|
(typeof WebAssembly.Module == 'function');
|
||
|
|
if (ogv) {
|
||
|
|
console.log('can do ogvjs');
|
||
|
|
var base = new URL('./ogvjs-1.8.4', document.location)
|
||
|
|
console.log(base);
|
||
|
|
console.log(base.pathname);
|
||
|
|
playerConfig.ogvjs = {
|
||
|
|
base: base.pathname
|
||
|
|
};
|
||
|
|
console.log(playerConfig.ogvjs.base);
|
||
|
|
playerConfig.techOrder.push('ogvjs');
|
||
|
|
} else {
|
||
|
|
console.log('wont do ogvjs');
|
||
|
|
}
|
||
|
|
|
||
|
|
hls1.classList.add('video-js');
|
||
|
|
hls1.classList.add('vjs-default-skin');
|
||
|
|
var vjs1 = videojs(hls1, playerConfig);
|
||
|
|
|
||
|
|
vjs1.on('error', function failover() {
|
||
|
|
console.log('got error');
|
||
|
|
var error = vjs1.error();
|
||
|
|
if (error && error.code == MediaError.MEDIA_ERR_DECODE) {
|
||
|
|
console.log('saw its decode');
|
||
|
|
// HLS reports this if it can't find a codec it likes
|
||
|
|
if (webm) {
|
||
|
|
console.log('going to ' + webm.getAttribute('src'));
|
||
|
|
vjs1.src([{
|
||
|
|
src: webm.getAttribute('src'),
|
||
|
|
type: webm.getAttribute('type')
|
||
|
|
}]);
|
||
|
|
vjs1.reset();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
vjs1.off('error', failover);
|
||
|
|
});
|
||
|
|
|
||
|
|
vjs1.load();
|
||
|
|
</script>
|
||
|
|
-->
|
||
|
|
</body>
|
||
|
|
</html>
|