一、如何使用HTML實(shí)現(xiàn)視頻處理

1. video標(biāo)簽

        如果當(dāng)前瀏覽器不支持video，可以在veido里面編寫提示內(nèi)容
        src - 引入視頻文件的路徑
        autoplay - 自動(dòng)播放視頻
   

2. souce元素

       <vedio>
          <source src="一種視頻格式"/>
          <source src="一種視頻格式"/>
          <source src="一種視頻格式"/>
       </vedio>
   

3. video支持的視頻格式

       MP4 - 目前比較主流
       OGG -  多用于移動(dòng)端
       WebM - 目前唯一支持超高清格式
           在HTML頁面中支持超高清格式HTML5
           由Google公司推出
   

4. video元素的屬性

      src - 視頻路徑
      autoplay - 自動(dòng)播放
      controls屬性 - 提供視頻播放的控制面板，只有屬性名，沒有屬性值
      loop - 視頻的循環(huán)播放
      poster屬性 - 在視頻播放之前，顯示一張圖片
      width/height - 設(shè)置顯示視頻的寬度和高度
   
      preload - 預(yù)加載
         auto-(默認(rèn)值)自動(dòng)加載
         none-不加載
         metadata-只加載視頻的基本信息(不含視頻)
   

5. 擴(kuò)展- Web前端 - 移動(dòng)端

      移動(dòng)智能終端
         iPhone 
         Android 
         Window Mobile 
         BlackBerry
         WebOS - 全鍵盤+觸摸屏
         塞班 - 諾基亞
         MeeGo
   
      移動(dòng)跨平臺(tái) - HTML/CSS/JAVASCRIPT
   
         一次編寫，到處運(yùn)行(phoneGap)
   

二、視頻處理

1. 方法

       play() - 播放視頻
       pause() - 暫停視頻
       load() - 重新加載音頻/視頻元素
       canPlayType() - 判斷當(dāng)前瀏覽器是否支持指定視頻格式
   

2. 事件

        onplay - 當(dāng)視頻開始播放時(shí)調(diào)用
        onpause - 當(dāng)視頻暫停時(shí)觸發(fā)
        onended - 當(dāng)視頻結(jié)束時(shí)被觸發(fā)
        onerror - 當(dāng)視頻錯(cuò)誤時(shí)被觸發(fā)
        oncanplay - 當(dāng)整個(gè)媒體可以順利播放時(shí)，就會(huì)觸發(fā)這個(gè)事件
        oncanplaythrough - 不考慮整體狀態(tài)，只要下載了一定的可放幀會(huì)會(huì)觸發(fā)這個(gè)事件
        onprogress - 用于更新媒體的下載進(jìn)度，會(huì)周期性的觸發(fā)
   

3. 屬性

        paused - 表示判斷當(dāng)前是否暫停，true表示暫停
        ended - 表示判斷當(dāng)前視頻是否播放完畢，true表示播放完畢
        duration - 表示當(dāng)前視頻的時(shí)長,單位為s
        currentTime - 表示當(dāng)前視頻播放的位置
   

4. video元素

    當(dāng)video視頻全屏?xí)r，瀏覽器會(huì)把video放到最前端，圖片是有顯示的，但被視頻覆蓋了
    利用video事件完成廣告效果
       bug: 不能全屏
       解決方案：
   
         等到HTML5更新
         使用video元素提供的高級(jí)編程自己實(shí)現(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>  

三、音頻處理

1. audio元素

   第一種：只支持一種音頻格式

      <audio src="音頻文件路徑"></audio>
   

   第二種： 同時(shí)引入多個(gè)音頻格式

      <audio>
        <source src="一種音頻格式">
        <source src="一種音頻格式">
        <source src="一種音頻格式">
      </audio>
   

2. audio元素支持的音頻格式

         MP3 - 目前最主流
         OGG
         WAV