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不是一个函数。（在'myVideo.src'中，'myVideo.serc'未定义）"

我还发现了这样的教程，其中明显更"官方"的方法是完全处理玩家，并用新的来源重新初始化，但我似乎不明白他在做什么。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

我的方法是使用建议的播放器对象的dispose方法。

我有一个函数，可以创建一个ID与前一个玩家的ID不同的新玩家（由于某种原因，即使在处理完ID后，你也无法实例化具有相同ID的玩家）。

整个过程如下：

1. 为玩家创建一个父元素。

       <div id="player-parent"></div>
   

2. 创建一个函数，负责生成一个初始播放器元素，在该元素上调用videojs构造函数。

   function getPlayerInstance(curPlayerNumber, playerSource) {
       // curPlayerNumber is simply a counter number which must be different from any previous one passed to this function
       return $("<video id="video " + curPlayerNumber + "" class="video-js vjs-default-skin" controls data-setup='{"plugins" : { "resolutionSelector" : { "default_res" : "360" } } }'><source src="" + playerSource + "" type="application/x-mpegURL" data-res="360"></video>");
   }
   

3. 选择您的父元素

   $('#player-parent').append(getPlayerInstance(++playerCounter, someSourceHere));
   

   4. 实例化你的玩家，处理你可能拥有的任何旧玩家

这是伪代码，为了简单起见，我将播放器分配给一个全局变量以便于访问。你应该采取不同的做法。

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

希望这有帮助，我在这上面浪费了3天时间。