如何动态更改html5视频源？答案

【问题标题】：How to dynamically change html5 video source?如何动态更改html5视频源？
【发布时间】：2016-10-28 20:07:25
【问题描述】：

我正在使用 flowplayer 来渲染实时视频。单击按钮时，我想将 src（视频 url）动态更改为不同的 url。这需要在大多数移动设备（ios 和 Android）上运行良好。我已经尝试了该线程中的几乎所有答案，但似乎在所有设备上都无法正常工作 - changing source on html5 video tag。

antonioj1015 的回答有效，只是我没有在播放器上看到默认的播放/暂停按钮。

这是我的 flowplayer 容器 div 的样子 -

<div id="player" class="flowplayer">
    <video id="video"><source id="video_src" src="//mydomain.com/video.mp4" type="video/mp4">
    </video>
</div>

Javascript 代码如下所示 -

document.getElementById('player').innerHTML = '<video id="video"><source src="'+newurl+'" type="video/mp4"></video>';
document.getElementById('video').load();
document.getElementById('video').play();

我已尝试替换整个视频标签。此外，尝试动态更改 src 但似乎没有任何效果。任何朝着正确方向的推动将不胜感激。谢谢。

【问题讨论】：

标签： javascript html5-video flowplayer

【解决方案1】：

您可以在开头将flowplayer api设置为全局变量

var myApi;
flowplayer(function (api, root) { myApi = api; });

然后点击按钮，执行：

    $("#yourbutton").on("click", function () {
       myApi.load({
       sources: [{ type: "video/mp4",
                   src:  newurl  }]
      });
   });

【讨论】：

【解决方案2】：

您可以使用src 属性。

document.getElementById('video').src = 'https://example.com/othervideo.mp4';
document.getElementById('video').load();
document.getElementById('video').play();

【讨论】：

谢谢范进！我尝试使用 setAttribute()，但它似乎不适用于移动设备。

【解决方案3】：

let source = document.querySelector('video > source')
source.src = '[the-new-url]'
source.parentNode.load()

【讨论】：