hls-test/new.html

207 lines
8.1 KiB
HTML
Raw Normal View History

2023-02-13 22:05:37 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>HLS VP9/fMP4 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 VP9 support...</p>
<p id=webm>Checking flat WebM VP8 / Vorbis support...</p>
<p id=wasm>Checking WebAssembly support...</p>
<h2>Caminandes - Llamigos</h2>
<p>HLS with VP9-in-MP4 video with Opus-in-MP4 or AAC audio.</p>
<video id=hls1 controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=new.m3u8>
<source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=caminandes-llamigos.webm.flat.webm>
<source type="video/quicktime; codecs=&quot;jpeg, mp3&quot;" src=polyphon-jpeg-mp3.mov>
</video>
<p>Flat WebM VP8/Vorbis</p>
<video id=webm controls width=640 height=360>
<source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src=new-vp8.webm>
</video>
<p>Flat Quicktime MJPEG/MP3</p>
<video id=mjpeg controls width=640 height=360>
<source type="video/quicktime" src=new-mjpeg.mov>
</video>
<p>Flat Quicktime MPEG-2</p>
<video id=mjpeg controls width=640 height=360>
<source type="video/quicktime" src=new-mpeg2.mov>
</video>
<p>Flat Quicktime MPEG-1</p>
<video id=mjpeg controls width=640 height=360>
<source type="video/quicktime" src=new-mpeg1.mov>
</video>
<p>Flat Quicktime Cinepak</p>
<video id=mjpeg controls width=640 height=360>
<source type="video/quicktime" src=new-cinepak.mov>
</video>
<p>HLS MJPEG MP4 alone (no audio)</p>
<video id=mjpeg-hls controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=new-jpeg.m3u8>
</video>
<p>Flat MJPEG MP4 alone (no audio)</p>
<video id=mjpeg-hls controls width=640 height=360>
<source type=video/mp4 src=new-jpeg.mp4>
</video>
<p>HLS MPEG-1 MP4 alone (no audio)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=new-mpeg1.m3u8>
</video>
<p>Flat MPEG-1 MP4 alone (no audio)</p>
<video controls width=640 height=360>
<source type=video/mp4 src=new-mpeg1.mp4>
</video>
<p>HLS MPEG-2 MP4 alone (no audio)</p>
<video controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=new-mpeg2.m3u8>
</video>
<p>Flat MPEG-2 MP4 alone (no audio)</p>
<video controls width=640 height=360>
<source type=video/mp4 src=new-mpeg2.mp4>
</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') {
let codecs = [
['VP9-in-WebM', 'video/webm; codecs="vp9"'],
['Opus-in-WebM', 'audio/webm; codecs="opus"'],
['VP9-in-MP4', 'video/mp4; codecs="vp09.00.10.08"'],
['Opus-in-MP4', 'audio/mp4; codecs="opus"'],
];
let yes = [];
let no = [];
for (let [name, mime] of codecs) {
if (MediaSource.isTypeSupported(mime)) {
yes.push(name);
} else {
no.push(name);
}
}
if (yes.length == codecs.length) {
mse.textContent = 'MSE supports ' + yes.join(', ');
mse.style.color = 'green';
} else {
mse.textContent = 'MSE supports ' + yes.join(', ') + ' but not ' + no.join(', ');
mse.style.color = 'orange';
}
} else {
mse.textContent = 'MSE not supported';
mse.style.color = 'red';
}
if (hls1.canPlayType('video/webm; codecs="vp8, vorbis"')) {
webm.textContent = 'flat WebM VP8/Vorbis supported';
webm.style.color = 'green';
} else {
webm.textContent = 'flat WebM VP8/Vorbis not supported';
webm.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="node_modules/video.js/dist/alt/video.core.js"></script>
<script src="http-streaming/dist/videojs-http-streaming.js"></script>
<script src=videojs-ogvjs.js></script>
-->
<script type="text/disabled">
var playerConfig = {
responsive: true,
controlBar: {
volumePanel: {
vertical: true,
inline: false
}
},
techOrder: [ 'html5' ],
html5: {}
};
function can(mime) {
return (typeof MediaSource == 'function') && MediaSource.isTypeSupported(mime);
}
var vp9 = can('video/mp4; codecs="vp09.00.10.08"');
var opus = can('audio/mp4; codecs="opus"');
var aac = can('audio/mp4; codecs="mp4a.40.02"');
console.log({
vp9, opus, aac
})
var mse = vp9 && (opus || aac);
if (mse) {
// enable streaming plugin
playerConfig.html5 = {
vhs: {
overrideNative: true,
useDevicePixelRatio: true
},
nativeAudioTracks: false,
nativeVideoTracks: false
};
console.log('will do mse');
var m3u8 = null;
for (let source of hls1.querySelectorAll('source')) {
if (source.type == 'application/vnd.apple.mpegurl') {
m3u8 = source;
continue;
}
}
videojs.log.level('debug');
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 a decode error');
// HLS reports this if it can't find a codec it likes
console.log(m3u8);
if (mse && m3u8) {
console.log('going to m3u8: ' + m3u8.getAttribute('src'));
vjs1.src([{
src: m3u8.getAttribute('src'),
type: m3u8.getAttribute('type')
}]);
vjs1.reset();
m3u8 = null;
}
}
vjs1.off('error', failover);
});
}
</script>
</body>
</html>