Home > Article > Web Front-end > Detailed explanation of HTML5 Video tag
In the previous article Xiaoqiang's HTML5 mobile development road (5) - Making a beautiful video player, I made a very easy-to-use player. Some friends don't know much about the principles. This This article will provide an in-depth analysis of the use of the
1. Usage skills
In HTML5, you can use the
<video src="move.mp4"></video>
The video tag has Many attributes, such as the controls attribute, can control whether there is a console.
<video src="move.mp4" controls="controls"> 浏览器不支持HTML5的视频播放功能 </video>
From the above video formats, we can see that different browsers support different video formats, so we can use the
<video width="400" controls="controls"> <source src="move.mp4" type="video/mp4" /> <source src="move.ogg" type="video/ogg" /> </video>
2. Attributes of Video tag
The video tag supports global attributes and event attributes in HTML5
The unique attributes are as follows:
Attributes Value Description
autoplay
# Controls Controls If this attribute appears, it will display the control to the user, such as the play button.
height pixels Set the height of the video player.
Loop Loop If this attribute appears, it will start playing again after the media file is completed.
preload preload
If this attribute appears, the video will be loaded when the page is loaded and will be ready to play.
If "autoplay" is used, this attribute is ignored.
src url The URL of the video to be played.
width pixels Set the width of the video player.
Video methods and attribute events supported by most browsers
Methods Attributes Events
play() currentSrc play
pause() currentTime currentTime pause
load() videoWidth progress
canPlayType videoHeight
paused empty
volume loadedmetadata
height
width
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
三、从实例中了解Video标签的使用
<!DOCTYPE html> <html> <body> <p style="text-align:center;"> <!--定义按钮,并添加事件监听函数--> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" /> <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" /> <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" /> <p>您的浏览器不支持此HTML5标签</p> </video> </p> <script type="text/javascript"> //得到video标签对象 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=420; } </script> </body> </html>
【相关推荐】