溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關HTML5之Video標簽的用法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
一、使用技巧
在HTML5中可以使用<audio>或者<video>標簽播放Html5媒體，使用方式如下：
<video src="move.mp4"></video>
video標簽中有很多屬性，例如controls屬性可以控制是否有控制臺。
<video src="move.mp4" controls="controls"> 瀏覽器不支持HTML5的視頻播放功能 </video>
從上面的視頻格式中我們可以看到不同的瀏覽器支持不同的視頻格式，這樣我們可以采用<source>標簽指定多種格式的視頻，默認情況下瀏覽器會自動啟動下載文件來確定其類型。
<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 設置視頻播放器的寬度。
大多數瀏覽器支持的視頻方法、屬性事件
方法 屬性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration 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>
感謝各位的閱讀！關于“HTML5之Video標簽的用法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
