如何动态更改HTML5视频源？

Question

我正在使用flowplayer渲染实时视频。在按钮点击时，我想动态更改src（视频url）为另一个url。这需要在大多数移动设备上（iOS和Android）良好地工作。我尝试了此线程中几乎所有的答案，但似乎没有一种方法能够在所有设备上都良好地工作-更改html5 video标签上的源。 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但似乎没有起作用。任何朝着正确方向的推进都将不胜感激。谢谢。

- imhere

Answer 1

你可以使用 src 属性。

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

阅读更多关于https://www.w3schools.com/tags/av_prop_src.asp的内容

- Fan Jin

---

谢谢Fan Jin！我尝试使用setAttribute()，但在移动设备上似乎不起作用。 - imhere

Answer 2

你可以在开始时将flowplayer api设置为全局变量。

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

然后在您的按钮点击事件中，执行以下操作：

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

- Bee

Answer 3

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

- bArraxas