【问题标题】：Video.js changing source, but does not show new sourceVideo.js 更改源，但不显示新源
【发布时间】：2016-11-05 23:49:34
【问题描述】：

对不起，我对这个话题缺乏了解

我有一个脚本可以更改视频播放器的来源。它就是这样做的。唯一的问题是 Video.js 播放器播放分配给它的第一个源。

document.getElementById("vid-player_html5_api").innerHTML = "";

document.getElementById("vid-player_html5_api").innerHTML = "<source src='" + link + "' type='video/mp4'>";
document.getElementById("vid-player_html5_api").muted = false;

因此，如果有两个按钮，并且您单击 Button 1，它将更改播放器的来源并显示正确的视频。然后假设您单击了 Button 2，它会更改播放器的来源，但仍会显示与 Button 1 显示的视频相同的视频

事实证明它改变了源代码，我检查了 Chrome 开发工具，果然它改变了源代码

我该如何解决这个问题？

【问题讨论】：

把你所有的代码放到 jsfiddle

标签： javascript video.js

【解决方案1】：

刚刚发现这篇文章目前 VideoJS 中的模式是使用 JSON 对象设置 .src

player.src({ type: 'video/mp4', src: new_url });

【讨论】：

【解决方案2】：

你可以尝试如下，

function playVideo(videoSource, type) {
  var videoElm = document.getElementById('testVideo');
  var videoSourceElm = document.getElementById('testVideoSource'); 
   if (!videoElm.paused) {
        videoElm.pause();
     }
    
   videoSourceElm.src = videoSource;
   videoSourceElm.type = type;
  
    videoElm.load();
    videoElm.play();
  }

<video id="testVideo" width="400" controls>
  <source id="testVideoSource">
</video>
<br/>
<input type="button" value="Play Video 1" onclick="playVideo('http://www.w3schools.com/html/mov_bbb.mp4', 'video/mp4')" />
<input type="button" value="Play Video 2" onclick="playVideo('http://www.w3schools.com/html/mov_bbb.ogg', 'video/ogg')" />

【讨论】：

我认为 .load() 可以解决问题。 .load() 是 jQuery 函数还是内置 Video.js 函数
加载是视频内置功能。上面的jquery我没用过

【解决方案3】：

与我合作的唯一方法就是这样

var player = videojs(document.querySelector('.video-js'));
  player.src({
                src: 'videoURL,
                type: 'video/mp4'/*video type*/
            });

  player.play();

【讨论】：

【解决方案4】：

加载新视频后，您需要再次调用 video.js：

var current_vid = document.getElementById("vid-player_html5_api")
var next_vid = document.createElement('video');

next_vid.innerHTML = '<source src="' + link + '" type="video/mp4">';
next_vid.muted = false;

current_vid.parentNode.replaceChild( next_vid, current_vid );

videojs(current_vid, {}, function(){
  // do something when video.js is ready
});

Video.js: dynamically loaded videos

【讨论】：