HTML5學習筆記(二)視訊與音訊處理
一、<video>
1、<video>是H5的新標籤,用來處理視訊,在此之前,各網站用來處理視訊一直使用flash技術
flash的缺點有以下幾方面,首先原生瀏覽器原生不支援,需要外掛,其次過多的使用會導致網站效能變差,最後就是智慧移動端並不支援Flash技術
與flash相比,<video>的優勢,幾乎所有瀏覽器原生支援<video>元素,效能更高,開發更容易,並且移動端支援非常好,
2、<video>支援的視訊格式
MP4格式 - 目前比較主流
OGG格式 - 多用於移動端
WebM格式 - 目前唯一支援超高清格式, 在HTML頁面中支援超高清格式(HTML5)
3、如何使用<video>
如果當前瀏覽器不支援<video>元素,在<video>元素內編寫提示內容
使用<source>元素
<video>
<strong>抱歉,你的瀏覽器不支援播放</strong>
<source src="一種視訊格式" />
<source src="一種視訊格式" />
<source src="一種視訊格式" />
</video>
4、<video>元素的屬性
src - 引入視訊檔案的路徑
autoplay - 自動播放視訊
controls - 提供控制面板
loop - 表示迴圈播放
poster - 設定播放之前顯示的圖片
width和height - 設定顯示視訊的寬度和高度
preload - 預載入
auto - (預設值)自動載入
none - 不載入
metadata - 只加載視訊的基本資訊(不含視訊)
例、<video src="1.mp4" controls poster="2.png" width="640" height="400" style="background:black"></video>
5、高階使用內容
①方法
play() - 播放視訊
pause() - 暫停視訊
load() - 載入視訊
canPlayType() - 判斷當前瀏覽器是否支援指定視訊格式
② 事件
play - 當視訊播放時被觸發
pause - 當視訊暫停時被觸發
ended - 當視訊結束時被觸發
error - 當視訊錯誤時被觸發
canplay - 不考慮整體情況下,只要能播放,就播放
canplaythrough - 考慮整體情況下,只要能播放,就播放
progress - 表示視訊載入的進度
③ 屬性 - 用於判斷
paused - 表示判斷當前視訊是否暫停
返回Boolean值,true表示暫停,false表示播放
ended - 表示判斷當前視訊是否播放完畢
返回Boolean值,true表示完畢
duration - 表示當前視訊的時長
currentTime - 表示當前視訊播放的位置
二、<audio>
1、<audio>元素支援音訊格式
MP3 - 目前最主流 OGG WAV
2、使用<audio>元素
第一種 - 只支援一種音訊格式
<audio src="音訊檔案的路徑"></audio>
第二種 - 同時引入多個音訊格式
<audio>
<source src="一種音訊格式" />
<source src="一種音訊格式" />
<source src="一種音訊格式" />
</audio>
3、屬性與和方法與<video>基本相同,不做累述