Comment: The Video object is a new object added in HTML5. It supports online playback of videos in various formats. It has relatively powerful functions. Video object can report the current playback progress through the ontimeupdate event. Below is an introduction to the problem of the ontimeupdate event of the Video object. Interested friends can refer to it.
The date is on a video playback page, which uses HTML5 Video object. This is a new object added in HTML5. It supports online playback of videos in various formats. It has relatively powerful functions and has expanded many events. It can control video playback through JavaScript scripts. Refer to the following two links:The Video object can report the current playback progress through the ontimeupdate event. At the same time, the event can also control other elements on the page according to the video playback situation, such as switching chapters and displaying additional information as the video playback progress. Here is an example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<script type="text/javascript">
function timeUpdate() {
document.getElementById('time').innerHTML = video.currentTime;
}
function durationChange() {
document.getElementById('duration').innerHTML = video.duration;
}
function seekVideo() {
document.getElementById('video').currentTime = document.getElementById('seekText').value;
}
window.onload = function () {
var videoPlayer = document.getElementById("video");
videoPlayer.ontimeupdate = function () { timeUpdate(); };
};
</script>
<div>
<video controls="controls"
poster="./images/videoground1.png"
src="./videoSource/video1.mp4"
officechange="durationChange()" />
</div>
<div>Time: <span>0</span> of <span>0</span> seconds.</div>
<div>
<input type="text" />
<input type="button" value="Seek Video" />
</div>
</body>
</html>
Of course, you can also dynamically add attributes or hanging events to the Video object like using other elements on the page, such as:
video.ontimeupdate = function () { getCurrentVideoPosition(); };
However, the above line of code seems to be invalid on Chrome, you can use addEventListener instead:
videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);
I don't know why onChrome cannot directly hang the ontimeupdate event on Video element, but must add events through the addEventListener method. However, addEventListener is also compatible with IE and Firefox browsers, so it should be passed.