2023-03-08 20:03:23 +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 VP9/fMP4 test</h1>
|
|
|
|
|
|
|
|
|
|
<h2>Caminandes - Llamigos</h2>
|
|
|
|
|
|
2023-03-27 21:41:21 +00:00
|
|
|
<h3>Full fallbacks</h3>
|
|
|
|
|
|
2023-03-29 17:59:47 +00:00
|
|
|
<p>HLS with VP9/MJPEG video tracks and Opus/MP3 audio tracks.</p>
|
|
|
|
|
<div>
|
|
|
|
|
<video controls width=640 height=360>
|
|
|
|
|
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
|
|
|
|
|
</video>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p></p><a href="fmp4-tracks.html">see full fmp4 track variants list</p>
|
|
|
|
|
|
|
|
|
|
<script src="node_modules/video.js/dist/video.js"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
let playerConfig = {
|
|
|
|
|
responsive: true,
|
|
|
|
|
controlBar: {
|
|
|
|
|
volumePanel: {
|
|
|
|
|
vertical: true,
|
|
|
|
|
inline: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
techOrder: [ 'html5' ],
|
|
|
|
|
html5: {}
|
|
|
|
|
};
|
|
|
|
|
videojs.log.level('debug');
|
|
|
|
|
|
|
|
|
|
console.log('hey');
|
|
|
|
|
console.log(MediaSource);
|
|
|
|
|
console.log(MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.41.08,opus"'));
|
|
|
|
|
if (window.MediaSource && MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.41.08,opus"')) {
|
|
|
|
|
console.log('yeah');
|
|
|
|
|
for (let video of document.querySelectorAll('video')) {
|
|
|
|
|
console.log(video);
|
|
|
|
|
video.classList.add('video-js');
|
|
|
|
|
video.classList.add('vjs-default-skin');
|
|
|
|
|
videojs(video, playerConfig);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2023-03-08 20:03:23 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
