以不同的时间和功能循环播放视频 [英] Play video in loop with different timing and function

问题描述

我有2个功能，可播放相同的视频，但时序不同. 我不能播放使该功能正常工作.

I have 2 function which play the same video but with different timing. I can't play make the function to work properly.

该功能似乎没有重置其他功能

Looks like the function doesn't reset the other function

我尝试更改变量名称，但仍然更改了点击时间.

I tried to change variables names but still change the timing on click.

var video = document.getElementById('videoElm');

function playShortVideo() {
  var starttime = 0; // start at 0 seconds
  var endtime = 2; // stop at 2 seconds
  video.addEventListener("timeupdate", function() {
    if (this.currentTime >= endtime) {
      this.currentTime = 0; // change time index here
    }
  }, false);

  video.load();
  video.play();
}

function playFullVideo() {
var starttime = 0; // start at 0 seconds
var endtime = 24; // stop at 2 seconds
  video.addEventListener("timeupdate", function() {
    if (this.currentTime >= endtime) {
      this.currentTime = 0; // change time index here
    }
  }, false);

  video.load();
  video.play();
}

//play short video by default
playShortVideo();


//CLICK events 
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
  
  playShortVideo();
});

btnfull.click(function() {
  playFullVideo();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <video id="videoElm" autoplay muted controls loop>
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
 
</div>

<button class="shortvideo">play 2 secs only</a><br>

<button class="fullvideo">loop full video</button>

推荐答案

这是因为侦听器仍在，您需要

That's because the listener is still there, you need to remove it.

请记住，为了删除它，您不能使用匿名函数作为回调，所以我将其变成了已定义的函数.

Remember, in order to remove it, you can't use anonymous function as callback so I turned it into defined function.

var video = document.getElementById('videoElm');
const playShort = function() {
  if (this.currentTime >= 2) {
    this.currentTime = 0; // change time index here
  }
};
const playFull = function() {
  if (this.currentTime >= 24) {
    this.currentTime = 0; // change time index here
  }
};

function playShortVideo() {
  video.removeEventListener("timeupdate", playFull, false)
  video.addEventListener("timeupdate", playShort, false);

  video.load();
  video.play();
}

function playFullVideo() {
  video.removeEventListener("timeupdate", playShort, false)
  video.addEventListener("timeupdate", playFull, false);
  
  video.load();
  video.play();
}

//play short video by default
playShortVideo();


//CLICK events 
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {

  playShortVideo();
});

btnfull.click(function() {
  playFullVideo();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <video id="videoElm" autoplay muted controls loop>
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>

</div>

<button class="shortvideo">play 2 secs only</a><br>

<button class="fullvideo">loop full video</button>

这是在49秒(60> 49 + 10)开始播放视频的方法

And here is the approach for starting the video at 49 sec (60 > 49 + 10)

const shortStartTime = 49;
const shortDuration = 10;

var video = document.getElementById('videoElm');
const playShort = function() {
  if (this.currentTime > (shortStartTime + shortDuration)) {
    this.currentTime = shortStartTime; // change time index here
  }
};
const playFull = function() {
  if (this.currentTime >= 24) {
    this.currentTime = 0; // change time index here
  }
};

function playShortVideo() {
  video.removeEventListener("timeupdate", playFull, false)
  video.addEventListener("timeupdate", playShort, false);

  video.load();
  video.currentTime = shortStartTime;
  video.play();
}

function playFullVideo() {
  video.removeEventListener("timeupdate", playShort, false)
  video.addEventListener("timeupdate", playFull, false);
  
  video.load();
  video.play();
}

//play short video by default
playShortVideo();


//CLICK events 
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
  playShortVideo();
});

btnfull.click(function() {
  playFullVideo();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <video id="videoElm" autoplay muted controls loop>
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>

</div>

<button class="shortvideo">play 2 secs only</a><br>

<button class="fullvideo">loop full video</button>

这篇关于以不同的时间和功能循环播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！