html5 <video> 元素同樣擁有方法、屬性和事件。 其中的方法用于播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。 下例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取并設置屬性，以及如何調用方法。 html5 <video> - 方法、屬性以及事件下面列出了大多數瀏覽器支持的視頻方法、屬性和事件：
注釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載后，其他屬性才可用。 方法、屬性、事件的使用一：屬性 error屬性：在正常讀取時候，使用媒體數據的過程中，video元素或audio元素的error屬性為null，但是任何時候只要出現錯誤，error屬性將返回一個MediaError對象，該對象的code返回對應的錯誤狀態，共有4個可能值：
代碼如下： <video src="" id="videoElement"></video>var video = document.getElementById("videoElement");
video.addEventListener('error',function(){var error = video.error;
swicth(error.code) {
case 1:
alert("視頻的下載過程被中止");
break;
case 2:
alert("網絡發生故障，視頻的下載過程被中止");
break;
case 3:
alert("解碼失敗");
break;
case 4:
alert("媒體資源不可用或媒體格式不被支持");
break;
}
},false);networkState屬性 在媒體數據加載過程中可以使用video元素或audio元素的networkState屬性讀取當前網絡狀態，共有4個可能的值； 1． NETWORK_EMPTY（數字值為0）：元素處于初始狀態。 2． NETWORK_IDLE(數字值為1)，瀏覽器已選擇好用什么編碼格式來播放媒體，但是尚未建立網絡連接。 3． NETWORK_LOADING(數字值為2)：媒體數據加載中 4． NETWORK_NO_SOURCE(數字值為3)，沒有支持的編碼格式，不執行加載。 currentTime屬性與duration屬性
我們可以來做demo如下： HTML代碼如下： <video id="video" controls width=640 height=360 autoplay> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,vorbis"'/> <source src="Wildlife/Wildlife.webm" type='video/webm' > <source src="Wildlife/Wildlife.mp4" type='video/mp4'> <p>Video is not visible,most likely your browser does not support HTML5 video</p> </video> <button onclick="getCurTime()" type="button">獲得當前時間的位置</button> <button onclick="setCurTime()" type="button">把時間位置設置為 5 秒</button> <button onclick="duration()" type="button">讀取媒體文件總的播放時間</button> js代碼如下： var myVid=document.getElementById("video");
function getCurTime(){
// 獲得當前視頻或者音頻時間的位置
alert(myVid.currentTime);
}
function setCurTime(){
// 給當前的視頻或者音頻設置5s時間的位置
myVid.currentTime=5;
}
function duration() {
//讀取媒體文件總的播放時間 單位為S
alert(myVid.duration);
}大家可以復制代碼，換一張視頻地址就可以看到效果了~； played屬性，paused屬性與ended屬性 played：video元素或audio元素的played屬性來返回一個TimeRanges對象，從該對象中可以讀取媒體文件的已播放部分的時間段。開始時間為已播放部分的開始時間，結束時間為已播放部分的結束時間。 paused屬性：使用video元素或audio元素的paused屬性來返回一個布爾值，表示是否處于暫停播放中，true表示媒體暫停播放，false表示媒體正在播放； ended屬性：使用video元素或audio元素的ended屬性來返回一個布爾值，表示是否播放完畢，true表示媒體播放完畢，false表示媒體還沒有播放完畢。 HTML代碼如下： <video id="video" controls width=640 height=360 autoplay loop> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,most likely your browser does not support HTML5 video</p> </video> <button onclick="played()" type="button">讀取媒體文件的已播放部分的時間段</button> <button onclick="paused()" type="button">是否處于暫停播放</button> <button onclick="ended()" type="button">是否播放完畢</button> js代碼如下： var myVid=document.getElementById("video");
function played() {
//讀取媒體文件的已播放部分的時間段
console.log(myVid.played);
}
function paused() {
// 是否處于暫停播放
alert(myVid.paused);
}
function ended() {
// 是否播放完畢
alert(myVid.ended);
}defaultPlaybackRate屬性與playbackRate屬性 defaultPlaybackRate屬性：可以使用video元素或者audio元素的defaultPlaybackRate屬性讀取或修改媒體默認的播放速率。 playbackRate屬性：可以使用video元素或者audio元素的playbackRate屬性讀取或修改媒體當前的播放速率。 volume屬性與muted屬性 volume屬性：使用video元素或audio元素的volume屬性讀取或修改媒體的播放音量，范圍為0到1,0為靜音，1為最大音量。 muted屬性：使用video元素或audio元素的muted屬性讀取或修改媒體的靜音狀態，該值為布爾值，true表示處于靜音狀態，false表示處于非靜音狀態。 HTML代碼如下： <video id="video" controls width=640 height=360 autoplay loop> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,most likely your browser does not support HTML5 video</p> </video> <button onclick="volume()" type="button">讀取或修改媒體的播放音量</button> <button onclick="muted()" type="button">讀取或修改媒體當前的靜音狀態</button> JS代碼如下： var myVid=document.getElementById("video");
function volume(){
// 讀取或修改媒體的播放音量
myVid.volume = 0.1;
}
function muted() {
//讀取或修改媒體當前的靜音狀態
myVid.muted = true;
}大家可以使用下，當我點擊”讀取或修改媒體的播放音量”按鈕時候，聲音會變的很小，當我點擊”讀取或修改媒體當前的靜音狀態”按鈕時候，視頻完全就沒有聲音。 二：方法 video元素與audio元素有以下四種方法；
下面是播放和暫停的demo如下： <video id="video" controls width=640 height=360> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,most likely your browser does not support HTML5 video</p> </video> <button onclick="play()">播放</button> <button onclick="pause()">暫停</button> JS代碼如下： var myVid=document.getElementById("video");
// 監聽視頻播放結束的事件
myVid.addEventListener("ended",function(){
alert("播放結束");
},true);
// 發生錯誤
myVid.addEventListener('error',function(){
switch(myVid.error.code) {
case 1:
alert("視頻的下載過程被中止");
break;
case 2:
alert("網絡發生故障，視頻的下載過程被中止");
break;
case 3:
alert("解碼失敗");
break;
case 4:
alert("不支持播放的視頻格式");
break;
default:
alert("發生未知錯誤");
}
},false);
function play() {
// 播放視頻
myVid.play();
}
function pause() {
// 暫停播放
myVid.pause();
}如上代碼，默認的情況下是不自動播放，當我點擊播放按鈕時候，就播放，當我點擊暫停按鈕時候就停止當前的播放。 4. canPlayType方法：使用canPlayType方法來測試瀏覽器是否支持指定的媒體類型，該方法定義如下：var support = videoElement.canPlayType(type); videoElement表示頁面上的video元素或audio元素，該方法使用一個參數type，該參數的指定方法與source元素的type參數的指定方法相同，用播放文件的MIME類型來指定，可以在指定的字符串中加上表示媒體編碼格式的codes參數。 該方法可能返回的值如下所示：
HTML代碼如下： <video id="video" controls width=640 height=360> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora,most likely your browser does not support HTML5 video</p> </video> <button onclick="canPlayType()">canPlayType方法</button> JS代碼如下： var myVid=document.getElementById("video");
function canPlayType() {
var support = myVid.canPlayType("video/webm");
console.log(support); // maybe
var support = myVid.canPlayType('video/ogg; codecs="theora,vorbis');
console.log(support); // probably
}三：事件 1. 事件處理方式 使用video元素或audio元素的事件方式有2種，第一種是監聽的方式，使用video元素或audio元素的addEventListener方法來對事件的發生進行監聽，該方法定義如下： videoElement.addEventListener(type,listener,userCapture); 如上的監聽方式和我們的JS的監聽的方式一樣，不做詳細介紹，我們來看看第二種事件監聽方式是為JavaScript腳本中常見的獲取事件句柄的方式，如下所示： <video id=”” src=”” onplay=”begin()”></video>
function begin(){}2. 事件介紹 Video元素與audio元素的相關事件
下面我們來看個demo,在播放過程中會經常觸發timeupdate事件來通知當前播放位置的改變，我們下面來看看timeupdate事件來顯示當前的播放進度。 HTML代碼如下： <video id="video" controls width=640 height=360 autoplay loop="loop"></video> <br/> 視頻地址：<input type="text" id="videoUrl"/> <input id="playButton" type="button" onclick="playOrPauseVideo()" value="播放"/> <span id="time"></span> JS代碼如下： function playOrPauseVideo(){
var videoUrl = document.getElementById("videoUrl").value;
var video = document.getElementById("video");
//使用事件監聽方式撲捉事件
video.addEventListener('timeupdate',function(){
var timedisplay = document.getElementById("time");
// 使用秒數來顯示當前播放進度
timedisplay.innerHTML = Math.floor(video.currentTime) + "/" + Math.floor(video.duration) + "(秒)";
},false);
if(video.paused) {
if(videoUrl != video.src) {
video.src = videoUrl;
video.load();
}else {
video.play();
}
document.getElementById("playButton").value = "暫停";
}else {
video.pause();
document.getElementById("playButton").value = "播放";
}
} |
