whee
This commit is contained in:
parent
43f577bfb9
commit
0118ee46af
3 changed files with 174 additions and 229 deletions
343
new.html
343
new.html
|
|
@ -1,207 +1,138 @@
|
|||
<!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="vp8, vorbis"" src=caminandes-llamigos.webm.flat.webm>
|
||||
<source type="video/quicktime; codecs="jpeg, mp3"" 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="vp8, vorbis"" 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>
|
||||
<!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>WebM VP9 and VP8 in front, MJPEG next, HLS with VP9-in-MP4 video with Opus-in-MP4 or AAC audio activated on JS.</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type="video/webm; codecs="vp9, opus"" src=new-vp9.webm>
|
||||
<source type="video/webm; codecs="vp8, vorbis"" src=new-vp8.webm>
|
||||
<source type="video/quicktime; codecs="jpeg, mp4a.6b"" src=new-mjpeg.mov>
|
||||
<source type=application/vnd.apple.mpegurl src=new.m3u8>
|
||||
</video>
|
||||
|
||||
<h2>Sources</h2>
|
||||
|
||||
<p>Flat WebM VP9/Opus</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type="video/webm; codecs="vp9, opus"" src=new-vp9.webm>
|
||||
</video>
|
||||
|
||||
<p>Flat WebM VP8/Vorbis</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type="video/webm; codecs="vp8, vorbis"" src=new-vp8.webm>
|
||||
</video>
|
||||
|
||||
<p>Flat Quicktime MJPEG/MP3</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type="video/quicktime; codecs="jpeg, mp4a.6b"" src=new-mjpeg.mov>
|
||||
</video>
|
||||
|
||||
<p>HLS</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=new.m3u8>
|
||||
</video>
|
||||
|
||||
<h2>Components</h2>
|
||||
|
||||
<p>HLS VP9 MP4 alone (no audio)</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=new-vp9.m3u8>
|
||||
</video>
|
||||
|
||||
<p>HLS MJPEG MP4 alone (no audio)</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=new-jpeg.m3u8>
|
||||
</video>
|
||||
|
||||
<p>HLS MJPEG TS alone (no audio)</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=new-jpeg-ts.m3u8>
|
||||
</video>
|
||||
|
||||
<p>HLS Opus MP4 alone (only audio)</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=new-opus.m3u8>
|
||||
</video>
|
||||
|
||||
<p>HLS MP3 MP4 alone (only audio)</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=new-mp3-mp4.m3u8>
|
||||
</video>
|
||||
|
||||
<p>HLS MP3 TS alone (only audio)</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=new-mp3-ts.m3u8>
|
||||
</video>
|
||||
|
||||
<p>HLS MP3 raw alone (only audio)</p>
|
||||
<video controls width=640 height=360>
|
||||
<source type=application/vnd.apple.mpegurl src=new-mp3-raw.m3u8>
|
||||
</video>
|
||||
|
||||
<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 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"'],
|
||||
['MP3', 'audio/mp3'],
|
||||
];
|
||||
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 (video.canPlayType('video/webm')) {
|
||||
webm.textContent = 'flat WebM supported';
|
||||
webm.style.color = 'green';
|
||||
} else {
|
||||
webm.textContent = 'flat WebM 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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue