Chrome 无法在重复标签上播放 html5 视频

Posted

技术标签:

【中文标题】Chrome 无法在重复标签上播放 html5 视频【英文标题】:Chrome not play html5 video on duplicated tags 【发布时间】:2013-10-22 22:36:21 【问题描述】:

在我的页面上,我有两个具有相同视频源的视频标签。 示例:

<video id="video_description_html5_api" class="vjs-tech" poster="poster.jpg" preload="metadata">
<source src="video.mp4.ogv" type="video/ogg">
<source src="video.mp4.mp4" type="video/mp4">
<source src="video.mp4.webm" type="video/webm">
</video>

<video id="video_preview" class="vjs-tech" poster="poster.jpg" preload="metadata">
<source src="video.mp4.ogv" type="video/ogg">
<source src="video.mp4.mp4" type="video/mp4">
<source src="video.mp4.webm" type="video/webm">
</video>

当我开始在 Google Chrome 中播放其中一个视频,然后尝试播放第二个视频时 - 最后一个没有加载。 此错误/功能仅在 chrome 中。 firefox 可以同时正确播放两个视频。

知道如何强制播放第二个视频吗?

【问题讨论】:

我没有方便测试的东西,但尝试将 ?1 添加到视频 URL:&lt;source src="video.mp4.ogv?1" type="video/ogg"&gt; &lt;source src="video.mp4.mp4?1" type="video/mp4"&gt; &lt;source src="video.mp4.webm?1" type="video/webm"&gt; 缺点是视频必须加载两次,所以这不是理想...我假设chrome存在一个错误,使其无法在同一页面上播放相同的源两次,顺便说一句。我没有发现您的代码有任何问题。 酷.. 它对我有用。坦克你。 太棒了!请记住,chrome 将使用此方法将视频文件两次加载到内存中,并从服务器加载两次。但是,在 Chrome 修复此错误之前,我不确定是否有好的替代方案。 也许有两个预加载会导致问题?您是否尝试过移除第二个预加载? 我尝试删除两个视频标签的所有预加载。第一次加载时第二次无法启动预加载。但是当第一次播放完视频时,第二个可以加载和播放。 【参考方案1】:

(评论者@Hamza Kubba 提出了原始发布者报告的答案为他们解决了问题,但它在 cmets 中。在此处复制/粘贴作为答案,它所属的位置。)

...尝试将 ?1 添加到视频 URL:&lt;source src="video.mp4.ogv?1" type="video/ogg"&gt; &lt;source src="video.mp4.mp4?1" type="video/mp4"&gt; &lt;source src="video.mp4.webm?1" type="video/webm"&gt; 缺点是视频必须加载两次,所以这并不理想...我假设 chrome 保留存在错误顺便说一句,它在同一页面上播放相同的源两次。我没有发现您的代码有任何问题。

...请记住,chrome 将使用此方法将视频文件两次加载到内存中,并从服务器加载两次。但是,在 Chrome 修复此错误之前,我不确定是否有好的替代方案。

【讨论】:

以上是关于Chrome 无法在重复标签上播放 html5 视频的主要内容,如果未能解决你的问题,请参考以下文章

html5 视频无法在 chrome 上加载 - 有时

.mp4 文件无法在 chrome 中播放

HTML5 视频不会在 Android 设备上循环播放

HTML5 VIDEO 标签不播放音频/静音

HTML5 - mp4 视频无法在 IE9 中播放

[JavaScript] html5 video标签注意事项