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>
相關文章
- 1. HTML5音頻和視頻
- 2. HTML5音視頻
- 3. HTML5 網頁音頻和視頻（ 和 ）
- 4. HTML5視頻Video 音頻Audio
- 5. HTML5-Y音頻與視頻
- 6. html5篇——音頻/視頻
- 7. 12、HTML5視頻與音頻
- 8. html5 音頻和視頻（audio And video）
- 9. 前端之HTML5-----音頻和視頻
- 10. HTML5實現音頻和視頻嵌入
- 更多相關文章...
- • SQLite 視圖（View） - SQLite教程
- • SQL 視圖（Views） - SQL 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML5音頻和視頻
- 2. HTML5音視頻
- 3. HTML5 網頁音頻和視頻（ 和 ）
- 4. HTML5視頻Video 音頻Audio
- 5. HTML5-Y音頻與視頻
- 6. html5篇——音頻/視頻
- 7. 12、HTML5視頻與音頻
- 8. html5 音頻和視頻（audio And video）
- 9. 前端之HTML5-----音頻和視頻
- 10. HTML5實現音頻和視頻嵌入