Html5音頻和視頻播放示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5中的音頻和視頻</title>
</head>
<body>
<!--html4中的音頻視頻播放方式
代碼冗雜，加載失敗無法播放，一片空白..需要flash支持
-->
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="500" height="400"
codebase="swflash.cab#version=6,0,10,0">
<param name="allowFullScreen" value="true" />
<embed src="1117786.mp4" autostart="0" type="application/x-shockwave-flash" width="500" height="400">
</embed>
</object>
<!--html5音視頻播放
autoplay:自動播放,
controls；顯示控制條,
loop:是否循環播放,
preload:{預加載處理
auto:自動全部加載音視頻
none:不加載
metadata：預加載元數據(媒體字節數,第一幀，播放列表，持續時間等)
}，
poster:（video元素獨有）當預加載的視頻不存在時，顯示一張默認的圖片，
error:正常情況下為null,出現錯誤返回一個MediaError對象，有四種狀態:
MEDIA_ERR_ABORTED (數字為1):媒體下載過程中由于用戶操作原因終止;
MEDIA_ERR_NETWORK (數字為2):網絡錯誤媒體下載終止
MEDIA_ERR_DECODE (數字為3):媒體解碼錯誤
MEDIA_ERR_SRC_NOT_SUPPORTED (數字為4):媒體格式不支持，
net
-->
<!--http://v.youku.com/v_show/id_XMjE4MDU1MDE2.html-->
<video id="video" src="1117786.mp4" preload="a" loop="loop" autoplay="autoplay" controls="controls" width="500px" height="450px">
您的瀏覽器不支持video！
<!--source :為媒體文件指定多個播放格式和編碼方式-->
<source src="1117786.mp4" type="video/ogg">
<script type="text/javascript">
var video = document.getElementById("video");
//監聽錯誤信息
video.addEventListener("error",function(){
var error = video.error;
var code = error.code;
switch (code){
case 1 :
console.info("視頻加載被終止");
break;
case 2 :
console.info("網絡原因,視頻加載被終止");
break;
case 3 :
console.info("解碼失敗");
break;
case 4 :
console.info("視頻格式不支持");
break;
}
},false);
/*
* networkState:網絡狀態屬性，
* 在加載過程中讀取當前網絡的狀態,
* NETWORK_EMPTY（數字為 0）:網絡鏈接初始狀態,
* NETWORK_IDLE（數字為1）:已經選擇好媒體播放格式,未建立網絡鏈接,
* NETWORK_LOADING（數字為2）:媒體加載中...，
* NETWORK_NO_SOURCE（數字為3）:沒有支持的編碼格式
*
* */
//獲取networkState屬性
/**
* 此處針對網絡媒體而言,播放本地視頻 net===3
* @type {Number}
*/
var net = video.networkState;
if(net==0){
console.info('網絡鏈接初始狀態..');
}else if (net==1){
console.info('已經選擇好媒體播放格式,未建立網絡鏈接');
}else if (net==2){
console.info('媒體加載中...');
}else if(net==3){
console.info('沒有支持的編碼格式');
}
//currentSrc:為只讀屬性,獲取播放文件的src地址，本地文件為空
var src = video.currentSrc;
console.info("對應的src為:"+src);
//buffered:屬性
/**
* 返回一個對象，實現了TimeRanges接口，
* 以確認瀏覽器是否緩存數據。
* TimeRanges:表示一段時間范圍，大多數情況下TimeRanges對象表示的時間范圍是一個從0開始的范圍。
*
* TimeRanges:有一個length屬性,表示有多少個時間范圍,大多數情況下，存在時間范圍時該值為1,不存在時為0.
* 有兩個方法，start(index) 和end(index),大多數情況下index設置為0即可;
*
*
* @type {TimeRanges}
*/
var buf = video.buffered;
console.info(buf.length);
/**
* readyState屬性:返回當前媒體播放位置的就緒狀態，有五個可能值。
* HAVE_NOTHING:(數字為0)沒有獲取到媒體的任何信息,當前播放位置沒有可播放的數據.
* HAVE_METADATA:(數字為1)已經獲取到足夠的媒體數據,但是當前位置的媒體數據無效.
* HAVE_CURRENT_DATA:(數字為2):當前位置已經有數據可以播放，但是沒有獲取到讓播放器前進的數據。（
* 沒有獲取到下一幀的數據或者播放已經完成）
* HAVE_FUTURE_DATA:(數字3)表示當前位置已經獲取到數據，可獲取到讓播放器前進的數據。為視頻文件時，表示當前幀和下一幀
* 數據都獲取到了,當當前位置是最后一幀時表示，readyState不可能為3狀態(HAVE_FUTURE_DATA)。
* HAVE_ENOUGH_DATA:(數字4)表示當前位置已經獲取到數據，可獲取到讓播放器前進的數據，
* 瀏覽器以某一速度加載，保證足夠的數據進行播放。
* @type {number|Number}
*/
var state = video.readyState;
console.info("readyState屬性為:"+state);
/**
* seekable 和seeking屬性:表示瀏覽器是否正在請求特定播放位置的數據.
*
* seeking屬性返回boolean值，true表示正在請求，false表示停止請求。
*
* seekable屬性返回一個TimeRanges對象,表示請求到的時間范圍。
*
* 均為只讀屬性。
* @type {TimeRanges}
*/
var seekable = video.seekable;
var seeking = video.seeking;
console.info("瀏覽器是否正在請求特定播放位置的數據:"+seeking);
/**
*
* @type {Number}
*/
var cur = video.currentTime;
var startTime = video.startTime;//開始播放的時間，一般為0
var duration = video.duration;//媒體文件總的播放時間.
console.info(cur+","+startTime+","+duration);
//瀏覽器支持不一致: Firefox:0 ,undefined,NaN Chrome: 0,0,NaN
/**
*played :讀取已經播放的時間段
* @type {TimeRanges}
* */
var play = video.played;
/**
* 是否為暫停狀態，
* true表示暫停播放，
* false表示正在播放
* @type {boolean}
*/
var paused = video.paused;
/**
* ended屬性：boolean值
* true:表示播放完畢
* false：表示正在播放
* @type {boolean}
*/
var ended= video.ended;
/**
* defaultPlaybackRate:
* 修改或者讀取默認的播放速率
* playbackRate:
* 修改或者讀取當前的播放速率
* @type {Number}
*/
var rate = video.defaultPlaybackRate;
var playRate =video.playbackRate;
console.info("當前媒體的播放速率:"+rate);
/**
* volume屬性: 讀取或者修改默認音量，從0到1.0為靜音，1為最大音量.
* @type {Number|CSSStyleDeclaration.volume|*}
*/
var volume = video.volume;
volume=0.4;
/**
* muted:返回boolean值。
* true:表示靜音狀態
* @type {boolean}
*/
var muted = video.muted;
console
.info("當前音量:"+volume+","+muted);// 1 ,false
</script>
</video>
<input type="button" onclick="pause();" value="暫停">
<input type="button" onclick="play();" value="播放">
<script>
var video = document.getElementById("video");
function pause(){
video.pause();
console.warn("視頻已經暫停");
//判斷是否為暫停狀態
console.info(video.paused);
}
function play(){
video.play();
console.warn("視頻開始播放...");
}
</script>
<audio >
<!--
音頻和視頻的屬性和方法，以及事件處理基本一致。
-->
</audio>
</body>
</html></pre>