带有javascript的HTML5视频-语法混乱

我正在尝试制作一个自定义视频。我可以让我的功能发挥作用。但是，当我同时有两个事件侦听器时：

e、 g.video.ontimeupdate

当我播放视频时，只有底部的一个会工作。有没有更好的方法来编写我的函数，这样我就不会有这个问题

事件侦听器

time.addEventListener("timeupdate", currentTime, true);
video.ontimeupdate = function() {currentTime()};

seek.addEventListener("timeupdate", progressBarUpdate, true);
video.ontimeupdate = function() {progressBarUpdate()};

函数代码示例

//更新进度条功能

function progressBarUpdate() {

            // Calculate the progress bar value
            var value = (100 / video.duration) * video.currentTime;
            // Update the progress bar value
            seek.value = value;
        }

---

video.ontimeupdate

类似于。它们是更新的属性。将执行它们的最新函数定义。使用

addEventListener（）

下面是一个代码片段，显示了使用

window.onload

语法时出现的问题

window.onload=function（）{
console.log（'Window-loaded#1'）；//将不会异常
}
window.onload=函数（）{
console.log（'Window-loaded#2'）；//Window-loaded#2
}

视频。ontimeupdate类似于。它们是更新的属性。将执行它们的最新函数定义。使用

addEventListener（）

下面是一个代码片段，显示了使用

window.onload

语法时出现的问题

window.onload=function（）{
console.log（'Window-loaded#1'）；//将不会异常
}
window.onload=函数（）{
console.log（'Window-loaded#2'）；//Window-loaded#2
}

注册事件处理程序有两种不同的JavaScript机制：

time.addEventListener("timeupdate", currentTime, true);  // W3C DOM Standard
video.ontimeupdate = function() { currentTime() };         // Event handling property

当您使用属性（

ontimeupdate

）并为其指定值时，当您将该属性设置为另一个值时，该值将被覆盖

因此，当您这样做时：

video.ontimeupdate = function() {currentTime()};

它稍后将被以下内容覆盖：

video.ontimeupdate = function() { progressBarUpdate() };

要防止这种情况发生，请使用更现代的，它使用

addEventListener

video.addEventListener("timeupdate", currentTime, true);
video.addEventListener("timeupdate", progressBarUpdate, true);

 video.addEventListener("timeupdate", currentTime);
 video.addEventListener("timeupdate", progressBarUpdate);

这将两个函数注册为

timeupdate

事件的回调

此外，

addEventListener

还有第三个参数（布尔值），它指示您希望在捕获阶段（

true

）还是冒泡阶段（

false

）触发回调。需要捕获阶段是很不寻常的（IE直到IE 9才支持该阶段），因此您可能希望将现有的

true

值修改为

false

，或者忽略第三个参数，因为

false

是默认值

下面是一个工作示例，实际显示了3个事件处理程序，它们都绑定到

timeupdate

事件中（请确保在snippet窗口中向下滚动以查看消息）：

var videoElement=null；
无功电流=零
var持续时间=空；
var div1，div2；
addEventListener（“DOMContentLoaded”，function（））{
//获取对媒体元素的DOM引用：
videoElement=document.getElementById（'bikeSafe'）；
//…到视频跨度元素：
current=document.getElementById（'current'）；
duration=document.getElementById（'duration'）；
div1=document.getElementById（“timeUpdate1”）；
div2=document.getElementById（“timeUpdate2”）；
//连接视频以使用其API：
videoElement.addEventListener（“播放”，设置计数器）；
videoElement.addEventListener（“结束”，endVideo）；
videoElement.addEventListener（“durationchange”，updateStatus）；
videoElement.addEventListener（“时间更新”，设置计数器）；
videoElement.addEventListener（“时间更新”，updateDiv1）；
videoElement.addEventListener（“时间更新”，updateDiv2）；
});
//视频API：
函数updateDiv1（）{div1.innerHTML=“Hello from timeupdate事件处理程序！”}
函数updateDiv2（）{div2.innerHTML=“来自不同的timeupdate事件处理程序的Hello！”}
//设置视频中当前位置的值
函数setCounter（）{
//此函数连接到视频元素的timeupdate事件，该事件
//当当前时间值更改时激发。
current.innerHTML=（videoElement.duration-videoElement.currentTime）.toFixed（3）；
}
函数endVideo（）{
//结束时将视频重置回开始位置
videoElement.currentTime=0；
};
函数updateStatus（）{
//这将在视频的durationchange事件触发时触发
//这将在成功加载映像后发生
//这是第一次知道持续时间有多长
//这段视频的内容是。
current.innerHTML=videoElement.duration.toFixed（3）；
duration.innerHTML=videoElement.duration.toFixed（3）；
};
视频{宽度：40%；}

您的浏览器不支持HTML5视频


剩余时间：|
总长度：

注册事件处理程序有两种不同的JavaScript机制：

time.addEventListener("timeupdate", currentTime, true);  // W3C DOM Standard
video.ontimeupdate = function() { currentTime() };         // Event handling property

当您使用属性（
ontimeupdate
）并为其指定值时，当您将该属性设置为另一个值时，该值将被覆盖

因此，当您这样做时：

video.ontimeupdate = function() {currentTime()};

它稍后将被以下内容覆盖：

video.ontimeupdate = function() { progressBarUpdate() };

要防止这种情况发生，请使用更现代的，它使用
addEventListener

video.addEventListener("timeupdate", currentTime, true);
video.addEventListener("timeupdate", progressBarUpdate, true);

 video.addEventListener("timeupdate", currentTime);
 video.addEventListener("timeupdate", progressBarUpdate);

这将两个函数注册为
timeupdate
事件的回调

此外，
addEventListener
还有第三个参数（布尔值），它指示您希望在捕获阶段（
true
）还是冒泡阶段（
false
）触发回调。需要捕获阶段是很不寻常的（IE直到IE 9才支持该阶段），因此您可能希望将现有的
true
值修改为
false
，或者忽略第三个参数，因为
false
是默认值

下面是一个工作示例，实际显示了3个事件处理程序，它们都绑定到
timeupdate
事件中（请确保在snippet窗口中向下滚动以查看消息）：


var videoElement=null；
无功电流=零
var持续时间=空；
var div1，div2；
addEventListener（“DOMContentLoaded”，function（））{
//获取对媒体元素的DOM引用：
videoElement=document.getElementById（'bikeSafe'）；
//…到