1. 程式人生 > >HTML5學習筆記(二)視訊與音訊處理

HTML5學習筆記(二)視訊與音訊處理

一、<video>

 1、<video>是H5的新標籤,用來處理視訊,在此之前,各網站用來處理視訊一直使用flash技術

    flash的缺點有以下幾方面,首先原生瀏覽器原生不支援,需要外掛,其次過多的使用會導致網站效能變差,最後就是智慧移動端並不支援Flash技術

   與flash相比,<video>的優勢,幾乎所有瀏覽器原生支援<video>元素,效能更高,開發更容易,並且移動端支援非常好,

2、<video>支援的視訊格式
        MP4格式 - 目前比較主流
        OGG格式 - 多用於移動端
        WebM格式 - 目前唯一支援超高清格式, 在HTML頁面中支援超高清格式(HTML5)

3、如何使用<video>

      如果當前瀏覽器不支援<video>元素,在<video>元素內編寫提示內容

      使用<source>元素
      <video>

        <strong>抱歉,你的瀏覽器不支援播放</strong>
        <source src="一種視訊格式" />
        <source src="一種視訊格式" />
        <source src="一種視訊格式" />
     </video>

4、<video>元素的屬性
         src - 引入視訊檔案的路徑
          autoplay - 自動播放視訊
          controls - 提供控制面板
          loop - 表示迴圈播放
          poster - 設定播放之前顯示的圖片
          width和height - 設定顯示視訊的寬度和高度
          preload - 預載入
             auto - (預設值)自動載入
         none - 不載入
         metadata - 只加載視訊的基本資訊(不含視訊)

例、<video src="1.mp4"  controls  poster="2.png" width="640" height="400" style="background:black"></video>

5、高階使用內容

①方法
     play() - 播放視訊
     pause() - 暫停視訊
     load() - 載入視訊
     canPlayType() - 判斷當前瀏覽器是否支援指定視訊格式

 ② 事件
     play - 當視訊播放時被觸發
     pause - 當視訊暫停時被觸發
     ended - 當視訊結束時被觸發
     error - 當視訊錯誤時被觸發
     canplay - 不考慮整體情況下,只要能播放,就播放
     canplaythrough - 考慮整體情況下,只要能播放,就播放
     progress - 表示視訊載入的進度
 ③ 屬性 - 用於判斷
      paused - 表示判斷當前視訊是否暫停
           返回Boolean值,true表示暫停,false表示播放
      ended - 表示判斷當前視訊是否播放完畢
           返回Boolean值,true表示完畢
     duration - 表示當前視訊的時長
     currentTime - 表示當前視訊播放的位置

 

二、<audio>

1、<audio>元素支援音訊格式
        MP3 - 目前最主流            OGG                    WAV

2、使用<audio>元素
       第一種 - 只支援一種音訊格式
         <audio src="音訊檔案的路徑"></audio>
       第二種 - 同時引入多個音訊格式
         <audio>
             <source src="一種音訊格式" />
             <source src="一種音訊格式" />
             <source src="一種音訊格式" />
        </audio>

3、屬性與和方法與<video>基本相同,不做累述