80 lines
3.2 KiB
HTML
80 lines
3.2 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>With fallbacks</h3>
|
||
|
|
|
||
|
|
<p>HLS with VP9 (.mp4)/MJPEG (.mov) video tracks and Opus/MP3 audio tracks. Custom MSE wrapper enabled to provide HLS-over-MSE for Mac Safari/Chrome/Firefox.</p>
|
||
|
|
<div>
|
||
|
|
<video controls width=640 height=360>
|
||
|
|
<source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
if (typeof MediaSource !== 'undefined') {
|
||
|
|
|
||
|
|
async function process(video) {
|
||
|
|
let vp9 = 'video/mp4; codecs="vp09.00.41.08"';
|
||
|
|
let opus = 'audio/mp4; codecs="opus"';
|
||
|
|
let mp3 = 'audio/mpeg';
|
||
|
|
|
||
|
|
// Temporary hack, just load the full tracks
|
||
|
|
let videoTracks = [
|
||
|
|
{ type: vp9, src: 'fmp4.480p.vp9.mp4' },
|
||
|
|
];
|
||
|
|
let audioTracks = [
|
||
|
|
{ type: opus, src: 'fmp4.audio.opus.mp4' },
|
||
|
|
{ type: mp3, src: 'fmp4.audio.mpeg.mp3' },
|
||
|
|
];
|
||
|
|
|
||
|
|
let videoTrack = videoTracks.filter(({type}) => MediaSource.isTypeSupported(type))[0];
|
||
|
|
let audioTrack = audioTracks.filter(({type}) => MediaSource.isTypeSupported(type))[0];
|
||
|
|
|
||
|
|
if (!videoTrack || !audioTrack) {
|
||
|
|
throw new Error('error no tracks');
|
||
|
|
}
|
||
|
|
console.log(videoTrack);
|
||
|
|
console.log(audioTrack);
|
||
|
|
|
||
|
|
let videoBytes = await (await fetch(videoTrack.src)).arrayBuffer();
|
||
|
|
// hackhack
|
||
|
|
videoBytes = videoBytes.slice(0, 878148 + 779);
|
||
|
|
let audioBytes = await (await fetch(audioTrack.src)).arrayBuffer();
|
||
|
|
|
||
|
|
let source = new MediaSource();
|
||
|
|
source.addEventListener("sourceopen", (event) => {
|
||
|
|
source.duration = 150; // hack
|
||
|
|
let videoBuffer = source.addSourceBuffer(videoTrack.type);
|
||
|
|
let audioBuffer = source.addSourceBuffer(audioTrack.type);
|
||
|
|
videoBuffer.appendBuffer(videoBytes);
|
||
|
|
audioBuffer.appendBuffer(audioBytes);
|
||
|
|
console.log('appended.');
|
||
|
|
});
|
||
|
|
video.addEventListener('error', (event) => {
|
||
|
|
console.log('video error?', video.error);
|
||
|
|
});
|
||
|
|
video.src = URL.createObjectURL(source);
|
||
|
|
console.log('opening...');
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let video of document.querySelectorAll('video')) {
|
||
|
|
process(video);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|