It shows low quality stream each loop #1547

Mefistosss · 2024-10-24T15:21:30Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

It shows low quality stream each loop #1547

It shows low quality stream each loop #1547

Mefistosss commented Oct 24, 2024 •

edited

Loading

It shows low quality stream each loop #1547

It shows low quality stream each loop #1547

Comments

Mefistosss commented Oct 24, 2024 • edited Loading

Mefistosss commented Oct 24, 2024 •

edited

Loading