<!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. 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> <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 seems unhappy, something in the MSE is not ok with the VP9 first segment?</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> <script src="node_modules/video.js/dist/video.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>