Question

有没有办法在html5中播放视频，在视频中的已知点停止并执行javascript？

Answer 1

是的，试试这个。您必须使用currentTime属性。从那开始，从那里开始你的javascript函数。这就是你要找的东西吗？

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

//Add a timeupdate listener
video.addEventListener("timeupdate", function(){
    //Check for video properties from within the function
    if (this.currentTime == 5)
        this.pause();
        //cal javascript
    }
}

Answer 2

查看here上接受的答案，看起来有可能。

要暂停视频，请执行以下操作：

var mediaElement = document.getElementById("video"); // create a reference to your HTML5 video
mediaElement.pause(); // pauses the video

如果您想播放视频，请执行以下操作：

mediaElement.play(); // plays the video

要获取视频中的当前时间，请执行以下操作：

mediaElement.currentTime; // gets the current time

以下是将它们全部联系起来的示例：

var mediaElement = document.getElementById("video");
if(mediaElement.currentTime == 35){
    mediaElement.pause();
    // do whatever else you would like
    mediaElement.play();
}

MDL文档是here，您可能会发现很多其他有用的属性。

希望这有帮助！

Answer 3

是的，你可以这样做。

请注意，您必须查找大于>大于的时间（因为匹配精确毫秒的机会几乎为零），并且有一个变量以某种方式知道哪些变量完了。

＆＃13;

window.addEventListener('load', function() {
  var cur = document.querySelector('#cur'),
      vid = document.querySelector('#vid')
})

var appDone = {"done7":false,"done4":false}

vid.addEventListener('timeupdate', function(e) {
  if (e.target.currentTime > 7 && !appDone.done7) {
    appDone.done7 = true;
    e.target.pause();
    //do something
    cur.textContent += ", " + "done7 once";
    
    e.target.play();
  }
  if (e.target.currentTime > 4 && !appDone.done4) {
    appDone.done4 = true;
    e.target.pause();
    //do something
    cur.textContent += ", " + "done4 once";
    
    e.target.play();      
  }
})

＆＃13;

<video id="vid" width="320" height="176" controls>
  <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p id="cur"></p>

＆＃13;

是否可以在html5视频中嵌入动作？

3 个答案: