一根灯、如何使用HTML實現(xiàn)視頻處理
-
video標(biāo)簽
如果當(dāng)前瀏覽器不支持video径缅，可以在veido里面編寫提示內(nèi)容 src - 引入視頻文件的路徑 autoplay - 自動播放視頻 -
souce元素
<vedio> <source src="一種視頻格式"/> <source src="一種視頻格式"/> <source src="一種視頻格式"/> </vedio> -
video支持的視頻格式
MP4 - 目前比較主流 OGG - 多用于移動端 WebM - 目前唯一支持超高清格式 在HTML頁面中支持超高清格式HTML5 由Google公司推出 -
video元素的屬性
src - 視頻路徑 autoplay - 自動播放 controls屬性 - 提供視頻播放的控制面板，只有屬性名烙肺，沒有屬性值 loop - 視頻的循環(huán)播放 poster屬性 - 在視頻播放之前纳猪，顯示一張圖片 width/height - 設(shè)置顯示視頻的寬度和高度 preload - 預(yù)加載 auto-(默認值)自動加載 none-不加載 metadata-只加載視頻的基本信息(不含視頻) -
擴展- Web前端 - 移動端
移動智能終端 iPhone Android Window Mobile BlackBerry WebOS - 全鍵盤+觸摸屏 塞班 - 諾基亞 MeeGo 移動跨平臺 - HTML/CSS/JAVASCRIPT 一次編寫，到處運行(phoneGap)
二桃笙、視頻處理
-
方法
play() - 播放視頻 pause() - 暫停視頻 load() - 重新加載音頻/視頻元素 canPlayType() - 判斷當(dāng)前瀏覽器是否支持指定視頻格式 -
事件
onplay - 當(dāng)視頻開始播放時調(diào)用 onpause - 當(dāng)視頻暫停時觸發(fā) onended - 當(dāng)視頻結(jié)束時被觸發(fā) onerror - 當(dāng)視頻錯誤時被觸發(fā) oncanplay - 當(dāng)整個媒體可以順利播放時氏堤，就會觸發(fā)這個事件 oncanplaythrough - 不考慮整體狀態(tài)，只要下載了一定的可放幀會會觸發(fā)這個事件 onprogress - 用于更新媒體的下載進度搏明，會周期性的觸發(fā) -
屬性
paused - 表示判斷當(dāng)前是否暫停鼠锈，true表示暫停 ended - 表示判斷當(dāng)前視頻是否播放完畢，true表示播放完畢 duration - 表示當(dāng)前視頻的時長,單位為s currentTime - 表示當(dāng)前視頻播放的位置 -
video元素
當(dāng)video視頻全屏?xí)r星著，瀏覽器會把video放到最前端购笆，圖片是有顯示的，但被視頻覆蓋了 利用video事件完成廣告效果 bug: 不能全屏 解決方案： 等到HTML5更新 使用video元素提供的高級編程自己實現(xiàn) 使用目前封裝好的video的JS庫 video.js
播放帶有字幕的視頻：
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
//可切換中英文字幕kind="captions"
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
三虚循、音頻處理
-
audio元素
第一種：只支持一種音頻格式
<audio src="音頻文件路徑"></audio>第二種： 同時引入多個音頻格式
<audio> <source src="一種音頻格式"> <source src="一種音頻格式"> <source src="一種音頻格式"> </audio> -
audio元素支持的音頻格式
MP3 - 目前最主流 OGG WAV
