本文小編為大家詳細介紹“HTML5的video元素如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“HTML5的video元素如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。
為 HTML5 建立的一些規則：
新特性應該基于 HTML、CSS、DOM 以及 JavaScript。減少對外部插件的需求（比如 Flash）更優秀的錯誤處理更多取代腳本的標記HTML5 應該獨立于設備開發進程應對公眾透明
新特性
HTML5 中的一些有趣的新特性：
用于繪畫的 canvas 元素用于媒介回放的 video 和 audio 元素對本地離線存儲的更好的支持新的特殊內容元素，比如 article、footer、header、nav、section新的表單控件，比如 calendar、date、time、email、url、search
視頻格式
當前，video 元素支持三種視頻格式：
Ogg=帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4=帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM=帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
如需在 HTML5 中顯示視頻，您所有需要的是：
<audio src="song.ogg" controls="controls"></audio>
control 屬性供添加播放、暫停和音量控件。
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
實例
<audio
controls="controls"> <source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg"> Your browser does not
support the audio tag. </audio>
demo：
<!DOCTYPE html>
<html>
<body>
<div 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="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script type="text/javascript">
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 規定了一種通過 audio 元素來包含音頻的標準方法。
audio 元素能夠播放聲音文件或者音頻流。
音頻格式
當前，audio 元素支持三種音頻格式：
如何工作
如需在 HTML5 中播放音頻，您所有需要的是：
<audio src="song.ogg" controls="controls"></audio>
control 屬性供添加播放、暫停和音量控件。
audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：
實例
<audio
controls="controls"> <source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">Your browser does not
support the audio tag.</audio>
<audio> 標簽的屬性
拖放（Drag 和 drop）是 HTML5 標準的組成部分。
拖放
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
拖放實例：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop（ev）{
ev.preventDefault（）;
}
function drag（ev）{
ev.dataTransfer.setData（"Text",ev.target.id）;
}
function drop（ev）{
ev.preventDefault（）;
var data=ev.dataTransfer.getData（"Text"）;
ev.target.appendChild（document.getElementById（data））;
}
</script>
</head>
<body>
<div id="div1" ondrop="drop（event）"ondragover="allowDrop（event）"></div>
<img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag（event）" width="336" height="69" />
</body>
</html>
讀到這里，這篇“HTML5的video元素如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
