Video.js 更改源，但不显示新源

Question

抱歉我对这个话题缺乏了解

我有一个脚本可以更改视频播放器的来源。它就是这样做的。唯一的问题是 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;

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

事实证明它改变了来源，我检查了 Chrome Dev 工具，当然它改变了来源

我该如何解决？

Answer 1

您可以尝试如下，

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')" />

Answer 2

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

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