VideoJS-动态更改源

Question

我希望动态地改变我的VideoJS播放器的视频源。我尝试了一种通过DOM直接更改源的方法，它确实改变了它，但是播放器需要重新加载。因此，看看这里的官方API：http://docs.videojs.com/docs/api/player.html#Methodssrc

有一个方法可以更改源代码，但是当运行下面的代码时，它会抛出一个错误。

​

    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"}
		]);
	}

​

尽管控制台确实验证了myVideo是一个对象，但是调用.src(源)函数会抛出"TypeError: myVideo.src不是函数“(在'myVideo.src‘中，'myVideo.src’是未定义的)。

我还发现了类似这样的教程，显然更“正式”的方法是完全处理播放器并使用新的源重新初始化，但我似乎不明白他在做什么。https://ineed.coffee/3201/how-to-dynamically-change-video-js-videos-and-captions-with-javascript/

任何帮助都将不胜感激。

解决方案:出于测试目的，我有一个不错的小下拉列表，并在其中添加了一个单击事件，因此它可以将通道更改为用户想要的任何内容。

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"}
    ]);
}
});

Answer 1

getPlayers()返回一个包含所有播放器的对象，而不是一个播放器。

你通常会得到一个特定的球员与videojs('my_player_id')。

Answer 2

我所做的方法是使用player对象的建议的dispose方法。

我有一个函数，它用ID创建一个新播放器，这个ID与前一个播放器的ID不同(由于某种原因，即使在处理完ID之后，也无法实例化具有相同ID的播放器)。

整个过程如下：

1. 为玩家创建一个父元素。
2. 创建一个函数，负责生成初始player元素，您将在该元素上调用视频an构造函数。 函数getPlayerInstance(curPlayerNumber，( playerSource) { // curPlayerNumber是一个计数器号，它必须与传递给此函数的任何计数器号不同:返回$(“<视频id=\”视频\“+ curPlayerNumber +”class=\“视频-js vjs-默认-皮肤\”控制数据-设置=‘{\\“插件\：{\”分辨率选择器\“：{\”default_res\：\“360}}}>)；}
3. 选择父元素 ( $('#player-parent').append(getPlayerInstance(++playerCounter，someSourceHere)；

1. Instantiate your player, disposing any old players you might have.

​

这是伪代码，为了简单起见，我将播放器分配给一个全局变量，以便于访问。你应该换个方式。

    if (window.playerElement) {
        window.playerElement.dispose();
    }

    // the playerCounter variable is different for each function call
    videojs("video" + playerCounter).ready(function(){
        window.playerElement = this;
    });

希望这能帮上忙，我在这上面浪费了三天时间。