HTML 5视频：播放多个“片段”用JavaScript [英] HTML 5 Video: Playing multiple "clips" with javascript
问题描述
我在使用HTML视频和JavaScript时遇到了问题，因此编写了一些简单的代码进行演示。有一个视频包含所有五秒钟长的三个片段（显然，在现实世界中，它们要长得多）。一次25到30秒，一次55到60秒，最后一次85到90秒。我希望用户能够在每五个第二个剪辑中单击相应的按钮。
I'm having a problem with HTML Video and JavaScript so have written some simple code to demonstrate. There is one video which contains three "clips" all five seconds long (obviously, real-world, they are a lot longer). One at 25 - 30 seconds, one at 55 - 60 seconds and the last at 85 - 90 seconds. I want the user to be able to click the relevant button for each five second clip.
有两个问题：
- Chrome浏览器的currenttimer（）错误似乎并不能让您更改外部视频的开始时间（视频将存储在Azure Blob中）。
- 当您播放第一个剪辑然后尝试播放第二个剪辑时，因为剪辑2的开始时间是在剪辑1的结束时间，由于AddEventListener仍然有效，因此无法播放。有没有办法删除原始的EventListener或将其替换为新的结束时间？
此处使用的代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="width: 700px; height: 400px; margin: auto; text-align: center;">
<video id="video1" width="620" controls>
<source type="video/mp4" src="external video link here" />
Your browser does not support HTML5 video.
</video>
<input type="button" value="Play Clip 1 (25 - 30 seconds" onclick="javascript: showvid(25);" /><br />
<input type="button" value="Play Clip 2 (55 - 60 seconds" onclick="javascript: showvid(55);" /><br />
<input type="button" value="Play Clip 3 (85 - 90 seconds" onclick="javascript: showvid(85);" /><br />
</div>
<script type="text/javascript">
function showvid(timer) {
var myVideo = document.getElementById("video1");
myVideo.currentTime = timer;
myVideo.play();
myVideo.addEventListener("timeupdate", function () {
if (this.currentTime >= (timer + 5)) {
this.pause();
}
});
}
</script>
</body>
</html>
UPDATE 1
我已更改事件监听器检查以仅在当前时间在结束时间的一秒内才暂停视频。因此，如果下一个剪辑距离超过一秒钟，他们的听众将不会在剪辑开始之前停止播放。
I've changed the event listener check to pause the video only if the currenttime is within a second of the end time. SO if the next clip is more than a second away, they listener won't stop the clip before it starts.
仍在研究Chrome问题。
Still looking into the Chrome issue.
推荐答案
我不知道您在说什么Chrome错误，但是对于更简洁的代码，您可能会对
I don't know what Chrome bug you are talking about, but for cleaner code, you might be interested in the #t=start[,end] Media Fragment, which will allow you to set a time range directly as the source of your <video>:
onclick =e=> {
const data = e.target.dataset;
if(!data.start) return;
vid.src = vid.src.split('#')[0] +
'#t=' + data.start + ',' + data.end;
// url.vid#t=start,end
vid.play();
}
<button data-start="5" data-end="10">play [5,10]</button>
<button data-start="35" data-end="40">play [35,40]</button>
<button data-start="00:01:25" data-end="00:01:30">play [00:01:25,00:01:30]</button>
<video id="vid" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" muted></video>
现在，如果您真的希望按照自己的方式行事，那么您将对代码进行一些更改。
Now if you really wish to go the way you were going, then you'll have change your code a bit.
添加一次，仅触发用户事件中的信号灯/更新变量。
Add it once, and only trigger semaphores / update variables from user events.
因此，我们首先在< video> 上添加 timeupdate 事件，然后如果没有发生用户生成的事件，则退出早。否则，我们将检查两个事件侦听器都可以访问的变量（这里称为 next_stop ），无论是否暂停。
So we first add the timeupdate event on our <video>, then if no user generated event did happen, we exit early. Otherwise, we check for a variable that is accessible to both our event listeners (here called next_stop) if we should pause or not.
然后，在按钮事件侦听器中，更新< video> 的 currentTime ，请求它播放并更新 next_stop 。
Then, in the buttons event listeners, we update the <video>'scurrentTime, request it to play and update next_stop.
由于共享，两个事件监听器可以交互 next_stop 变量，但没有更多冲突。
The two event listeners can interact thanks to the shared next_stop variable, but no more conflicts.
let next_stop = Infinity; // a variable shared by both event listeners
// add the event listeners only once
vid.addEventListener('timeupdate', handleTimeupdate, {passive: true});
document.addEventListener('click', handleClick);
function handleTimeupdate(evt) {
// not set? exit early
if(!isFinite(next_stop)) return;
// a single action
if(this.currentTime > next_stop) {
this.pause();
// if you want to disable the range once it's done
// e.g to allow default controls interactions
// next_stop = Infinity;
}
}
function handleClick(evt) {
const times = parseTime(evt.target);
if(!times) return;
// update the video's current time
vid.currentTime = times.start;
// update the shared variable
next_stop = times.end;
// start playing if needed
if(vid.paused) {
vid.play();
}
}
function parseTime(target) {
const data = target.dataset;
if(!data || !data.start) return null;
return {start: +data.start, end: +data.end};
}
<button data-start="5" data-end="10">play [5,10]</button>
<button data-start="35" data-end="40">play [35,40]</button>
<button data-start="85" data-end="90">play [00:01:25,00:01:30]</button>
<video id="vid" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" controls></video>
这篇关于HTML 5视频：播放多个“片段”用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
