我将如何在 jquery 中为 html5 视频制作一个 playTo(） 函数

How would I make a playTo() function in jquery for html5 video

本文关键字：一个 函数 playTo 视频制作 html5 中为 jquery      更新时间：2023-09-26

问题：如何构造我的 playTo（） 函数来获取一个值并播放该值作为视频的时间戳？ 视频将播放，直到点击该时间戳;之后视频将暂停。

.HTML： 

<video src="assets/trailer.mp4" class="video" controls muted>
  Your browser does not support the <code>video</code> element.
</video>
<button class="next-chapter">next chapter</button>

.JS：

var vid = $('.video')[0];
var play = $('.next-chapter');
//this controlls which index of timestamp
var sceneCounter = 0;
//these are the timestampes
var timestamps = [10,20,30,40];
//this function will play the video normally
var playVideo = function() {
  vid.play();
};
//heres what I plan to set the next timestamp
var playTo = function(t){
  //help here!!
  console.log('heyhey');
};
var nextScene = function() {
  sceneCounter++
};
$( play ).click(function() {
  if(sceneCounter !== 0){
    nextScene();  
  }
  playTo(sceneCounter);
});
vid.addEventListener('timeupdate',function(event){
  time = vid.currentTime;
  console.log(time);
},false);

您所需要的只是一个.play()方法和.pause()方法。

var vid = $('.video')[0];
var play = $('.next-chapter');
//this controlls which index of timestamp
var sceneCounter = -1;
//these are the timestampes
var timestamps = [2,4,6,8];
//this function will play the video normally
var playVideo = function() {
  vid.play();
};
//heres what I plan to set the next timestamp
var playTo = function(t){
  //help here!!
    vid.play();
};
var nextScene = function() {
  sceneCounter++;
};
$(play).click(function() {
  if(sceneCounter != timestamps.length-1){
    nextScene();  
    playTo(sceneCounter);
  }
});
vid.addEventListener('timeupdate',function(event){
    if(vid.currentTime >= timestamps[sceneCounter]){
        vid.pause();
    }
},false);
html {padding: 20px 0; background-color: #efefef;}
body {width: 400px; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5);}
video {
    width: 400px; 
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" class="video" controls muted>
  Your browser does not support the <code>video</code> element.
</video>
<button class="next-chapter">next chapter</button>
<!--
<source id="mp4" src="" type="video/mp4">
-->

希望这有帮助。

相关文章：