H5小內容(二)

音視頻處理
   視頻處理
     基本內容
       使用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瀏覽器

相關文章
相關標籤/搜索