javascript - 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(source) 函数会抛出“TypeError: myVideo.src is not a function。(在 'myVideo.src' 中，'myVideo.src' 未定义)” ”

我还发现了这样的教程，其中明显更“官方”的方式是完全处理玩家并使用新资源重新初始化，但我似乎无法理解他在做什么。 https://ineed.coffee/3201/how-to-dynamically-change-video-js-videos-and-captions-with-javascript/

如有任何帮助，我们将不胜感激。

<小时/>

解决方案:出于测试目的，我只是有一个漂亮的小下拉菜单，并为其添加了一个单击事件，因此它将 channel 更改为用户想要的任何内容。

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') 获得特定播放器。