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. (In 'myVideo.src', 'myVideo.src' is undefined)"

我也发现了这样的教程，其中明显更多 "official" 的方法是完全处理播放器并使用新源重新初始化，但我似乎无法理解他在做什么。 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() returns 包含所有玩家的对象，而不是玩家。

您通常会获得具有 videojs('my_player_id') 的特定播放器。

Answer 2

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

我有一个函数可以创建一个新玩家，其 ID 与之前玩家的 ID 不同（出于某种原因，您无法实例化具有相同 ID 的玩家，即使它已被处置） .

完整流程如下：

为您的播放器创建一个父元素。
```
    <div id="player-parent"></div>
```

创建一个函数，负责生成一个初始播放器元素，您将在该元素上调用 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>");
}

Select 你的父元素
```
$('#player-parent').append(getPlayerInstance(++playerCounter, someSourceHere));
```
1. 实例化您的播放器，处理您可能拥有的任何旧播放器。

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

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

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

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

VideoJS-动态更改源

VideoJS-Dynamically Change Sources

javascript

streaming

http-live-streaming

video.js