2023-03-08 20:03:23 +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 >
2023-03-29 23:08:31 +00:00
< 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-03-27 21:41:21 +00:00
2023-03-29 23:08:31 +00:00
< h3 > With fallbacks< / h3 >
2023-03-30 17:20:15 +00:00
< 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 >
2023-03-29 17:59:47 +00:00
< div >
< video controls width = 640 height = 360 >
< source type = application/vnd.apple.mpegurl src = fmp4.vp9-mjpeg.mov.m3u8 >
< / video >
< / div >
2023-03-30 19:18:37 +00:00
2023-03-29 23:08:31 +00:00
< p > Current behavior:< / p >
2023-03-30 17:20:15 +00:00
< 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 >
2023-03-29 23:08:31 +00:00
< ul >
< li > MSE-based streaming with VHS
< ul >
< li > Firefox seems to work with VP9 & Opus tracks via video.js< / li >
2023-03-30 19:18:37 +00:00
< li > Chrome works (needed to fix an output setting)< / li >
2023-03-29 23:08:31 +00:00
< 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 >
2023-03-30 17:20:15 +00:00
< 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 >
2023-03-29 23:08:31 +00:00
< li > < i > no access to iOS 13-15< / i > < / li >
2023-03-30 17:20:15 +00:00
< 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 >
2023-03-29 23:08:31 +00:00
< li > < i > no access to iOS 11< / i > < / li >
2023-03-30 17:20:15 +00:00
< 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 >
2023-03-29 23:08:31 +00:00
< li > iOS 9 doesn't understand the required version of HLS playlist format, and fails.< / li >
< / ul >
< / li >
< / ul >
2023-03-29 17:59:47 +00:00
2023-04-03 03:27:16 +00:00
<!-- <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 >
2023-03-29 17:59:47 +00:00
< script type = "text/javascript" >
let playerConfig = {
responsive: true,
controlBar: {
volumePanel: {
vertical: true,
inline: false
}
},
2023-03-29 23:08:31 +00:00
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
}
},
2023-03-29 17:59:47 +00:00
};
videojs.log.level('debug');
2023-03-29 23:08:31 +00:00
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-29 17:59:47 +00:00
for (let video of document.querySelectorAll('video')) {
video.classList.add('video-js');
video.classList.add('vjs-default-skin');
videojs(video, playerConfig);
}
2023-03-29 23:08:31 +00:00
// }
2023-03-29 17:59:47 +00:00
}
< / script >
2023-03-08 20:03:23 +00:00
< / body >
< / html >
