It shows low quality stream each loop

Question

It shows low quality stream each loop

Opened this issue 5 months ago · 0 comments

In this case I have disabled all streams except the stream with high quality

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Streaming</title>
    <link href="https://vjs.zencdn.net/8.19.1/video-js.css" rel="stylesheet" />
</head>
<body>
    <div style="width: 100vw; height: 100vh;">
        <video class="video-js" preload="none" style="width: 100%; height: 100%;"></video>
    </div>
    <script src="https://vjs.zencdn.net/8.19.1/video.min.js"></script>
    <script>
        const master = `#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=372288,RESOLUTION=640x277
https://video.sirv.com/mvsz1vqpyxdh52eogfucnxape5pjnj7b/video/Hero-Desktop-1920x830.mp4/640x277.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=663558,RESOLUTION=854x370
https://video.sirv.com/mvsz1vqpyxdh52eogfucnxape5pjnj7b/video/Hero-Desktop-1920x830.mp4/854x370.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1489152,RESOLUTION=1280x554
https://video.sirv.com/mvsz1vqpyxdh52eogfucnxape5pjnj7b/video/Hero-Desktop-1920x830.mp4/1280x554.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=3346560,RESOLUTION=1920x830
https://video.sirv.com/mvsz1vqpyxdh52eogfucnxape5pjnj7b/video/Hero-Desktop-1920x830.mp4/1920x830.m3u8`;

        const encoder = new TextEncoder();
        const type = 'application/x-mpegURL';
        const src = URL.createObjectURL(new Blob([encoder.encode(master)], { type }));

        const player = window.videojs(document.querySelector('video'), {
            controls: true,
            html5: {
                nativeAudioTracks: false,
                nativeTextTracks: false,
                nativeVideoTracks: false,
                vhs: { overrideNative: true, bandwidth: 9700000 }
            },
            loop: true,
            preload: 'auto'
        });
        player.src({ src, type });

        const qualityLevels = player.qualityLevels();
        qualityLevels.on('addqualitylevel', () => {
            qualityLevels.levels_.forEach(l => {
                l.enabled = l.width === 1920;
            });
        });
    </script>
</body>
</html>

Question:
How to avoid low quality stream loading?
Bug:
First part of high quality stream does not show in loop. We just see low quality stream each loop.

macOS m3
chrome, safari, firefox