delete a bunch of crud
This commit is contained in:
parent
b54672a9a1
commit
9905d15a91
144 changed files with 67 additions and 373854 deletions
238
index.html
238
index.html
|
|
@ -2,199 +2,95 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>HLS WebM test</title>
|
||||
<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 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>
|
||||
<h1>HLS VP9/fMP4 test</h1>
|
||||
|
||||
<h2>Caminandes - Llamigos</h2>
|
||||
|
||||
<h3>VP9</h3>
|
||||
<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>
|
||||
|
||||
<!--
|
||||
<p>HLS with AAC-in-MP4 audio and VP9-in-MP4 at several resolutions:</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-aac.m3u8>
|
||||
</video>
|
||||
<h3>With fallbacks</h3>
|
||||
|
||||
<p>HLS with Opus-in-MP4 audio and VP9-in-MP4 at several resolutions:</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-opus.m3u8>
|
||||
</video>
|
||||
-->
|
||||
<p>HLS with VP9 (.mp4)/MJPEG (.mov) video tracks and Opus/MP3 audio tracks. Video.js enabled to provide HLS-over-MSE for Chrome/Firefox.</p>
|
||||
<div>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<h3>Mixed codecs</h3>
|
||||
|
||||
<p>HLS with ((VP9-fMP4 + (Opus-fMP4 | MP3)) | (MJPEG-QuickTime + MP3)):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-opus-mp3-mjpeg.m3u8>
|
||||
</video>
|
||||
<p>Current behavior:</p>
|
||||
<p>Browsers that play the VP9 track 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
|
||||
<ul>
|
||||
<li>macOS 13's Safari 16 plays MJPEG.</li>
|
||||
<li>iOS 16 plays VP9 if supported, or MJPEG if no hardware codec</li>
|
||||
<li>Those last two will also play h.263 or MPEG-4 visual <a href="fmp4-lies.html">IF labeled as if h.264 in the playlist</a>; MJPEG can be properly labeled as "jpeg". I haven't found a supported labeling that is correct yet.</li>
|
||||
<li><i>no access to iOS 13-15</i></li>
|
||||
<li>iOS 13 doesn't seem to like mjpeg in .mp4, but .mov is fine</li>
|
||||
<li>iOS 12 doesn't seem to like any version on an old iPad Air, except with h264 video</li>
|
||||
<li><i>no access to iOS 11</i></li>
|
||||
<li>iOS 10 on iPhone 5C plays h.263, or mpeg-4 visual IF labeled as false avc1.blah. It will also play mjpeg if so mislabeled, but only in .mov not in .mp4 as above.</li>
|
||||
<li>iOS 9 doesn't understand the required version of HLS playlist format, and fails.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>VP9 only</h3>
|
||||
<!--<script src="node_modules/video.js/dist/video.js"></script>-->
|
||||
|
||||
<p>HLS with (VP9-fMP4 + (Opus-fMP4 | MP3)):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=llamigos-vp9-mp3-opus.m3u8>
|
||||
</video>
|
||||
|
||||
<h3>MJPEG only</h3>
|
||||
|
||||
<p>HLS standalone (MJPEG-MP3-MP4):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=standalone-mjpeg-mp3.m3u8>
|
||||
</video>
|
||||
<p>HLS standalone (MJPEG-AAC-MP4):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=standalone-mjpeg-aac.m3u8>
|
||||
</video>
|
||||
<p>HLS standalone (MJPEG-noaudio-MP4):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=standalone-mjpeg.m3u8>
|
||||
</video>
|
||||
|
||||
<p>HLS standalone (MJPEG-noaudio-QuickTime):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=standalone-mjpeg-mp3-mov.m3u8>
|
||||
</video>
|
||||
<p>HLS standalone (MJPEG-noaudio-QuickTime):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=standalone-mjpeg-aac-mov.m3u8>
|
||||
</video>
|
||||
<p>HLS standalone (MJPEG-noaudio-QuickTime):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=standalone-mjpeg-mov.m3u8>
|
||||
</video>
|
||||
|
||||
<p>Flat QT with (MJPEG-MP3-QuickTime):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type="video/quicktime" src=standalone-mjpeg-mp3.mov>
|
||||
</video>
|
||||
<p>Flat QT with (MJPEG-AAC-QuickTime):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type="video/quicktime" src=standalone-mjpeg-aac.mov>
|
||||
</video>
|
||||
<p>Flat QT with (MJPEG-noaudio-QuickTime):</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type="video/quicktime" src=standalone-mjpeg.mov>
|
||||
</video>
|
||||
|
||||
<!--
|
||||
<script src=video-js/alt/video.core.js></script>
|
||||
<script src=videojs-http-streaming.js></script>
|
||||
-->
|
||||
<script src="node_modules/video.js/dist/video.js"></script>
|
||||
<!--
|
||||
<script src="node_modules/video.js/dist/alt/video.core.js"></script>
|
||||
<script src="video.js/dist/alt/video.core.js"></script>
|
||||
<script src="http-streaming/dist/videojs-http-streaming.js"></script>
|
||||
-->
|
||||
|
||||
<script>
|
||||
let video = document.createElement('video');
|
||||
if (video.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 video = [];
|
||||
let audio = [];
|
||||
if (MediaSource.isTypeSupported('video/webm; codecs="vp8"')) {
|
||||
video.push('VP8-in-WebM (vp8)');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('video/webm; codecs="vp9"')) {
|
||||
video.push('VP9-in-WebM (vp9)');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('video/mp4; codecs="vp09.00.10.08"')) {
|
||||
video.push('VP9-in-MP4 (vp09)');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('video/mp4; codecs="vp9"')) {
|
||||
video.push('VP9-in-MP4 (vp9)');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.02"')) {
|
||||
audio.push('AAC-in-MP4');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.34"')) {
|
||||
audio.push('MP3-in-MP4 (mp4a.40.34)');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.6b"')) {
|
||||
audio.push('MP3-in-MP4 (mp4a.6b)');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('audio/mp4; codecs="mp3"')) {
|
||||
audio.push('MP3-in-MP4 (mp3)');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('audio/mp4; codecs="opus"')) {
|
||||
audio.push('Opus-in-MP4');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('audio/webm; codecs="opus"')) {
|
||||
audio.push('Opus-in-WebM');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('audio/webm; codecs="vorbis"')) {
|
||||
audio.push('Vorbis-in-WebM');
|
||||
}
|
||||
if (MediaSource.isTypeSupported('audio/mp3')) {
|
||||
audio.push('MP3 raw');
|
||||
}
|
||||
|
||||
if (video.length > 0 && audio.length > 0) {
|
||||
mse.style.color = 'green';
|
||||
} else {
|
||||
mse.style.color = 'orange';
|
||||
}
|
||||
mse.textContent = `MSE supports video: ${video.join(', ')}; audio: ${audio.join(',')}`;
|
||||
} else {
|
||||
mse.textContent = 'MSE not supported';
|
||||
mse.style.color = 'red';
|
||||
}
|
||||
if (video.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 (video.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';
|
||||
}
|
||||
|
||||
var playerConfig = {
|
||||
responsive: true,
|
||||
controlBar: {
|
||||
volumePanel: {
|
||||
vertical: true,
|
||||
inline: false
|
||||
}
|
||||
},
|
||||
techOrder: [ 'html5' ],
|
||||
html5: {}
|
||||
<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');
|
||||
|
||||
if (window.MediaSource && MediaSource.isTypeSupported('video/mp4; codecs="vp09,opus"')) {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue