HTML5 Video(視頻)

多站點都會使用到視頻. HTML5 提供了展示視頻的標準。

檢測您的瀏覽器是否支持 HTML5 視頻：

檢測

Web站點上的視頻

直到現(xiàn)在，仍然不存在一項旨在網(wǎng)頁上顯示視頻的標準。

今天，大多數(shù)視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。

HTML5 規(guī)定了一種通過 video 元素來包含視頻的標準方法。

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

HTML5 (視頻)- 如何工作

如需在 HTML5 中顯示視頻，您所有需要的是：

實例

您的瀏覽器不支持Video標簽。

</video>

<video> 元素提供了播放、暫停和音量控件來控制視頻。

同時<video> 元素元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設(shè)置的高度和寬度，所需的視頻空間會在頁面加載時保留。。如果沒有設(shè)置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據(jù)原始視頻的大小而改變。

<video> 與</video> 標簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。

<video> 元素支持多個 <source> 元素. <source> 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：

視頻格式與瀏覽器的支持

當前， <video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg:

瀏覽器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (從 Opera 25 起)	YES	YES

MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

視頻格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - 使用 DOM 進行控制

HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。

<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.

其中的方法有用于播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設(shè)置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。

例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取并設(shè)置屬性，以及如何調(diào)用方法。

實例 1

為視頻創(chuàng)建簡單的播放/暫停以及調(diào)整尺寸控件：

播放/暫停放大縮小普通

上面的例子調(diào)用了兩個方法：play() 和 pause()。它同時使用了兩個屬性：paused 和 width。

HTML5 Video 標簽

標簽	描述
<video>	定義一個視頻
<source>	定義多種媒體資源,比如 <video> 和<audio>
<track>	定義在媒體播放器文本軌跡

言

希望可以通過這篇文章，能夠給你得到幫助。(感謝一鍵三連)

學習深入理解HTML5的audio和video。

HTML5視頻概述

在HTML5播放一個視頻，很簡單，只需要一行代碼：

<video src="resources/dadaqianduan.mp4" autoplay></video>

了解多媒體術(shù)語

了解視頻文件格式：

Audio Video InterLeaved .avi

Flash Video .flv

MPEG-4 .mp4

Matroska .mkv

Ogg .ogv

音頻和視頻編解碼器

編解碼器可以理解為一些算法代碼，用于處理視頻，音頻或者其元數(shù)據(jù)的編碼格式。對音頻或視頻文件進行編碼，可使得文件大大縮小，便于在因特網(wǎng)上傳輸。

音頻編解碼器：

MP3，使用ACC音頻

Wav，使用Wav音頻

Ogg，使用OggVorbis音頻

視頻編解碼器：

MP4，使用H.264視頻，AAC音頻

WebM，使用VP8視頻，OggVorbis音頻

Ogg，使用Theora視頻，OggVorbis音頻

多媒體文件格式

audio元素支持的音頻格式MP3,Wav,Ogg；video元素支持的格式MP4,WebM,Ogg。

audio元素是專門用于在網(wǎng)頁中播放網(wǎng)絡(luò)音頻的
video元素是專門用于在網(wǎng)頁中播放視頻的

在HTML5中audio和video元素提供的接口包含了一系列的屬性，方法和事件，這些接口可以幫助開發(fā)完成對音頻和視頻的操作。

那么如何在頁面中添加音頻和視頻呢？

音頻

<audio src="resources/audio.mp3">
</audio>

視頻

<video src="resources/video.mp4" width="600" height="200">
</video>

使用source元素

因為各種瀏覽器對音頻和視頻的編解碼器的支持不一樣，為了能夠在各種瀏覽器中正常使用，可以提供多個源文件。

<audio src="resources/audio.mp3">
 <source src="song.ogg" type="audio/ogg">
 <source src="song.mp3" type="audio/mpeg">
</audio>

<video src="resources/video.mp4" width="600" height="200" controls>
 <source src="movie.ogg" type="video/ogg codes=`theora,vorbis` ">
 <source src="movie.mp4" type="video/mp4">
</video>

使用source元素替代了audio或video的標簽屬性src。

src屬性用于指定媒體文件的url地址
type屬性用于指定媒體文件的類型，屬性值為媒體文件的MIME類型，該屬性值還可以通過codes參數(shù)指定編碼格式

audio和video特性和屬性

元素的標簽特性

src，源文件特性，用于指定媒體文件的url地址
autoplay，自動播放特性，表示媒體文件加載后自動播放。

<video src="resources/video.mp4" autoplay></video>

controls，控制條特性，表示為視頻或音頻添加自帶的播放控制條。

<video src="resources/video.mp4" controls></video>

loop，循環(huán)特性，表示音頻或視頻循環(huán)播放。

<video src="resources/video.mp4" controls loop></video>

preload，預加載特性，表示頁面加載完成后如何加載視頻數(shù)據(jù)。

none表示不進行預加載
metadata表示只加載媒體文件的元數(shù)據(jù)
auto表示加載全部視頻或音頻，默認值為auto

<video src="resources/video.mp4" controls preload="auto"></video>

poster是video元素獨有的特性，替代內(nèi)容屬性，用于指定一副替代圖片的url地址，當視頻不可以用時，會顯示該替代圖片。

<video src="resources/video.mp4" controls poster="images/none.jpg"</video>

width和height，video元素獨有的特性，用于指定視頻的寬度和高度

<video src="resources/video.mp4" width="600" height="200" controls></video>

接口屬性

currentSrc，只讀，獲取當前正在播放或已加載的媒體文件的url地址
videoWidth，只讀，video元素特有屬性，獲取視頻原始的寬度
videoHeight，只讀，video元素特有屬性，獲取視頻原始的高度
currentTime，獲取或設(shè)置當前媒體播放位置的時間點
startTime，只讀，獲取當前媒體播放的開始時間
duration，只讀，獲取整個媒體文件的播放時長
volume，獲取或設(shè)置媒體文件播放時的音量，取值范圍在0.0到0.1之間
muted，獲取或設(shè)置媒體文件播放時是否靜音。true表示靜音，false表示消除靜音
ended，只讀，如果媒體文件已經(jīng)播放完畢則返回true，否則返回false
error，只讀，讀取媒體文件的錯誤代碼
played，只讀，獲取已播放媒體的TimesRanges對象，該對象內(nèi)容包括已播放部分的開始時間和結(jié)束時間。
paused，只讀，如果媒體文件當前是暫停或未播放則返回true，否則返回false
seeking，只讀，獲取瀏覽器是否正在請求媒體數(shù)據(jù)
seekable，只讀，獲取媒體資源已請求的TimesRanges對象，該對象內(nèi)容包括已請求部分的開始時間和結(jié)束時間
networkState，只讀，獲取媒體資源的加載狀態(tài)
buffered，只讀，獲取本地緩存的媒體數(shù)據(jù)的TimesRanges對象
readyState，只讀，獲取當前媒體播放的就緒狀態(tài)
playbackRate，獲取或設(shè)置媒體當前的播放速率
defaultPlaybackRate，獲取或設(shè)置媒體默認的播放速率

視頻播放的快進

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>視頻播放時的快進</title>
<script type="text/javascript">
function Forward() {
 var el = document.getElementById("myPlayer");
 var time = el.currentTime;
 el.currentTime = time+300;
}
</script>
</head>
<body>
<video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
</video>
<br/>
<input type="button" value="快進" onclick="Forward()"/>
</body>
</html>

audio和video接口方法

接口方法

load()，加載媒體文件，為播放做準備。
play()，播放媒體文件。
pause()，暫停播放媒體文件。
canPlayType()，測試瀏覽器是否支持指定的媒體類型。

代碼示例使用接口：

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>播放與暫停</title>
<script type="text/javascript">
var videoEl = null;
function Play() {
 videoEl.play();
}
function Pause() {
 videoEl.pause();
}
window.onload = function(){
 videoEl = document..getElementById("myPlayer");
}
</script>
</head>
<body>
<video id="myPlayer" width="600">
 <source src="resources/video.mp4" type="video/mp4">
</video><br>
<input type="button" value="播放" onclick="Play()"/>
<input type="button" value="暫停" onclick="Pause()"/>
</body>
</html>

audio和video事件

捕獲事件的方式

捕獲事件有兩種方法：一種是添加事件句柄，一種是監(jiān)聽。

<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
</video>

// 監(jiān)聽方式
var videoEl = document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);

接口事件

play，當執(zhí)行方法play()時觸發(fā)
playing，正在播放時觸發(fā)
pause，當執(zhí)行了方法pause()時觸發(fā)
timeupdate，當播放位置被改變時觸發(fā)
ended，當播放結(jié)束后停止播放時觸發(fā)
waiting，在等待加載下一幀時觸發(fā)
ratechange，在當前播放速率改變時觸發(fā)
volumechange，在音量改變時觸發(fā)
canplay，以當前播放速率需要緩沖時觸發(fā)
canplaythrough，以當前播放速率不需要緩沖時觸發(fā)
durationchange，當播放時長改變時觸發(fā)
loadstart，當瀏覽器開始在網(wǎng)上尋找數(shù)據(jù)時觸發(fā)
progress，當瀏覽器正在獲取媒體文件時觸發(fā)
suspend，當瀏覽器暫停獲取媒體文件，且文件獲取并不是正常結(jié)束時觸發(fā)
abort，當終止獲取媒體數(shù)據(jù)時觸發(fā)
error，在獲取媒體過程中出錯時觸發(fā)
emptied，當所在網(wǎng)絡(luò)變?yōu)槌跏蓟癄顟B(tài)時觸發(fā)
stalled，在瀏覽器嘗試獲取媒體數(shù)據(jù)失敗時觸發(fā)
seeking，在瀏覽器正在請求數(shù)據(jù)時觸發(fā)
seeded，在瀏覽器停止請求數(shù)據(jù)時觸發(fā)

定義全局的視頻對象

代碼如下：

<script type="text/javascript">
// 定義全局視頻對象
var videoEl = null;
// 網(wǎng)頁加載完畢后，讀取視頻對象
window.addEventListener("load", function() {
 videoEl = document.getElementById("myPlayer")
});
</script>

添加進度顯示功能

代碼如下：

<script type="text/javascript">
function Progress() {
 var el = document.getElementById("progress");
 el.style.width = (videoEl.currentTime/videoEl.duration)*720 + "px"
 document.getElementById("info").innerHTML = s2time(videoEl.currentTime) + "/" + s2time(videoEl.duration);
}

function s2time(s) {
 var m = parseFloat(s/60).toFixed(0);
 s = parseFloat(s%60).toFixed(0);
 return (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
}
window.addEventListener("load",function(){videoEl.addEventListener("timeupdate",Progress)});
window.addEventListener("load",Progress)

添加靜音和調(diào)節(jié)音量的功能

消除靜音videoEl.muted=false；靜音效果videoEl.muted=true；videoEl.volume=e.value;修改音量的值。

添加慢進和快進功能

多數(shù)視頻是通過插件(比如 Flash)來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。

HTML5 規(guī)定了一種通過 video 元素來包含視頻的標準方法。

在HTML5中，video元素目前支持三種格式的視頻文件，

1.Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

2.MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

3.WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

那么在HTML5中如何顯示視頻呢?例子如下：

<video src="demo.mp4" width="500" height="250" controls="controls">您的瀏覽器不支持此種視頻格式。</video>

好了，現(xiàn)在來解釋下video元素中各屬性的含義，其中width、height就不解釋了啊，主要說下controls,顧名思義，controls 就是控件們，哈哈，就是視頻的播放、音量暫停等控件。video元素中間插入的漢字，聰明的你一定知道的，是提示用戶瀏覽器不支持視頻格式使用的。

需要注意的是，要確保適用于Safari 瀏覽器，視頻文件必須是 MP4類型。而ogg格式的視頻則是適用于Firefox、Opera 以及Chrome 瀏覽器。Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。

當然了，我們?nèi)绻淮_定自己的瀏覽器支持什么格式的視頻，可以先檢測一下。若是不想麻煩，那怎么辦呢?我們可以這樣：

您的瀏覽器不支持此種視頻格式。

</video>

video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式，這樣我們只要多準備幾個不同格式的視頻就可以了。

接下來，介紹幾個video標簽的屬性，

1.autoplay :出現(xiàn)該屬性意味著視頻在就緒后將自動播放，用法：autoplay="autoplay"

2.controls :出現(xiàn)該屬性意味著向用戶顯示控件，如播放按鈕等，用法：controls="controls"

3.height:設(shè)置高度

4.width:設(shè)置寬度

5.loop:自動重播，用法：loop="loop"

6.preload:視頻在頁面加載時進行加載并預備播放，用法：preload="auto"

auto - 當頁面加載后載入整個視頻

meta - 當頁面加載后只載入元數(shù)據(jù)

none - 當頁面加載后不載入視頻

注意：若使用了autoplay，則忽略preload

7.src:要播放視頻的url

更多嵌入式、物聯(lián)網(wǎng)、安卓、Java、HTML5等請繼續(xù)關(guān)注華清遠見成都中心！

在線咨詢

上一篇：Javascript全屏模式的切換
下一篇：html 文本輸入框效果大匯集

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商