170 lines
6.5 KiB
HTML
170 lines
6.5 KiB
HTML
<!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>
|
|
|
|
<h3>HLS only:</h3>
|
|
|
|
<p>HLS with correctly-labeled VP9 (.mp4) and MJPEG (.mov) video tracks and Opus (.mp4, for Chrome/Firefox) and MP3 (.mp3, used by Safari) audio tracks. Video.js is enabled but will not yet override the native HLS in Safari Desktop.</p>
|
|
<div>
|
|
<video controls width=640 height=360>
|
|
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
|
|
</video>
|
|
</div>
|
|
|
|
<h3>WebM or HLS:</h3>
|
|
<p>WebM VP9/Opus, WebM VP8/Vorbis, or HLS. Current versions of desktop Safari should see one or the other WebM, and those that fall back to the HLS may or may not work.</p>
|
|
<div>
|
|
<video controls width=640 height=360>
|
|
<source type="video/webm; codecs="vp9, opus"" src=flat.480p.vp9-opus.webm>
|
|
<source type="video/webm; codecs="vp8, vorbis"" src=flat.480p.vp8-vorbis.webm>
|
|
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
|
|
</video>
|
|
</div>
|
|
|
|
|
|
|
|
<p>Current behavior:</p>
|
|
<p>Browsers that play the VP9 track or one of the WebM files will get sharp video, those that play the MJPEG track will get blurry video. Audio should sound the same either way.</p>
|
|
<ul>
|
|
<li>MSE-based streaming with VHS
|
|
<ul>
|
|
<li>Firefox seems to work with VP9 & Opus tracks via video.js</li>
|
|
<li>Chrome works (needed to fix an output setting)</li>
|
|
<li>(disabled) Safari uses the MP3 audio tracks and VHS gets confused because it tries to parse them as MP4 (not Safari's fault)</li>
|
|
</ul>
|
|
</li>
|
|
<li>Apple HLS player
|
|
<table border>
|
|
<tr>
|
|
<th>platform</th>
|
|
<td>vp09 in .mp4</td>
|
|
<td>mp4v in .mp4</td>
|
|
<td>s263 in .3gp</td>
|
|
<td>jpeg in .mov</td>
|
|
<td>jpeg in .mp4</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
macOS 13 / Safari 16.4<br>
|
|
on 2019 Intel MBP, 2020 M1 MBA
|
|
</td>
|
|
<td></td>
|
|
<td>if lie</td>
|
|
<td>if lie</td>
|
|
<td>works</td>
|
|
<td>works in 16.4 only?</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
macOS 12 / Safari 16.4<br>
|
|
on 2015 Intel MBP, 2015 Intel MBA
|
|
</td>
|
|
<td></td>
|
|
<td>if lie</td>
|
|
<td>if lie</td>
|
|
<td>if lie</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
iOS 13+ on A12+
|
|
</td>
|
|
<td>works</td>
|
|
<td>works</td>
|
|
<td>if lie</td>
|
|
<td>if lie</td>
|
|
<td>works in 16.4 only?</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
iOS 13+ on A11+
|
|
</td>
|
|
<td></td>
|
|
<td>works</td>
|
|
<td>if lie</td>
|
|
<td>if lie</td>
|
|
<td>works in 16.4 only?</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
iOS 12 on A7
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
iOS 10 on A6
|
|
</td>
|
|
<td></td>
|
|
<td>if lie</td>
|
|
<td>if lie</td>
|
|
<td>if lie</td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</li>
|
|
</ul>
|
|
|
|
<!--<script src="node_modules/video.js/dist/video.js"></script>-->
|
|
|
|
<script src="video.js/dist/alt/video.core.js"></script>
|
|
<script src="http-streaming/dist/videojs-http-streaming.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
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.
|
|
// Switching to fragmented QuickTime ;)
|
|
// seems to be helping maybe?
|
|
overrideNative: false
|
|
}
|
|
},
|
|
};
|
|
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)) {
|
|
|
|
for (let video of document.querySelectorAll('video')) {
|
|
video.classList.add('video-js');
|
|
video.classList.add('vjs-default-skin');
|
|
videojs(video, playerConfig);
|
|
}
|
|
|
|
// }
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|