ホームページ > 記事 > ウェブフロントエンド > HTML5のVideoタグの詳しい説明
前回の記事「Xiaoqiang の HTML5 モバイル開発道 (5) - 美しいビデオプレーヤーを作る」で、原理についてあまり知らない友人もいます。
1. 使用スキル
HTML5 では、
<video src="move.mp4"></video>
には、多くの属性があります。たとえば、controls 属性は、 console があるかどうかを制御できます。
<video src="move.mp4" controls="controls"> 浏览器不支持HTML5的视频播放功能 </video>
上記のビデオ形式から、ブラウザごとに異なるビデオ形式がサポートされていることがわかります。そのため、
<video width="400" controls="controls"> <source src="move.mp4" type="video/mp4" /> <source src="move.ogg" type="video/ogg" /> </video>E v 2、Video タグの属性
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>
【相关推荐】