循环播放时出现 HTML 5 视频口吃答案

【问题标题】：Stuttering HTML 5 video while looping循环播放时出现 HTML 5 视频口吃
【发布时间】：2016-05-21 16:00:29
【问题描述】：

使用媒体播放器播放时，视频会无缝循环播放。卡顿的不是视频文件。我不能为我的生活找到解决方案。

我在这里设置了一个 jsfiddle：

https://jsfiddle.net/Dillybob/to30r7rv/4/

（请稍等片刻，我使用的是免费托管帐户）

 <video id="video1" width="1280" height="973" autoplay="true" loop="true">
   <source src="http://dillybob.byethost14.com/background.webm" type="video/mp4">
 </video>

问题：

视频长约 17 秒。等到 16 秒过去，然后盯着视频看，在开始下一个循环之前，您会注意到 100-300 毫秒的微小“冻结”。

编辑：我在Firefox 上对此进行了测试，它做同样的事情，但冻结时间不长。我还测试了我的视频的质量非常低的.webm 版本（大小约为 2MB），冻结时间似乎更短......但你仍然可以注意到它。我在想这是一个视频文件大小问题，可能会循环播放？

【问题讨论】：

测试文件是使用 VP9 编码的，我无法观看。我的 VLC 和 avplay 版本不支持它。这只是一个疯狂的猜测，但您是否尝试过将其转换为 h264 或 VP8？
@SvetlinMladenov 是的，我也尝试过 H264 mp4。这是一个 vp8 编码的：jsfiddle.net/Dillybob/to30r7rv/5 冻结仍然存在，并且在 VLC 中工作，所以你可以看到无缝。

标签： html google-chrome html5-video

【解决方案1】：

你的工作代码在这里：

<video id="video1" width="1280" height="973" controls autoplay loop>
<source src="http://dillybob.byethost14.com/background.webm" type="video/webm">
</video>

你的错误是：

视频类型错误
循环本身是布尔值，所以它应该只在 XHTML 中显式定义，因为属性最小化是被禁止的

干杯:)

【讨论】：