HTML5视频事件timeupdate
在Chrome浏览器上会触发两次。
重现步骤:
- 运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
</head>
<body>
<video id="video">
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
<button id="button">Update time</button>
<script>
$( document ).ready(function() {
var vid = document.getElementById("video")
vid.addEventListener("timeupdate", timeUpdate, false);
$("#button").on("click", buttonClick);
function timeUpdate(e){
console.log("timeUpdate");
}
function buttonClick(e){
console.log("buttonClick");
vid.currentTime = 1;
}
});
</script>
</body>
</html>
- 点击按钮
- 检查结果 (buttonClick x 1, timeUpdate x 2)
有什么想法吗?))