<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Self-selected course (such as about Zhihui.com)</title> </head> <body > <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the HTML 5 video tag. </video> </body> </html>
The <video> element provides play, pause, and volume controls to control the video.
At the same time, the <video> element also provides width and height attributes to control the size of the video. If the height and width are set, the required video space will be reserved when the page is loaded. If these properties are not set, the browser does not know the size of the video, the browser can no longer reserve a certain space on load, and the page will change according to the size of the original video.
The content inserted between the <video> and </video> tags is intended for display in browsers that do not support the video element.
The <video> element supports multiple <source> elements. The <source> element can link to different video files. The browser will use the first recognized format:
HTML5 <vodeo>--Control using DOM
HTML5 <video> and <audio> elements also have methods, attributes and events.
The methods, properties and events of the <video> and <audio> elements can be controlled using JavaScript.
The methods are used to play, pause, and load. The properties (such as duration, volume, etc.) can be read or set. The DOM events in it can notify you, for example, that the <video> element has started playing, has been paused, has stopped, and so on.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Self-selected course (such as about Zhihui.com)</title> </head> <body > <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">放大</button> <button onclick="makeSmall()">缩小</button> <button onclick="makeNormal()">普通</button> <br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> 你的浏览器不支持 HTML5 video标签。 </video> </div> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=480; } </script> </body> </html>