以不同的时间和功能循环播放视频答案

【问题标题】：Play video in loop with different timing and function以不同的时间和功能循环播放视频
【发布时间】：2019-05-16 11:17:28
【问题描述】：

我有 2 个功能可以播放相同的视频，但时间不同。我不能玩，使功能正常工作。

该函数似乎没有重置其他函数

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

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>

【问题讨论】：

标签： javascript jquery html video

【解决方案1】：

那是因为监听器还在，你需要remove它。

记住，为了删除它，你不能使用匿名函数作为回调，所以我把它变成了定义函数。

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) 开始视频的方法

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>

【讨论】：

当然 :) 很高兴为您提供帮助.. @user173420 如果它回答了您的问题，请accept 它可能对其他人有所帮助
你会怎么做才能不让他们跳？
“跳跃”是什么意思？
你知道为什么给我 Uncaught (in promise) DOMException 吗？ videoClient.play() 错误； ?
我需要一些上下文。（设备，浏览器）我在我的 mac/Chrome（桌面）上没有收到此错误。我看到您确实将muted 添加到video 标记中，但也许您在应用程序中忘记了它？ stackoverflow.com/a/50742427/863110

【解决方案2】：

发生这种情况是因为您多次附加 timeUpdate 事件侦听器。您要么需要使用一个，要么在附加新的之前将其删除。

var video = document.getElementById('videoElm');
var listener;
var starttime = 0;
var endtime = 2;

function updateVideo(e) {
  if (e.target.currentTime >= endtime) {
    e.target.currentTime = 0; // change time index here
  }
}

function playShortVideo() {
  starttime = 0; // start at 0 seconds
  endtime = 2; // stop at 2 seconds
  if (!listener) {
    listener = video.addEventListener("timeupdate", updateVideo, false);
  }
  video.load();
  video.play();
}

function playFullVideo() {
  starttime = 0; // start at 0 seconds
  endtime = 24; // stop at 2 seconds
  if (!listener) {
    listener = video.addEventListener("timeupdate", updateVideo, 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>

【讨论】：