search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
37.75k stars 7.43k forks source link

FMP4 HLS does not run on latest VideoJS 7 (7.21.5) version #8416

Open whatever1211 opened 1 year ago

whatever1211 commented 1 year ago

Description

Hi VideoJS team,

We are using VideoJS with HLS for our product and it has been a great library.

We are planing upgrading to HLS FMP4 for better performance and memory storage. But when we using the HLS FMP4 on latest VideoJS 7 version (7.21.5), the player return an error and can not run the stream.

image

HLS stream - Working: http://cdn-vttvas.s3.cloudstorage.com.vn/video1/2023/08/18/16/7002a157/7002a157-e25e-424f-b996-fe960d23c1a2_m.m3u8 HLS FMP4 stream - Not working: http://cdn-vttvas.s3.cloudstorage.com.vn/video1/2023/08/18/16/7002a157/7002a157-e25e-424f-b996-fe960d23c1a2_6.m3u8

Demo index.html code:

<!DOCTYPE html>
<html>
    <head>
        <link href="https://vjs.zencdn.net/7.21.5/video-js.css" rel="stylesheet" />
    </head>

    <body>
        <video
            id="my-video"
            class="video-js"
            controls
            preload="auto"
            width="1920"
            height="1080"
        >
        </video>

        <script src="https://vjs.zencdn.net/7.21.5/video.min.js"></script>

        <script>
            let player = videojs('my-video');
            // player.src("http://cdn-vttvas.s3.cloudstorage.com.vn/video1/2023/08/18/16/7002a157/7002a157-e25e-424f-b996-fe960d23c1a2_m.m3u8"); // HLS - Working
            player.src("http://cdn-vttvas.s3.cloudstorage.com.vn/video1/2023/08/18/16/7002a157/7002a157-e25e-424f-b996-fe960d23c1a2_6.m3u8"); // HLS FMP4 - Not working
        </script>
    </body>
</html>

The odd thing is when we try a lesser VideoJS version (7.9.7), both HLS and HLS FMP4 stream work.

Can you help giving us a look.

  1. How later VideoJS version (7.10.0 above) can not run HLS FMP4 stream, but lesser version (7.9.7) can?
  2. Is this a VideoJS issue or our HLS FMP4 stream issue? We are open for all suggestion. Note, however we have tried the HLS FMP4 stream using hls.js library version (1.1.5) and player can run the stream.

Reduced test case

http://cdn-vttvas.s3.cloudstorage.com.vn/video1/2023/08/18/16/7002a157/7002a157-e25e-424f-b996-fe960d23c1a2_6.m3u8

Steps to reproduce

  1. Copy and run the index.html code below.

    <!DOCTYPE html>
<html>
<head>
    <link href="https://vjs.zencdn.net/7.21.5/video-js.css" rel="stylesheet" />
</head>

<body>
    <video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="1920"
        height="1080"
    >
    </video>

    <script src="https://vjs.zencdn.net/7.21.5/video.min.js"></script>

    <script>
        let player = videojs('my-video');
        // player.src("http://cdn-vttvas.s3.cloudstorage.com.vn/video1/2023/08/18/16/7002a157/7002a157-e25e-424f-b996-fe960d23c1a2_m.m3u8"); // HLS - Working
        player.src("http://cdn-vttvas.s3.cloudstorage.com.vn/video1/2023/08/18/16/7002a157/7002a157-e25e-424f-b996-fe960d23c1a2_6.m3u8"); // HLS FMP4 - Not working
    </script>
</body>
</html>
  2. Using HLS stream for the player to work.
  3. Using HLS FMP4 stream for player error.

Errors

image

What version of Video.js are you using?

v7.21.5, v7.9.7

Video.js plugins used.

None

What browser(s) including version(s) does this occur with?

Chrome 116.0.5845.97

What OS(es) and version(s) does this occur with?

Windows 10

video-archivist-bot commented 1 year ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

BucherTomas commented 1 year ago

Just my two cents, but I think that the fmp4 stream version is not packaged correctly. Download any first data segment with suffix _0.m4s from any rendition variant and it is just 24 bytes long, the fmp4 header is incomplete (which I believe is the main problem here) and the actual stream data in mdat box is missing. Only the subsequent segments are then generated as they should.

It appears that the data from the first segments are attached to the init segments, which should instead carry just the stream header with encoding specifics for decoder initialization and in fact no stream data should be present there.