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

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

javascript dom video

Javascript 我可以将视频与DOM事件同步吗？,javascript,dom,video,Javascript,Dom,Video,没有什么特别的，例如：我有一个视频[标签中有控件（暂停、播放、转发…）]你会怎么做：当视频在第二个30中时，使div出现，然后在第二个32中使其消失谢谢：）您可以使用window.setTimeout在指定的时间后运行函数。如果用户能够暂停视频，这本身是不够的。为了获得更深入的解决方案，您必须告诉我们有关如何显示视频的更多信息但也许更重要的是，你可能想回到原点，重新思考你真正想要实现的目标。因为在我看来，如果您需要根据视频的时间索引触发DOM操作，那么可能有一种更好的方法来做您真正想要做的

没有什么特别的，例如：

我有一个视频[标签中有控件（暂停、播放、转发…）]你会怎么做：当视频在第二个30中时，使div出现，然后在第二个32中使其消失

谢谢：）

您可以使用

window.setTimeout

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

但也许更重要的是，你可能想回到原点，重新思考你真正想要实现的目标。因为在我看来，如果您需要根据视频的时间索引触发DOM操作，那么可能有一种更好的方法来做您真正想要做的事情，而不涉及到这一点。

如果您使用HTML5

元素，您可以使用

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);

感谢微软的支持

下面是一个工作示例：

<!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>


视频演示
//ontimeupdate事件处理程序
功能更新（e）{
//获取视频元素id，以便检索当前时间。
el=document.getElementById（'myVideo'）；
//在页面中设置当前时间
document.getElementById（'timer'）.innerHTML=el.currentTime；
//如果当前时间在10到15秒之间，则弹出
//第二组
如果（el.currentTime>20&&el.currentTime哪个视频？它是如何显示的？您正在使用的API的RTFM。您在发布问题时应该更具体！！