Comments: A Video object is a newly added object in HTML5. It supports online playback of videos in multiple formats and has powerful functions. The Video object can report the current playback progress through the ontimeupdate event, the following describes the ontimeupdate event of the Video object. If you are interested, refer to the Video playback page in the next day, where the HTML5 Video object is used, this is a newly added object in HTML5. It supports online video playback in multiple formats and has powerful functions. It also extends many events and allows you to control video playback through JavaScript scripts. Refer to the following two links:
Http://msdn.microsoft.com/en-us/library/windows/apps/hh465962.aspx
Http://www.w3school.com.cn/html5/tag_video.asp
The Video object can report the current playback progress through the ontimeupdate event. It can also control other elements on the page based on the Video playback status, for example, you can switch chapters and display additional information as the video playback progresses. The following is an example:
The Code is as follows:
<! 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 id = "video" controls = "controls"
Poster = "./images/videoground1.png"
Src = "./videoSource/video1.mp4" width = "pixel PX" height = "320px"
Ondurationchange = "durationChange ()"/>
</Div>
<Div> Time: <span id = "time"> 0 </span> of <span id = "duration"> 0 </span> seconds. </div>
<Div>
<Input type = "text" id = "seekText"/>
<Input type = "button" id = "seekBtn" value = "Seek Video" onclick = "seekVideo ();"/>
</Div>
</Body>
</Html>
Of course, you can also dynamically add attributes or upload events to the Video object like using other elements on the page, such:
The Code is as follows:
Video. ontimeupdate = function () {getCurrentVideoPosition ();};
However, the above line of code seems to be invalid on Chrome. You can use addEventListener to replace it:
The Code is as follows:
VideoPlayer. addEventListener ("timeupdate", function () {getCurrentVideoPosition () ;}, false );
I don't know why. In Chrome, The ontimeupdate event cannot be directly mounted to the Video element, but the event must be added through the addEventListener method. However, addEventListener is also compatible with IE and Firefox browsers, so it should be passed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
