HTML5视频不会加载视频的前1-2秒 [英] HTML5 video doesn't load the first 1-2 seconds of video

问题描述

我的网站上的< video> 标签中有一个带有.mp4源的视频.

I have a video in a <video> tag on my site with an .mp4 source.

在桌面firefox上，它运行良好.但是，如果使用Chrome浏览器，如果我尝试将视频倒带到开头，则它从2秒左右的视频开始.

On desktop firefox, it works well. But with Chrome, if I try to rewind the video to the beginning, it starts from ~2 seconds of video.

在移动设备上，尝试使用Firefox和chrome浏览器，不会加载视频的前2秒钟.

On mobile devices, doesn't load the first ~2 seconds of the video, tried with firefox and chrome.

任何人都知道这是怎么回事?

Anybody has some idea what's wrong with it?

谢谢

推荐答案

原因:

您的问题是< video> 元素 width 属性与视频长度之间的关系.由于您的视频只有10秒，因此< video> 元素中的滚动条无法跳转到确切的开头，因为某些浏览器会根据< video>元素的 width 和视频长度不正确.

Your problem is the <video> element width propery versus the length of your video. Since your video is only 10 seconds, the scrollbar in the <video> element cannot jump to the exact beginning, since some browsers segment the scrollbar according to the ratio between the <video> element's width and the length of the video incorrectly.

可能的解决方案:

添加Java脚本将影片倒回第0秒.您可以使用 onseeked 事件，检查用户是否尝试搜索电影的开头，然后将视频的当前时间设置为0-确切的开始.

Add Javascript to rewind the movie to the 0'th second. You can use the onseeked event and check if the user tried seeking to the beginning of the movie, and then set the video's current time to 0 - which is the exact beginning.

示例:

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

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

这篇关于HTML5视频不会加载视频的前1-2秒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！