Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

player.currentSources() - When the video is playing, missing all the sources when the first source is not an absolute URL #8712

Open
Tracked by #4439
unixfox opened this issue Apr 28, 2024 · 5 comments
Labels
needs: discussion Needs a broader discussion needs: triage This issue needs to be reviewed

Comments

@unixfox
Copy link

unixfox commented Apr 28, 2024

Description

Hello,

When you declare multiple sources inside the <video> HTML element and the first source do not have an absolute URL, then you can't get all the other sources using player.currentSources() when the video is playing.

This bug exists since video.js 8.0.0, and I can't replicate it on video.js 7.21.5. I think this is a regression from video.js 7 to video.js 8.

HTML demo URLs:

GitHub repository source files: https://github.com/unixfox/videojs-currentsources-issue

Due to this bug, silvermine/videojs-quality-selector does not work without absolute URLs: silvermine/videojs-quality-selector#107

Thank you for taking a look at this bug.

Reduced test case

https://unixfox.github.io/videojs-currentsources-issue/videojs8.html

Steps to reproduce

  1. Create an HTML test file with two working video files named source1.mp4 and source2.mp4 (can use https://sample-videos.com/ for demo videos)
</head> <body> <video id="vjs-video" class="video-js vjs-default-skin" width="640" height="360" controls> <source src=https://github.com/videojs/video.js/issues/"/source1.mp4" type="video/mp4" /> <source src=https://github.com/videojs/video.js/issues/"/source2.mp4" type="video/mp4" /> </video> <script> var player = videojs('vjs-video'); player.one('playing', function () { console.log(player.currentSources()); }); </script> </body>">
<head>
    <link href="https://vjs.zencdn.net/8.13.0/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/8.13.0/video.min.js"></script>
</head>

<body>
    <video id="vjs-video" class="video-js vjs-default-skin" width="640" height="360" controls>
        <source src="/source1.mp4" type="video/mp4" />
        <source src="/source2.mp4" type="video/mp4" />
    </video>

    <script>
        var player = videojs('vjs-video');
        player.one('playing', function () {
            console.log(player.currentSources());
        });
    </script>

</body>
  1. Start a local webserver with python -m http.server 8888.

  2. Open the HTML page with your browser (http://localhost:8888) and open the browser console from devtools.

  3. Check the console and see that in the logs, source2.mp4 is missing from the listed sources. Only source1.mp4 is here.
    image

  4. Edit the HTML page and add the absolute URL to the first source. And see that now all the sources are listed.

    <source src="http://localhost:8888/source1.mp4" type="video/mp4" />
    <source src="/source2.mp4" type="video/mp4" />

    image

Errors

No response

What version of Video.js are you using?

8.13.0

Video.js plugins used.

No response

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

Chrome 124.0.6367.78 and Firefox 125.0.2

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

ArchLinux

@unixfox unixfox added the needs: triage This issue needs to be reviewed label Apr 28, 2024
Copy link

welcome bot commented Apr 28, 2024

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

@mister-ben
Copy link
Contributor

The difference is that the video el sourceset event is handled by default in v8, when the sources cache is updated here the absolute URL from the sourceset event is compared to the source els. If the test here used getAbsoluteURL(sourceObj.src) === getAbsoluteURL(src) (from /src/js/utils.js) currentSources() would be as before - but that causes tests in /test/unit/sourceset.test.js to fail.

@unixfox
Copy link
Author

unixfox commented Apr 30, 2024

@mister-ben Sorry I'm not that familiar with how the inner of video.js works, but does this mean it's considered a valid regression compared to video.js 7? Or is it considered as a bug?
Right now https://github.com/silvermine/videojs-quality-selector doesn't work due to this issue because it thinks that currentSources() will always give all the existing source URLs, not in a case of absolute URLs or not.

@mister-ben mister-ben added needs: discussion Needs a broader discussion labels May 29, 2024
@mister-ben
Copy link
Contributor

mister-ben commented Jun 21, 2024

@unixfox there's quite a bit to unpick here. You could disable the sourceset behaviour by using enableSourceset: false in the player options. Hopefully that can unblock you.

@unixfox
Copy link
Author

unixfox commented Jul 13, 2024

Sorry for the late reply. Thank you @mister-ben, setting enableSourceset indeed fixes the issue: https://unixfox.github.io/videojs-currentsources-issue/videojs8-enableSourceset-false.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: discussion Needs a broader discussion needs: triage This issue needs to be reviewed
Projects
None yet
Development

No branches or pull requests

2 participants