hls-test/index.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. 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 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>

        <!--<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>

        <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>
initial commit 2021-10-22 18:27:02 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<meta charset=utf-8>`
delete a bunch of crud 2023-04-03 03:45:33 +00:00			`<title>HLS VP9/fMP4 test</title>`
wip 2023-02-13 22:05:37 +00:00			`<link rel=stylesheet type=text/css href=video-js/video-js.css>`
initial commit 2021-10-22 18:27:02 +00:00			`</head>`
			`<body>`
delete a bunch of crud 2023-04-03 03:45:33 +00:00			`<h1>HLS VP9/fMP4 test</h1>`
initial commit 2021-10-22 18:27:02 +00:00
			`<h2>Caminandes - Llamigos</h2>`

delete a bunch of crud 2023-04-03 03:45:33 +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>`

			`<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 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>`

			`<!--<script src="node_modules/video.js/dist/video.js"></script>-->`

			`<script src="video.js/dist/alt/video.core.js"></script>`
wip 2023-02-13 22:05:37 +00:00			`<script src="http-streaming/dist/videojs-http-streaming.js"></script>`

delete a bunch of crud 2023-04-03 03:45:33 +00:00			`<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`
			`}`
			`},`
wip 2023-02-13 22:05:37 +00:00			`};`
			`videojs.log.level('debug');`

delete a bunch of crud 2023-04-03 03:45:33 +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)) {`

wip 2023-02-13 22:05:37 +00:00			`for (let video of document.querySelectorAll('video')) {`
			`video.classList.add('video-js');`
			`video.classList.add('vjs-default-skin');`
			`videojs(video, playerConfig);`
			`}`
delete a bunch of crud 2023-04-03 03:45:33 +00:00
			`// }`
wip 2023-02-13 22:05:37 +00:00			`}`
initial commit 2021-10-22 18:27:02 +00:00			`</script>`
			`</body>`
			`</html>`