Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
145
rated 0 times [  149] [ 4]  / answers: 1 / hits: 24033  / 9 Years ago, wed, december 23, 2015, 12:00:00

I'm looking to change the video source of my VideoJS player dynamically. I tried one method of changing the source directly via the DOM and it did change it, but the player needs to reload. So looking at the official API here: http://docs.videojs.com/docs/api/player.html#Methodssrc



There's a method to change the source but when running the following code, it throws an error.





    var source = dropdown.options[dropdown.selectedIndex].value;

var myVideo = videojs.getPlayers();
console.log(myVideo);
if (source == Source2){
myVideo.src([
{type: application/x-mpegURL, src: http://mycdn/playlist.m3u8},
{type: rtmp/mp4, src: rtmp://mycdn}
]);
}





Although the console does verify that myVideo is an object, calling the .src(source) function throws TypeError: myVideo.src is not a function. (In 'myVideo.src', 'myVideo.src' is undefined)



I've also found tutorials like this where the apparent more official way is to dispose of the player completely and reinitialize with new sources, but I can't seem to understand what he's doing. https://ineed.coffee/3201/how-to-dynamically-change-video-js-videos-and-captions-with-javascript/



Any help would be appreciated.






Solution:
For testing purposes I just have a nice little drop down and added a click event to that, so it changes the channel to whatever the user wants.



var dropdown = document.getElementById('sel1');
var source = dropdown.options[dropdown.selectedIndex].value;

dropdown.addEventListener(click, function(){
source = dropdown.options[dropdown.selectedIndex].value;
console.log(source)

var myVideo = videojs('my-video');
console.log(myVideo);
if (source == Public Access){
myVideo.src([
{type: application/x-mpegURL, src: http://mycdns/playlist.m3u8},
{type: rtmp/mp4, src: rtmp://mycdn}
]);
}
else if (source == Government){
myVideo.src([
{type: application/x-mpegURL, src: http://mycdn/playlist.m3u8},
{type: rtmp/mp4, src: rtmp://mycdn}
]);
}
else if (source == Regional){
myVideo.src([
{type: application/x-mpegURL, src: http://mycdn/playlist.m3u8},
{type: rtmp/mp4, src: rtmp://mysource}
]);
}
});

More From » streaming

 Answers
49

getPlayers() returns an object containing all players, not a player.



You'd normally get a particular player with videojs('my_player_id').


[#63966] Monday, December 21, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lucianod

Total Points: 667
Total Questions: 106
Total Answers: 92

Location: Jordan
Member since Thu, Aug 5, 2021
3 Years ago
;