Setting multiple sources programatically doesn't seem to work with "retryOnError", but works with literal <source/> tags

[jcihocki]

Description

When setting multiple sources using:

       player.src([
         {src: `${src}?hls=true`, type: "application/x-mpegURL"},
         {src: `${src}`, type: "video/mp4" }
       ]);

videojs seems to ignore data-setup='{"sourceOrder": true, "retryOnError": true}' options. The same two sources set via <source/> tags work as expected with those options.

Test case: https://d3j2hb1k24pksp.cloudfront.net/test.html

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Set two sources via player.src([source1, source2]) method
2. As the first source, use type application/x-mpegURL and a URL that will 404
3. As the second source, use type video/mp4 with a URL that returns valid mp4 content.

Results

Expected

Expect videojs to play the second source video (mp4) after being unable to load the HLS playlist.

Actual

No video plays, loading spinner shows, based on console errors it seems videojs ignores second source provided.

Error output

VIDEOJS: WARN: Problem encountered with playlist 0-https://d3j2hb1k24pksp.cloudfront.net/1.mp4?hlss=true. Trying again since it is the only playlist.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

7.18.1

browsers

firefox, chrome

OSes

mac os

plugins

n/a

[welcome]

👋 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.

[video-archivist-bot]

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:

• for https://d3j2hb1k24pksp.cloudfront.net/1.mp4: say @video-archivist-bot save ZEOqNw

[mister-ben]

Your test page doesn't load but I'll take a guess that you're calling videojs('id') before the player had initialised. This will initialise the player with the options given, i.e. none, whatcever is in the data-setup attribute has no effect. And when you're using the <source> you're not calling videojs('id'), so the player is autosetup with the data-setup options.

[jcihocki]

Whoops the read permission got reset. It loads now.

I'm calling videojs(element) like so, in a way that to me is analogous with the sample code from README. And with <source/> tag, I am calling videojs(element) as well. The only difference in the works/doesnt work cases is how the sources are specified.

<script src="[https://vjs.zencdn.net/7.18.1/video.min.js](view-source:https://vjs.zencdn.net/7.18.1/video.min.js)"></script>
<script>
    const collection = document.getElementsByTagName("video-js");
    for (let i = 0; i < collection.length; i++) {
       let item = collection.item(i);
       let src = item.getAttribute("src"); 
       var player = videojs(item, {sourceOrder: true, retryOnError: true, html5: { vhs: { withCredentials: false }}});
       player.src([
         {src: `${src}?hlss=true`, type: "application/x-mpegURL"},
         {src: `${src}`, type: "video/mp4" }
       ]);
    }
</script>

[gkatsev]

So, the HLS url does return a 200 rather than a 4xx HTTP Status Code. This means that Video.js will still try to load it. Moving it into source elements produces the same results. Retry on error is only set up to switch sources when we get a 4xx status code.

Also, @mister-ben's point about not having a data-setup when you're also trying to initialize videojs manually still applies to your example.

[jcihocki]

ok i think i understand the point about data-setup="", thanks. i'll close out.