javascript - 用于播放和暂停视频的 Javascript 函数
问题描述
我正在尝试通过包含开始时间和结束时间的可点击播放按钮在某些点开始和暂停 html5 视频:
function videostart(id,start,end){
var video = document.getElementsByTagName("video")[0];
video.currentTime = start;
video.play();
video.addEventListener("timeupdate", function() {
if (video.currentTime >= end) {
video.pause();
}}, false);
};
第一次通话效果很好,它从 0 开始播放,在 2:24 结束。
<a href="#" onclick="videostart('1759',0.00,2.24); return false;">PLAY</a>
但是,第二个调用开始播放,然后立即停止:
<a href="#" onclick="videostart('1760',2.25,7.24); return false;">PLAY</a>
如果我先单击第一个链接,它可以正常工作并从 0 播放到 2.24。
如果我首先单击第二个链接,它可以正常播放并且也可以正常停止。
但是,如果我先单击第一个链接,然后单击第二个链接,它会开始播放,然后立即退出。
那时我可以返回并无限次播放第一个链接,而不会出现问题。
解决方案
.addEventListener()
&.removeEventListener()
首先避免使用 onevent 属性处理程序:
<按钮
onclick="fnc()">
您需要删除timeupdate
事件处理程序,因为它会不断更新初始end
值。这意味着.addEventListener()
并且.removeEventListener()
是必要的。
演示
细节在demo中注释
/*
Register the document to the click event
When it's clicked, call function videoStart()
*/
document.addEventListener('click', videoStart);
// Declare variable
var END;
// Define function videoStart() -- pass Event Object
function videoStart(event) {
// Reference the clicked button
var button = event.target;
// Get data-start value of clicked button
var start = button.dataset.start;
// Get data-end value of clicked button
var end = button.dataset.end;
// Assign value of end to END
END = end;
// Reference the video tag
var video = document.querySelector("video");
// Set time to start value
video.currentTime = start;
// Play video
video.play();
/*
Register video tag to timeupdate event
videoEnd() is the callback function
*/
video.addEventListener("timeupdate", videoEnd);
};
// Define function videoEnd() -- pass the Event Object
function videoEnd(event) {
// Reference the video tag
var video = document.querySelector("video");
/*
if the current time is greater than or equal to END...
pause video and remove the eventListener() so the next
eventListener can be established according to new END
argument.
*/
if (video.currentTime >= END) {
video.pause();
video.removeEventListener("timeupdate", videoEnd);
}
}
<video src='https://html5demos.com/assets/dizzy.mp4' width='320'></video>
<button data-start='0' data-end='3'>0 - 3</button>
<button data-start='3' data-end='5'>3 - 5</button>
推荐阅读
- python - selenium.common.exceptions.WebDriverException:消息:未知错误:Chrome 无法启动:使用 ChromeDriver Chrome 和 Selenium 异常退出
- hadoop - MapReduce 中的自定义动态分区
- javascript - 如何访问通过 Ajax GET 调用收到的对象?
- php - Laravel 资源路由命名前缀
- php - 上传图片并在灯箱中查看
- node.js - Cordova 有 SyntaxError: Invalid 正则表达式
- javascript - gsap,反应 - 无法补间空目标
- sql-server - 如何计算同一列中的两个不同列值?
- python - 如何生成包含 3-sigma 异常值的随机数数组?
- python - 如何在没有标题行的情况下使用 pandas 创建数据框,并使字符串的第一个组件 t