As we all know, before HTML5 was born, the flash plug-in was used to play a video on a webpage, while HTML5 gave birth to the <video> and <audio> labels, it makes it easier to play a video or audio on HTML5 like displaying an image, just like using to display an image, currently, only <video src = ""> or <audio src = ""> are embedded.
Here is an example. Only the most common <video> <audio> API of html5.
HTML displays the usage of the <video> control.
1. <! DOCTYPE html>
2. 3. <meta charset = "UTF-8">
4. <title> HTML5 Media DEMO </title>
5. <script type = "text/javascript" src = "js/media. js"> </script>
6. 7.
8. <body>
9. 10.
11.
12. <! -- Specify a video element for video playback -->
13. <! -- Autoplay indicates that the media is automatically played once the page is loaded -->
14. <! -- Loop indicates Automatic loop playback of this media. -->
15. <! -- Width and height indicate the screen size of the video to be played. -->
16. <video id = "video" width = "400" height = "300" autoplay loop>
17. </video>
18. <br/>
19.
20. video address: <input type = "text" id = "videoUrl"/>
21. <input id = "playButton" type = "button" onclick = "playOrPauseVideo ()" value = "play"/>
22. <! -- This small area is used to display the played time and total time in seconds. javascript is used to specify the content in this range. -->
23. <span id = "time"> </span>
24.
25. </body>
Then javascript is responsible for responding to the Click Event and updating the information of the time area (the playback time/total time), which is easy to understand.
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7. function playOrPauseVideo (){
8. // obtain the video url entered by the user from the text box
9. var videoUrl = document. getElementById ("videoUrl"). value;
10. console. log ("videoUrl:" + videoUrl );
11. // obtain the video control
12. var video = document. getElementById ("video ");
13. // bind an event handler function to the video control. These events are HTML5 defined events. The last parameter, boolean, indicates whether the event needs to be "Bubbling"
14. // The Event corresponding to the "Update time" is displayed in <span id = "time">.
15. video. addEventListener ("timeupdate", function (){
16. // obtain the region where the time is to be displayed.
17. var timeDisplay = document. getElementById ("time ");
18. // display the current playback progress in seconds, currentTime and
19. timeDisplay. innerHTML = Math. floor (video. currentTime) + "/" + Math. floor (video. duration) + "(seconds )";
20 .},
21. false
22 .);
23.
24. // the current status of the media must be determined because the pause and resume statuses must be taken into account.
25. // If video is paused at the time (this is the built-in attribute of HTML5 audio (video)
26. if (video. paused ){
27.
28. // pause is divided into two conditions: one is the end stop of playing the old media, and the other is the pause after playing for a period of time.
29. // when the old media ends, the judgment condition is that the address entered by the user is different from the current address (because the user chooses to play the new media)
30. if (videoUrl! = Video. src ){
31. // configure the src attribute of the current video as the address entered by the user.
32. video. src = videoUrl;
33. // then let the media reload the media for playing. This load () method is also the built-in method of video.
34. video. load ();
35 .}
36. // if the video is paused for a period of time, it is very simple. You only need to play the video without any changes. At this time, the parsed attribute of video is automatically set to false.
37. else {
38. video. play ();
39 .}
40. document. getElementById ("playButton"). value = "Suspend ";
41 .}
42. else {
43. video. pause ();
44. document. getElementById ("playButton"). value = "play ";
45.
46 .}
47 .}
Then we can enter the video to be played. Here I chose mp4, which will be supported by Chrome (note that not all media formats are supported, for example, the wmv Format I used is not supported). To enable the browser to support this playback, you must configure it in the browser:
Open Google Chrome and enterChrome: // flags, Locate and enable"Pair<Video>Element EnabledMedia Source API.", As shown in:
On the page, you can enter a URL and enjoy the video. Note that if you want to view locally stored videos, you must useFile :///Protocol:
From consortium of parallel lines
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
