Question

提前感谢您提供的任何帮助。我遇到的问题是，当单击一个按钮时，以下代码在javascript函数中。所需的行为是，在按钮点击时，视频淡入，播放10秒，然后淡出。然后，再次单击该按钮时，将重复此行为。

问题是，第二次点击按钮时，视频会淡入但已经在视频结尾，然后在10秒后淡出。知道为什么vid.currentTime没有正确重置视频吗？

var webm = document.getElementById('src');
webm.src = "src.webm";
var vid = document.getElementById('video');
vid.currentTime = 0;
vid.play();


vid.fadeToggle(1000);
setTimeout(function() {
    vid.fadeToggle(1000);
}, 10000);

这是导入视频文件的地方

<video id="video" width="100%" Style="Display:none">
    <source id="src" src="src.webm" type="video/webm" />
</video>

其他信息已经曝光。这只发生在Chrome中，即使在Chrome本地打开时也不会发生，只有当html页面通过快递静态提供时才会发生。

Answer 1

尝试

vid.load();代替vid.currentTime = 0;

Answer 2

也许你可以尝试在视频属性中添加自动播放功能，但我认为视频会开始循环播放。

<video id="video" width="100%" Style="Display:none" autoplay>

或者您可以将此功能或javascript行添加到按钮功能。

vid.load();

来源：http://www.w3schools.com/tags/av_met_load.asp

Answer 3

想出这只是chrome中的一个问题，似乎与这个问题有关：

can't seek html5 video or audio in chrome

HTML5视频无法重新启动

3 个答案: