<audio> 標籤屬性：
- src：音樂的URL
- preload：預加載
- autoplay：自動播放
- loop：循環播放
- controls：瀏覽器自帶的控制條
Html
代碼
- <audio id=」media」 src=」http://www.abc.com/test.mp3″ controls></audio>
<video> 標籤屬性：
- src：視頻的URL
- poster：視頻封面，沒有播放時顯示的圖片
- preload：預加載
- autoplay：自動播放
- loop：循環播放
- controls：瀏覽器自帶的控制條
- width：視頻寬度
- height：視頻高度
Html代碼
- <video id=」media」 src=」http://www.abc.com/test.mp4″ controls width=」400px」 heigt=」400px」></video>
獲取HTMLVideoElement和HTMLAudioElement對象
Js代碼
- //audio能夠直接經過new建立對象
- Media = new Audio(「http://www.abc.com/test.mp3″);
- //audio和video均可以經過標籤獲取對象
- Media = document.getElementByIdx_x(「media」);
Media方法和屬性：
HTMLVideoElement 和 HTMLAudioElement 均繼承自 HTMLMediaElementjavascript
Js代碼
- //錯誤狀態
- Media.error; //null:正常
- Media.error.code; //1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效
- //網絡狀態
- Media.currentSrc; //返回當前資源的URL
- Media.src = value; //返回或設置當前資源的URL
- Media.canPlayType(type); //是否能播放某種格式的資源
- Media.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源
- Media.load(); //從新加載src指定的資源
- Media.buffered; //返回已緩衝區域，TimeRanges
- Media.preload; //none:不預載 metadata:預載資源信息 auto:
- //準備狀態
- Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking
- //回放狀態
- Media.currentTime = value; //當前播放的位置，賦值可改變位置
- Media.startTime; //通常爲0，若是爲流媒體或者不從0開始的資源，則不爲0
- Media.duration; //當前資源長度 流返回無限
- Media.paused; //是否暫停
- Media.defaultPlaybackRate = value;//默認的回放速度，能夠設置
- Media.playbackRate = value;//當前播放速度，設置後立刻改變
- Media.played; //返回已經播放的區域，TimeRanges，關於此對象見下文
- Media.seekable; //返回能夠seek的區域 TimeRanges
- Media.ended; //是否結束
- Media.autoPlay; //是否自動播放
- Media.loop; //是否循環播放
- Media.play(); //播放
- Media.pause(); //暫停
- //控制
- Media.controls;//是否有默認控制條
- Media.volume = value; //音量
- Media.muted = value; //靜音
- //TimeRanges(區域)對象
- TimeRanges.length; //區域段數
- TimeRanges.start(index) //第index段區域的開始位置
- TimeRanges.end(index) //第index段區域的結束位置
事件：
Js代碼
- eventTester = function(e){
- Media.addEventListener(e,function(){
- console.log((new Date()).getTime(),e);
- });
- }
- eventTester(「loadstart」); //客戶端開始請求數據
- eventTester(「progress」); //客戶端正在請求數據
- eventTester(「suspend」); //延遲下載
- eventTester(「abort」); //客戶端主動終止下載（不是由於錯誤引發），
- eventTester(「error」); //請求數據時遇到錯誤
- eventTester(「stalled」); //網速失速
- eventTester(「play」); //play()和autoplay開始播放時觸發
- eventTester(「pause」); //pause()觸發
- eventTester(「loadedmetadata」); //成功獲取資源長度
- eventTester(「loadeddata」); //
- eventTester(「waiting」); //等待數據，並不是錯誤
- eventTester(「playing」); //開始回放
- eventTester(「canplay」); //能夠播放，但中途可能由於加載而暫停
- eventTester(「canplaythrough」); //能夠播放，歌曲所有加載完畢
- eventTester(「seeking」); //尋找中
- eventTester(「seeked」); //尋找完畢
- eventTester(「timeupdate」); //播放時間改變
- eventTester(「ended」); //播放結束
- eventTester(「ratechange」); //播放速率改變
- eventTester(「durationchange」); //資源長度改變
- eventTester(「volumechange」); //音量改變
================================html
在之前，網頁沒有顯示視頻的一個標準，因此基本都要藉助插件來實現視頻的播放，插件過多或者插件自身問題，很容易引發瀏覽器的假死，形成用戶體驗不佳。html5 video標籤的出現改變了這一局面，可讓用戶在不用安裝任何插件的狀況下輕鬆的觀看視頻。html5
vedio和audio的使用技巧基本相同，本文僅以vedio做示例。先引用一段別人介紹的vedio標籤java
大多數用戶已經安裝了Flash插件（事實上，大概95%的上網用戶都裝有Flash的某個版本），但HTML 5的支持者正在推進一個開放的，不須要任何插件的視頻標準。這就是HTML 5的新標籤<video>帶來的構想，他提供了一個嵌入視頻（以及與其交互）而不須要相似Flash的私有插件的方法。
不幸的是，視頻並不是那麼簡單。不只僅是瀏覽器須要理解<video>標籤，並且須要一個必要的編碼譯碼器來播放視頻。明顯的解決方法只能是HTML 5規範的締造者們選擇一個視頻編碼譯碼器，而且讓每個瀏覽器製造商執行。
總之，這就是所推薦的打算。同時，這也是引發混亂的導火索。對於各類各樣編碼譯碼器的爭論就已經很煩雜了，但更悲劇的事情是，瀏覽器製造商們還不能就此達成統一。蘋果不肯意使用提議的Ogg Theora編碼譯碼器，但Opera和Mozilla也不肯意支付因爲他們的瀏覽器裝載H.264編碼譯碼器而形成的許可費用。Google同時支持二者，微軟面對爭論，遠遠的置身事外，由於他如今根本沒有計劃去支持HTML 5的視頻元素。 面對瀏覽器製造商的僵持局面，HTML 5善意的獨裁者Ian Hickson甩了甩他的手並說到去他媽的。因此HTML
5規範中沒有特別指名或規定的視頻編碼解碼器。」好吧，引用到這兒。 現在的狀況是，微軟終於陷進去了，但很悲劇的是，在IE 9中只支持H.264。同時，Googe終於在I/O大會上發佈了開源的視頻封裝格式webM和視頻編碼格式VP8。Opera、Mozilla、Chrome宣佈將徹底支持VP8，IE宣佈部分支持（須要裝一個插件，但若是我沒記錯的話，HTML 5的一個願景就是脫離瀏覽器插件，微軟真是讓人以爲悲劇）。 蘋果決定不支持VP8，喬布斯認爲VP8在質量或效率方面不如H.264，不能知足其產品的要求。另外最新消息代表VP8還有可能牽扯到專利的問題（若是真的侵犯專利的話，Opera和Firefox估計立刻會無視VP8的）。 說了這麼多，其實說到底就是，如今若是要在頁面中使用video標籤，須要考慮三種狀況，支持Ogg
Theora或者VP8（若是這玩意兒沒出事的話）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 九、Chrome），都不支持的（IE六、七、8）。好吧，如今讓咱們從技術層面來認識HTML 5的視頻，包括video標籤的使用，視頻對象能夠用到的媒介屬性和方法，以及媒介事件。 web
咱們來看看video標籤具體是怎麼使用的以及它有哪些屬性和方法。chrome
使用方法：瀏覽器
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
各瀏覽器目前對html5視頻格式的支持：緩存
| 瀏覽器 | 影音格式 | Ogg Theora | MP4(H.264) | WebM |
|---|---|---|---|
| Microsoft Internet Explorer9 | × | √ | × |
| Mozilla Firefox5+ | √ | × | √ |
| Google Chrome13+ | √ | √ | √ |
| Apple Safari5+ | × | √ | × |
| Opera11+ | √ | × | √ |
屬性列表：網絡
| 屬性ide |
值 |
描述 |
| autoplay | autoplay | 若是出現該屬性，則視頻在就緒後立刻播放。默認爲false |
| controls | controls | 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。這些控件是由瀏覽器來提供的，樣式也可能由於不一樣瀏覽器而不同 |
| height | pixels | 設置視頻播放器的高度。 |
| loop | loop | 若是出現該屬性，則當媒介文件完成播放後再次開始播放。 |
| preload | none、metadata、auto | 若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。若是使用"autoplay"，則忽略該屬性。
|
| src | url | 要播放的視頻的URL。 |
| poster | url | 預覽圖 |
媒介屬性
通常用於js操做
| 屬性 | 可讀狀態 | 描述 |
| error | 只讀 | 使用media.error返回一個MediaError對象代表當前的錯誤狀態，若是沒有出錯，返回null，共有4個可能值。
|
| currentSrc | 只讀 | 返回該媒介標籤的src屬性值 |
| networkState | 只讀 | 返回媒介的網絡狀態，共有4個可能值。
|
| preload | 可讀寫 | 可獲取或改變媒介標籤的preload屬性值 |
| buffered | 只讀 | 返回一個TimeRanges對象，確認瀏覽器已緩存媒介文件 |
| readyState | 只讀 |
返回媒介當前播放位置的就緒狀態，共有5個可能值。
|
| seeking | 只讀 | 返回一個布爾值，代表瀏覽器是否正在請求數據，ture表示瀏覽器正在請求數據，false表示瀏覽器已中止請求。 |
| seekable | 只讀 | 發揮一個TimeRanges對象，代表能夠對當前媒介資源進行請求。 |
| currentTime | 可讀寫 | 獲取或改變視頻的播放位置。單位爲秒 |
| startTime | 只讀 | 返回媒介文件播放的開始時間，一般爲0 |
| duration | 只讀 | 返回媒介文件總的播放時長 |
| played | 只讀 | 返回一個TimeRanges對象，標明瀏覽器已播放的媒介資源範圍 |
| paused | 只讀 | 返回一個布爾值，代表媒介是否暫停播放，ture表示媒介暫停播放，false表示媒介正在播放。 |
| ended | 只讀 | 返回一個布爾值，代表媒介是否已結束，ture表示媒介已經播放完畢，false表示還未播放完畢。 |
| defaultPlaybackRate | 可讀寫 | 返回媒介默認的播放速率，或對其賦值，改變媒介的默認播放速率。 |
| playbackRate | 可讀寫 | 返回當前的媒介播放速率，或對其賦值，改變當前的媒介播放速率 |
| autoplay | 可讀寫 | 返回一個布爾值，代表當前媒介是否設置了自動播放，ture表示當前媒介爲自動播放，false表示非自動播放，或對其賦值，設置是否自動播放。 |
| loop | 可讀寫 | 返回一個布爾值，代表當前媒介是否設置了循環播放，ture表示當前媒介設置了循環播放，false表示沒有設置循環播放，或對其賦值，設置是否循環播放。 |
| controls | 可讀寫 | 返回一個布爾值，代表當前媒介是否使用了瀏覽器默認的播放控制欄，ture表示加載了，false表示沒有加載，或對其賦值，設置是否使用瀏覽器默認的播放控制欄 |
| volume | 可讀寫 | 返回當前媒介的音量值，或對其賦值，改變媒介的播放音量，範圍爲0到1，0至關於靜音，1爲最大音量。 |
| muted | 可讀寫 | 返回一個布爾值，代表當前媒介播放是否開啓靜音，ture表示沒有開啓靜音，false表示靜音，或對其賦值，設置播放是否靜音。 |
很簡單，那咱們來作一個demo。(很奇怪，chrome拖動進度條到最後視頻有概率就死掉，自動播放到最後沒有問題，這是bug？仍是我本身的問題？)
代碼以下：
<!DOCTYPE html>
<html>
<head>
<title>html5 視頻標籤學習</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8;">
</head>
<body>
<header>
<h1>自定義視頻播放器</h1>
<div >
當前播放 ：《<span id="currentMovie">movie1</span>》<br>
當前播放速度 ： <span id="currentSpeed">1X</span><br>
當前聲音大小爲 ：<span id="currentVolume">100</span><br>
</div>
</header>
<section>
<article>
<video style="float:left;" id="testVideo" preload="metadata" src="movie.ogg" height="300" controls>
你的瀏覽器不支持html5視頻
</video>
<div style="float:left;margin-left:10px;">
<h3>播放列表</h3>
<ul>
<li><a>movie1</a></li>
<li><a>movie2</a></li>
<li><a>movie3</a></li>
<li><a>movie4</a></li>
</ul>
</div>
</article>
<article style="clear:both;">
<br/>
<button id="play">播放</button>
<button id="pause">暫停</button>
<button id="stop">中止</button>
<button id="prev">前一個</button>
<button id="next">後一個</button>
<button id="upVolume">音量+</button>
<button id="downVolume">音量-</button>
<button id="fastFoward">快進</button>
<button id="fastBackward">快退</button>
<br/>
從<input type="text" id="min" style="width:20px;" value="0"/>分跳轉到<input type="text" id="sec" style="width:20px;" value="0"/>播放
<button id="locate">確認</button>
</article>
<section>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id);};
var _video = $("testVideo");
//視頻列表
var playList = {
current : 0,
list : ["movie.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]
}
var videoUtil = {
//播放
play : function(){
_video.play();
},
//暫停
pause : function(){
_video.pause();
},
//中止
stop : function(){
_video.currentTime = 0;
_video.pause();
},
//下一個視頻
next : function(){
if(playList.current == playList.list.length-1){
playList.current = 0;
}else{
playList.current++;
}
_video.src=playList.list[playList.current];
_video.play();
},
//前一個視頻
prev : function(){
if(playList.current == 0){
playList.current = palyList.list.length-1;
}else{
playList.current--;
}
_video.src=playList.list[playList.current];
_video.play();
},
//加大聲音,每次加大1/10
upVolume : function(){
_video.volume += 0.1;
},
//減少聲音，每次減少1/10
downVolume : function(){
_video.volume -= 0.1;
},
//翻倍加快播放速度
fastFoward : function(){
//FF不支持playbackRate
if(_video.playbackRate){
_video.playbackRate = _video.playbackRate*2;
}else{
alert("對不起，你的瀏覽器不支持改變播放速度！");
}
},
//下降播放速度
fastBackward : function(){
if(_video.playbackRate){
_video.playbackRate = _video.playbackRate/2;
}else{
alert("對不起，你的瀏覽器不支持改變播放速度！");
}
},
//跳轉到指定時間點播放
locate : function(){
var min = $("min").value;
var sec = $("sec").value;
var time = parseInt(min)*60+parseInt(sec);
_video.currentTime = time;
_video.play();
},
bindEvent : function(){
var self = this;
//綁定頁面上各個按鈕的事件
var btns = document.getElementsByTagName("button");
for(var i = 0 ;i < btns.length ; i++){
var el = btns[i];
el.onclick = self[el.id];
}
//播放完畢自動播放下一個
_video.onended = function(){
var event = document.createEvent("HTMLEvents");
event.initEvent('click', true, true);
$("next").dispatchEvent(event);
}
//循環檢查視頻的當前狀態
setInterval(function(){
var speed = _video.playbackRate||1;
var movie = "movie"+playList.current;
var volume = parseInt(_video.volume*100);
$("currentMovie").innerHTML = movie;
$("currentSpeed").innerHTML = speed+"X";
$("currentVolume").innerHTML = volume;
},200);
}
};
window.onload = function(){
videoUtil.bindEvent();
}
</script>
</body>
</html>
jpg改rar