音視頻處理
視頻處理
基本內容
使用Flash技術處理HTML頁面中的視頻內容
包含音頻、動畫、網頁遊戲等
特色
瀏覽器原生不支持(IE瀏覽器要求安裝ActiveX組件)
性能很差(不能過多地使用)
智能移動端並不支持Flash技術
命運
Flash的母公司Adobe公開宣佈放棄
目前用於替代Flash技術最好的選擇 - HTML5
幾乎全部瀏覽器原生支持<video>元素
性能更高
智能移動端支持很是好
如何實現視頻處理
<video>元素
若是當前瀏覽器不支持<video>元素
在<video>元素內編寫提示內容
屬性
src - 引入視頻文件的路徑
autoplay - 自動播放視頻
使用<source>元素
<video>
<source src="一種視頻格式" />
<source src="一種視頻格式" />
<source src="一種視頻格式" />
</video>
<video>支持的視頻格式
MP4格式 - 目前比較主流
OGG格式 - 多用於移動端
WebM格式 - 目前惟一支持超高清格式
在HTML頁面中支持超高清格式(HTML5)
由Google公司推出的
<video>元素的屬性
src - 引入視頻文件的路徑
autoplay - 自動播放視頻
controls - 提供控制面板
loop - 表示循環播放
poster - 設置播放以前顯示的圖片
width和height - 設置顯示視頻的寬度和高度
preload - 預加載
auto - (默認值)自動加載
none - 不加載
metadata - 只加載視頻的基本信息(不含視頻)
高級內容
方法
play() - 播放視頻
pause() - 暫停視頻
load() - 加載視頻
canPlayType() - 判斷當前瀏覽器是否支持指定視頻格式
事件
play - 當視頻播放時被觸發
pause - 當視頻暫停時被觸發
ended - 當視頻結束時被觸發
error - 當視頻錯誤時被觸發
canplay - 不考慮總體狀況下,只要能播放,就播放
canplaythrough - 考慮總體狀況下,只要能播放,就播放
progress - 表示視頻加載的進度
屬性 - 用於判斷
paused - 表示判斷當前視頻是否暫停
返回Boolean值,true表示暫停,false表示播放
ended - 表示判斷當前視頻是否播放完畢
返回Boolean值,true表示完畢
duration - 表示當前視頻的時長
currentTime - 表示當前視頻播放的位置
音頻處理
<audio>元素
第一種 - 只支持一種音頻格式
<audio src="音頻文件的路徑"></audio>
第二種 - 同時引入多個音頻格式
<audio>
<source src="一種音頻格式" />
<source src="一種音頻格式" />
<source src="一種音頻格式" />
</audio>
<audio>元素支持音頻格式
MP3 - 目前最主流
OGG
WAV瀏覽器