音視頻處理 視頻處理 基本內容 使用Flash技術處理HTML頁面中的視頻內容 包含音頻、動畫、網頁游戲等 特點 瀏覽器原生不支持(IE瀏覽器要求安裝ActiveX組件) 性能不好(不能過多地使用) 智能移動端並不支持Flash技術 命運 Flash的母公司A...
音視頻處理
視頻處理
基本內容
使用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
