Question

问题：如何构建我的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);

Answer 1

您只需要一种.play()方法和.pause()方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助。

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

1 个答案: