Question

没什么特别的，例如：

我有一个视频[有标签中的控件（暂停，播放，转发...）]你会怎样做：当视频在第二个30中时，显示一个div，然后在第二个32中，让它消失。

谢谢：）

Answer 1

您可以使用window.setTimeout在指定的时间后运行一个函数。如果用户能够暂停视频，则这本身是不够的。您必须告诉我们有关您如何显示视频的更多信息，以便获得更深入的解决方案。

但也许更重要的是，你可能想回到原点，再想想你真正想要完成的事情。因为在我看来，如果您需要根据视频的时间索引触发DOM操作，那么可能有更好的方法来执行您真正想要的不涉及的内容。

Answer 2

如果您使用的是HTML5 <video>元素，则可以使用ontimeupdate事件来跟踪播放的位置，如下例所示：

//  display the current and remaining times
video.addEventListener("timeupdate", function () {
  //  Current time  
  var vTime = video.currentTime;
  document.getElementById("curTime").textContent = vTime.toFixed(1);
  document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);

感谢Microsoft的reference

这是一个有效的例子：

<!DOCTYPE html>
<html>
<head>
    <title>Video demo</title>
    <script>
        // ontimeupdate event handler
        function update(e) {
            // get the video element id so that we can retrieve the current time.
            el = document.getElementById('myVideo');

            // set the current time in the page
            document.getElementById('timer').innerHTML = el.currentTime;

            // If the current time is between 10 and 15 seconds pop-up the
            // second div
            if (el.currentTime > 20 && el.currentTime <=25) {
                document.getElementById('popup').style.display='block';
            } else {
                document.getElementById('popup').style.display='none';
            }

        }

    </script>
    <style>
        video {width:300px;}
    </style>
</head>
<body>

<video id=myVideo ontimeupdate="update()" src="http://archive.org/download/HardDriveSpinning/HardDriveWebm.webm" autoplay>Sorry - format unsupported</video>
<div id="timer"></div>
<div id="popup" style="display:none">Boo!</div>
</body>
</html>

在this fiddle上查看（适用于Firefox和Chrome.IE不喜欢WebM视频格式）

我可以将视频与DOM事件同步吗？

2 个答案: