Add sources dynamically using player.src() method.

[daniel-choi]

It seems we have to add sources in html to make the selector work. When I call myPlayer.src() to load sources dynamically, it doesn't work. Right now, I am just appending source tags using jQuery. Is this a known issue?

[dominic-p]

It's new to me. I haven't experimented with dynamically adding sources before. When you say "it doesn't work" does the menu not appear, are the options wrong, or does the source not switch when you click on it? Could you put together a jsfiddle so I can take a look at it?

[homestar9]

This is some sample code you might use to switch the player source via javascript:

myPlayer.src = ([ { type: "video/mp4", src: "video_720.mp4", "data-res": "720" }, { type: "video/mp4", src: "video_320.mp4", "data-res": "360" } ]);

The player indeed does switch sources and plays the first element in the array. However, the plugin seems to ignore the newly passed source array so if you switch resolutions (say to 360) it will play whatever the old source was that had "data-res" value of 360.

Does anyone know of a workaround for this so all "data-res" sources can be updated?

[homestar9]

When examining the plugin source I came across this function (~line 129):

 // Create a menu item for each available resolution
 _V_.ResolutionSelector.prototype.createItems

After you update the player src() if there was a way to run this function again, it might refresh all of the available resolutions. Unfortunately I can't seem to find any way to call it again.

Perhaps another approach would be to re-initialize the plugin every time you change the source but so far I haven't had much luck with that either.

[dominic-p]

Looking through the code again, the plugin would need a decent refactor to work with dynamically changing sources. The entire first part of the main plugin function would need to be abstracted into a method that can be called any time sources change. It looks doable, but I don't have the time right now to commit to it. Pull requests are welcome. :)

Or, if someone wanted to put together a jsFiddle, that would help too. If you want to take a stab at it, the gist of what you want to do is to move this section of code into a separate function. Then, this section would also need to be a separate function which gets called (along with the first new function) any time the new sources are passed, but not when the plugin itself changes the source (tricky).

[homestar9]

Thanks Dominic, I agree that if we wanted to implement this feature that those sections of code would need to be targeted and tweaked a bit.

I thought about the approach for a bit and what "Changing video files" really meant in terms of user playback. Realistically when someone wants to watch a different set of videos (like in a playlist), the player should essentially start over again from scratch. This becomes especially important when tracking any type of analytics.

I solved the problem by utilizing the dispose() method and then replacing the

I'm a bit swamped today but if anyone is interested I can put together a little jsFiddle of how I worked around the issue.

TLDR: Run dispose() and then replace the video html with new html and re-initialize the player.

[dominic-p]

That sounds like a good solution to me. The only issue I can see would be interoperability with other video.js plugins. I don't know, but I'm guessing there are playlist plugins out there that simply call player.src() to change videos. That said, if you don't need that functionality, your solution should work perfectly.

[osanwe]

I have to initialize videojs player dynamically and I found the follow solution:

var options = player.options();
options['sources'] = [
    { type: '...', src: '...', 'data-res': '...' },
    { type: '...', src: '...', 'data-res': '...' }
];
player.options(options);
player.resolutionSelector({ default_res: '...' });

I do not know why, but player.src(...) does not change player options and this plugin cannot read new sources.

[Spoowy]

Has there been some progress done concerning adding sources dynamically?

[dominic-p]

Unfortunately, no. This project is very much on the back burner right now. Eventually, I plan to update it to work with the current version of Video.js and maybe work on some of the outstanding issues like this one. But, as of now I just don't have the time. Sorry about that.