HTML5Video標籤詳解
- 黄舟原創
- 2017-05-19 17:24:494470瀏覽
在前面的小強的HTML5行動開發之路（5）－製作一個漂亮的影片播放器中製作了一個非常好用的播放器，有的朋友對其中的原理還不是很了解，這篇文章將在前一篇的基礎上深入剖析
一、使用技巧
在HTML5中可以使用
<video src="move.mp4"></video>
video標籤中有很多屬性，例如controls屬性可以控制是否有控制台。
<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>二、Video標籤的屬性
video標籤支援HTML5中的全域屬性與事件屬性
特有屬性如下：
屬性 描述
autoplay autoplay 若有該屬性，則視訊在就緒後馬上播放。
controls controls 如果出現此屬性，則向使用者顯示控制項，例如播放按鈕。
height pixels 設定視訊播放器的高度。
loop loop 若有此屬性，且當媒介檔案完成播放後再次開始播放。
preload preload
如果出現此屬性，則視訊在頁面載入時載入，並預備播放。
如果使用 "autoplay"，則忽略該屬性。
src url 要播放的影片的 URL。
width pixels 設定視訊播放器的寬度。
大多數瀏覽器支援的視訊方法、屬性事件
方法 屬性 currentSrc play
pause() videoWidth progress
canPlay duration timeupdate timeupdate ended ended
error abort
paused empty
muted emptied
seeking waiting
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>
【相关推荐】