Question

我正在使用流动播放器呈现实时视频。点击按钮，我想动态地将src（视频网址）更改为其他网址。这需要在大多数移动设备（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但似乎没有任何工作。任何正确方向的推动都将非常感激。感谢。

Answer 1

您可以使用setAttribute()。

document.getElementById('video').setAttribute("src", "//mydomain.com/othervideo.mp4");
document.getElementById('video').load();
document.getElementById('video').play();

详细了解https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute

Answer 2

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

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

然后点击按钮，执行：

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

如何动态更改html5视频源？

2 个答案: