HTML5 视频不加载视频的前 1-2 秒

Question

我的网站上有一个带有 <video> 标记的视频，其源代码为 .mp4。

在桌面火狐上，它运行良好。 但是对于 Chrome，如果我尝试将视频倒回到开头，它会从大约 2 秒的视频开始。

在移动设备上，不加载视频的前 2 秒，尝试使用 firefox 和 chrome。

有人知道它有什么问题吗？

谢谢

Answer 1

原因：

您的问题是 <video> 元素 width 属性与视频长度的关系。由于您的视频只有 10 秒，<video> 元素中的滚动条无法跳转到确切的开头，因为某些浏览器根据<video> 元素的width 与视频长度之间的比率对滚动条进行了错误的分段。

可能的解决方案：

添加 Javascript 以将电影倒退到第 0 秒。您可以使用onseeked 事件并检查用户是否尝试寻找电影的开头，然后将视频的当前时间设置为 0 - 即准确的开头。

例子：

 var video = document.getElementById("myVideo");

 video.onseeked = function() {
    if (video.currentTime <= 2)
        video.currentTime = 0;
 };