Html5音頻和視頻播放示例
2018-07-20 來源：open-open
<!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:是否循環(huán)播放,
preload:{預(yù)加載處理
auto:自動全部加載音視頻
none:不加載
metadata：預(yù)加載元數(shù)據(jù)(媒體字節(jié)數(shù),第一幀，播放列表，持續(xù)時間等)
}，
poster:（video元素獨有）當預(yù)加載的視頻不存在時，顯示一張默認的圖片，
error:正常情況下為null,出現(xiàn)錯誤返回一個MediaError對象，有四種狀態(tài):
MEDIA_ERR_ABORTED (數(shù)字為1):媒體下載過程中由于用戶操作原因終止;
MEDIA_ERR_NETWORK (數(shù)字為2):網(wǎng)絡(luò)錯誤媒體下載終止
MEDIA_ERR_DECODE (數(shù)字為3):媒體解碼錯誤
MEDIA_ERR_SRC_NOT_SUPPORTED (數(shù)字為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");
//監(jiān)聽錯誤信息
video.addEventListener("error",function(){
var error = video.error;
var code = error.code;
switch (code){
case 1 :
console.info("視頻加載被終止");
break;
case 2 :
console.info("網(wǎng)絡(luò)原因,視頻加載被終止");
break;
case 3 :
console.info("解碼失敗");
break;
case 4 :
console.info("視頻格式不支持");
break;
}
},false);
/*
* networkState:網(wǎng)絡(luò)狀態(tài)屬性，
* 在加載過程中讀取當前網(wǎng)絡(luò)的狀態(tài),
* NETWORK_EMPTY（數(shù)字為 0）:網(wǎng)絡(luò)鏈接初始狀態(tài),
* NETWORK_IDLE（數(shù)字為1）:已經(jīng)選擇好媒體播放格式,未建立網(wǎng)絡(luò)鏈接,
* NETWORK_LOADING（數(shù)字為2）:媒體加載中...，
* NETWORK_NO_SOURCE（數(shù)字為3）:沒有支持的編碼格式
*
* */
//獲取networkState屬性
/**
* 此處針對網(wǎng)絡(luò)媒體而言,播放本地視頻 net===3
* @type {Number}
*/
var net = video.networkState;
if(net==0){
console.info('網(wǎng)絡(luò)鏈接初始狀態(tài)..');
}else if (net==1){
console.info('已經(jīng)選擇好媒體播放格式,未建立網(wǎng)絡(luò)鏈接');
}else if (net==2){
console.info('媒體加載中...');
}else if(net==3){
console.info('沒有支持的編碼格式');
}
//currentSrc:為只讀屬性,獲取播放文件的src地址，本地文件為空
var src = video.currentSrc;
console.info("對應(yīng)的src為:"+src);
//buffered:屬性
/**
* 返回一個對象，實現(xiàn)了TimeRanges接口，
* 以確認瀏覽器是否緩存數(shù)據(jù)。
* TimeRanges:表示一段時間范圍，大多數(shù)情況下TimeRanges對象表示的時間范圍是一個從0開始的范圍。
*
* TimeRanges:有一個length屬性,表示有多少個時間范圍,大多數(shù)情況下，存在時間范圍時該值為1,不存在時為0.
* 有兩個方法，start(index) 和end(index),大多數(shù)情況下index設(shè)置為0即可;
*
*
* @type {TimeRanges}
*/
var buf = video.buffered;
console.info(buf.length);
/**
* readyState屬性:返回當前媒體播放位置的就緒狀態(tài)，有五個可能值。
* HAVE_NOTHING:(數(shù)字為0)沒有獲取到媒體的任何信息,當前播放位置沒有可播放的數(shù)據(jù).
* HAVE_METADATA:(數(shù)字為1)已經(jīng)獲取到足夠的媒體數(shù)據(jù),但是當前位置的媒體數(shù)據(jù)無效.
* HAVE_CURRENT_DATA:(數(shù)字為2):當前位置已經(jīng)有數(shù)據(jù)可以播放，但是沒有獲取到讓播放器前進的數(shù)據(jù)。（
* 沒有獲取到下一幀的數(shù)據(jù)或者播放已經(jīng)完成）
* HAVE_FUTURE_DATA:(數(shù)字3)表示當前位置已經(jīng)獲取到數(shù)據(jù)，可獲取到讓播放器前進的數(shù)據(jù)。為視頻文件時，表示當前幀和下一幀
* 數(shù)據(jù)都獲取到了,當當前位置是最后一幀時表示，readyState不可能為3狀態(tài)(HAVE_FUTURE_DATA)。
* HAVE_ENOUGH_DATA:(數(shù)字4)表示當前位置已經(jīng)獲取到數(shù)據(jù)，可獲取到讓播放器前進的數(shù)據(jù)，
* 瀏覽器以某一速度加載，保證足夠的數(shù)據(jù)進行播放。
* @type {number|Number}
*/
var state = video.readyState;
console.info("readyState屬性為:"+state);
/**
* seekable 和seeking屬性:表示瀏覽器是否正在請求特定播放位置的數(shù)據(jù).
*
* seeking屬性返回boolean值，true表示正在請求，false表示停止請求。
*
* seekable屬性返回一個TimeRanges對象,表示請求到的時間范圍。
*
* 均為只讀屬性。
* @type {TimeRanges}
*/
var seekable = video.seekable;
var seeking = video.seeking;
console.info("瀏覽器是否正在請求特定播放位置的數(shù)據(jù):"+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 :讀取已經(jīng)播放的時間段
* @type {TimeRanges}
* */
var play = video.played;
/**
* 是否為暫停狀態(tài)，
* 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:表示靜音狀態(tài)
* @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("視頻已經(jīng)暫停");
//判斷是否為暫停狀態(tài)
console.info(video.paused);
}
function play(){
video.play();
console.warn("視頻開始播放...");
}
</script>
<audio >
<!--
音頻和視頻的屬性和方法，以及事件處理基本一致。
-->
</audio>
</body>
</html>
標簽： 代碼 媒體 網(wǎng)絡(luò)
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
下一篇:Java 讀取漢字全拼簡寫
最新資訊
熱門推薦