hls-test/fmp4-alt.html

78 lines
2.7 KiB
HTML
Raw Permalink Normal View History

2023-03-30 18:46:39 +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>
<ul>
<li><a href="fmp4-codecs.html">see codec variants</a></li>
<li><a href="fmp4-tracks.html">see component track list</a></li>
</ul>
2023-04-14 21:34:48 +00:00
<h3>Native HLS</h3>
2023-03-30 18:46:39 +00:00
2023-04-14 21:34:48 +00:00
<p>HLS with VP9 in mp4, JPEG in mp4, and Opus and AAC in mp4</p>
2023-03-30 18:46:39 +00:00
<div>
<video controls width=640 height=360>
2023-04-14 21:34:48 +00:00
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.m3u8>
2023-03-30 18:46:39 +00:00
</video>
</div>
2023-04-14 21:34:48 +00:00
<h3>Overridden HLS</h3>
2023-03-30 18:46:39 +00:00
2023-04-14 21:34:48 +00:00
<p>HLS with VP8 in mp4, JPEG in mp4, and Opus and AAC in mp4</p>
<div>
<video class=override controls width=640 height=360>
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.m3u8>
</video>
</div>
2023-03-30 18:46:39 +00:00
2023-04-05 19:05:14 +00:00
<script src="video.js/dist/alt/video.core.js"></script>
<script src="http-streaming/dist/videojs-http-streaming.js"></script>
2023-03-30 18:46:39 +00:00
2023-04-05 19:05:14 +00:00
<script type="text/javascript">
videojs.log.level('debug');
console.log(typeof MediaSource)
if (typeof MediaSource !== 'undefined') {
//let vp9 = MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.41.08"');
//let opus = MediaSource.isTypeSupported('video/mp4; codecs="opus"');
//let mp3 = MediaSource.isTypeSupported('audio/mpeg');
//if (vp9 && (opus || mp3)) {
2023-03-30 18:46:39 +00:00
for (let video of document.querySelectorAll('video')) {
2023-04-14 21:34:48 +00:00
let playerConfig = {
responsive: true,
controlBar: {
volumePanel: {
vertical: true,
inline: false
}
},
html5: {
vhs: {
// Currently the MP3 audio track fails in Safari
// and it doesn't grok the Opus
// Either fix MP3 handling in vhs or use AAC.
overrideNative: video.classList.contains('override')
}
},
};
2023-04-05 19:05:14 +00:00
video.classList.add('video-js');
video.classList.add('vjs-default-skin');
videojs(video, playerConfig);
2023-03-30 18:46:39 +00:00
}
2023-04-05 19:05:14 +00:00
// }
2023-03-30 18:46:39 +00:00
}
</script>
</body>
2023-04-05 19:05:14 +00:00
</html>