HTML5_音視頻標簽 和

HTML5_音視頻標簽 <audio> 和 <video>

audio 和 video 都是 inline行內元素

 

如果瀏覽器支持，則不顯示標簽文本

IE8 不支持 audio video 標簽

http://s8.qhimg.com/share/audio/piano1/a4.mp3

http://pic.ibaotu.com/00/60/75/01J888piCPNw.mp4

http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4

 

• 瀏覽器對於資源的格式，支持不一
• 做以下兼容，瀏覽器會選擇最優格式運行

•         <audio controls>
              <source src="./audio/IDon'tWannaLiveForever.mp3" type="audio/mpeg"/>
              <source src="./audio/IDon'tWannaLiveForever.ogg" type="audio/ogg" codecs="vorbis"/>
              <source src="./audio/IDon'tWannaLiveForever.acc" type="audio/acc" codecs="aac"/>
              您的瀏覽器不支持音視頻，建議下載<a href="./audio/IDon'tWannaLiveForever.mp3">手動下載</a>
          </audio>
      
          <video id="my_video" controls>
              <source src="./video/CapitalCities-KangarooCourt.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
              <source src="./video/CapitalCities-KangarooCourt.ogg" type='video/ogg; codecs="theora, vorbis"'/>
              <source src="./video/CapitalCities-KangarooCourt.webm" type='video/webm; codecs="vp8, vorbis"'/>
              您的瀏覽器不支持音視頻，建議下載<a href="./video/CapitalCities-KangarooCourt.mp4">手動下載</a>
          </video>

• video 的屬性
• width: 320;

單位 px 可寫可不寫

• height: 480px;

音視頻 即使設置的是正方形，也會按照寬高比例進行顯示

• poster: "./img/1.jpg";

海報幀，在播放前或者跳幀前顯示

• autoplay

有些高版本瀏覽器為了節約內存，已經禁止

• loop: "loop";

開啟循環播放

• muted: "muted";
• preload: ;

none;    提示該資源不需要緩存

metadata;    提示用戶不需要查看該視頻
auto;    不管用戶是否需要，都會加載整個視頻
"";    等同於 auto;

• 常用 js 事件

onloadedmetadata    當音頻元數據加載完畢時觸發。
ontimeupdate    播放過程中實時觸發。
onvolumechange    音量改變時觸發

• 視頻:

onabort    在播放被終止時觸發,例如, 當播放中的視頻重新開始播放時會觸發這個事件。

oncanplay    在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發。這個事件對應 CAN_PLAY的readyState。
 
oncanplaythrough    在媒體的 readyState 變為 CAN_PLAY_THROUGH 時觸發，表明媒體可以在保持當前的下載速度的情況下不被中斷地播放完畢。注意：手動設置 currentTime 會使得 firefox 觸發一次 canplaythrough 事件，其他瀏覽器或許不會如此。

ondurationchange    元信息已載入或已改變，表明媒體的長度發生了改變。例如，在媒體已被加載足夠的長度從而得知總長度時會觸發這個事件。

onemptied    媒體被清空（初始化）時觸發。

onended    播放結束時觸發。

onerror    在發生錯誤時觸發。元素的error屬性會包含更多信息。參閱 Error handling 獲得詳細信息。

onloadeddata    媒體的第一幀已經加載完畢。

onloadedmetadata    媒體的元數據已經加載完畢，現在所有的屬性包含了它們應有的有效信息。

onloadstart    在媒體開始加載時觸發。

onmozaudioavailable    當音頻數據緩存並交給音頻層處理時

onpause    播放暫停時觸發。

onplay       在媒體回放被暫停后再次開始時觸發。即，在一次暫停事件后恢復媒體回放。

onplaying    在媒體開始播放時觸發（不論是初次播放、在暫停后恢復、或是在結束后重新開始）。

onprogress       告知媒體相關部分的下載進度時周期性地觸發。有關媒體當前已下載總計的信息可以在元素的buffered屬性中獲取到。

onratechange    在回放速率變化時觸發。

onseeked    在跳躍操作完成時觸發。

onseeking     在跳躍操作開始時觸發。

onstalled     在嘗試獲取媒體數據，但數據不可用時觸發。

onsuspend     在媒體資源加載終止時觸發，這可能是因為下載已完成或因為其他原因暫停。

ontimeupdate    元素的currentTime屬性表示的時間已經改變。

onvolumechange       在音頻音量改變時觸發（既可以是 volume 屬性改變，也可以是 muted 屬性改變）.。

onwaiting       在一個待執行的操作（如回放）因等待另一個操作（如跳躍或下載）被延遲時觸發

 

• 音頻:

onabort       在播放被終止時觸發,例如, 當播放中的視頻重新開始播放時會觸發這個事件。

oncanplay       在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發。這個事件對應 CAN_PLAY 的 readyState。

oncanplaythrough    在媒體的 readyState 變為 CAN_PLAY_THROUGH 時觸發，表明媒體可以在保持當前的下載速度的情況下不被中斷地播放完畢。注意：手動設置 currentTime 會使得firefox觸發一次 canplaythrough 事件，其他瀏覽器或許不會如此。 

ondurationchange       元信息已載入或已改變，表明媒體的長度發生了改變。例如，在媒體已被加載足夠的長度從而得知總長度時會觸發這個事件。

onemptied    媒體被清空（初始化）時觸發。

onended       播放結束時觸發。

onerror    在發生錯誤時觸發。元素的 error 屬性會包含更多信息。參閱 Error handling 獲得詳細信息。

onloadeddata       媒體的第一幀已經加載完畢。

onloadedmetadata       媒體的元數據已經加載完畢，現在所有的屬性包含了它們應有的有效信息。

onloadstart       在媒體開始加載時觸發。

onmozaudioavailable       當音頻數據緩存並交給音頻層處理時

onpause       播放暫停時觸發。

onplay       在媒體回放被暫停后再次開始時觸發。即，在一次暫停事件后恢復媒體回放。

onplaying       在媒體開始播放時觸發（不論是初次播放、在暫停后恢復、或是在結束后重新開始）。

onprogress       告知媒體相關部分的下載進度時周期性地觸發。有關媒體當前已下載總計的信息可以在元素的 buffered 屬性中獲取到。

ratechange       在回放速率變化時觸發。

onseeked       在跳躍操作完成時觸發。

onseeking       在跳躍操作開始時觸發。

onstalled       在嘗試獲取媒體數據，但數據不可用時觸發。

onsuspend       在媒體資源加載終止時觸發，這可能是因為下載已完成或因為其他原因暫停。

ontimeupdate       元素的 currentTime 屬性表示的時間已經改變。

onvolumechange       在音頻音量改變時觸發（既可以是 volume 屬性改變，也可以是 muted 屬性改變）.。

onwaiting       在一個待執行的操作（如回放）因等待另一個操作（如跳躍或下載）被延遲時觸發

• 常用 js 控制函數

myVideo.play()    媒體播放

myVideo.pause()    媒體暫停

myVideo.load()    重新加載媒體

• 常用的 js 屬性

myVideo.duration;

myVideo.currentTime;        可讀可寫

myVideo.volume;    /* 0-1 的值，靜音的時候為 0，音量滿格時為 1 */

myVideo.muted;    /* 返回當前音量狀態，true 表示靜音 */

myVideo.paused;    /* true 表示視頻暫停了 */

myVideo.ended;    /* true 表示視頻播放到最后了 */

myVideo.error          媒體發生錯誤的時候，返回錯誤代碼 (只讀)

myVideo.currentSrc     以字符串的形式返回媒體地址(只讀)

• 視頻多的部分:

myVideo.poster  :   視頻播放前的預覽圖片(讀寫)

myVideo.width、myVideo.height  :   設置視頻的尺寸(讀寫)

myVideo.videoWidth、 videoHeight  :   視頻的實際尺寸(只讀)

 

 

• 主流視頻格式文件格式 (容器格式)

MPEG-4    通常以 .mp4 為擴展名
Flash視頻    通常以 .flv 為擴展名
Ogg    通常以 .ogv 為擴展名
WebM    通常以 .webm 為擴展名

頻視頻交錯    通常以 .avi 為擴展名

• 主流音頻格式文件格式 (容器格式)

MPEG-3        .mp3
Acc 音頻         .acc
Ogg 音頻       .ogg

• .avi 和 .mp4

僅僅是容器的格式
只是決定怎么將視頻存儲起來，
而不關心存儲的內容
包含了音頻軌道，視頻軌道和其他一些元數據

• 元數據

包含了視頻的封面，標題，子標題，字幕等相關信息

編解碼器
一組算法，用來對一段特定的音頻/視頻進行編碼和解碼
原始媒體文件體積巨大，
如果不進行編碼，那么數據量非常驚人
如果不進行解碼，就無法將編碼后的數據重組為原始的媒體數據

• 視頻編解碼器

H.264
VP8
Ogg Theora

• 音頻編解碼器

AAC
MPEG-3
Ogg Vorbis

• 瀏覽器對於容器和編解碼器支持的情況

Browser                        MP4(H.264 + AAC)         WebM(VP8 + Vorbis )        Ogg(Theora + Vorbis)
Internet Explorer 9                    YES                      NO                       NO
Firefox 4.0                                NO                       YES                      YES
Google Chrome                       YES                      YES                      YES
Apple Safari 5                          YES                      NO                       NO
Opera 10.6                               NO                       YES                      YES

http://www.html5videoplayer.net/html5video/html5-video-browser-compatibility/
目前還沒有一種編解碼和容器的組合能應用於所有的瀏覽器中！！！

• H.264： 別名 MPEG-4 的第十部分,由 MPEG 研發並於 2003 年標准化

它的目的支持一切設備，無論是低帶寬低 cpu ，還是高帶寬高 cpu 或者是兩者之間。
要做到這一點，H.264 標准被分成不同的幾種配置。高配置使用了更多特性，
這會導致在解碼過程中更加消耗 CPU ，但視頻文件本身會更小，視頻效果也更好

蘋果 iphone 手機 基本配置 (BaseLine)
正常的電視機支持 基本配置 (BaseLine) 和 主配置 (Main) 兩種
正常的電腦支持 基本配置 (BaseLine) 和 主配置 (Main) 高級配置 (high) 三種

• 處理視頻的一個流程:  (tools_resource)

把壓縮文件 ffmpeg.zip 放到 software 文件夾中，解壓到當前文件夾，進入 bin，逐次雙擊運行
將 bin 加入系統環境變量
在命令行中進入 .mp4 文件所在的文件夾

• 格式轉化

用 FFmpeg 制作MP4 視頻
ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4

用 FFmpeg 制作 WebM 視頻
ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm

FFmpeg 制作 Ogg 視頻
ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv

FFmpeg 制作Mp3音頻
ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3

FFmpeg 制作Ogg音頻
ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg
ffmpeg -i IDon'tWannaLiveForever.mp3 -c:a libvorbis -ac 2 -b:a 160k IDon'tWannaLiveForever.ogg


FFmpeg 制作ACC音頻
ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac

• 1. 制作一個 Ogg 容器中使用 Theora 視頻和 Vorbis 音頻的版本

2. 制作另外一個版本，使用 WebM 視頻容器（VP8 + Vorbis）
3. 再制作一個版本，使用 MP4 視頻容器，並使用 H.264 基本配置的視頻和 ACC 低配的音頻
4. 鏈接上面 3 個文件到同一個 video 元素，並向后兼容基於 Flash 的視頻播放器

 

• 自定義播放器
• 行內元素底部縫隙
• 調整基線 vertical-align: ;

 

• 元素的 width、height，隨着屏幕窗口大小改變
• window.onresize = function(){};

 

• 元素設置寬高

1. 設置 width、height

2. 定位

• #process_box {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 55px;
      right: 230px;
  }

3. 浮動，讓子元素撐開

 

• 功能函數    ----addClass()，removeClass()
• addClass()

• function addClass(ele, className){
      var reg = new RegExp("\\b"+className+"\\b");
      if(!reg.test(ele.className)){
          /* 如果元素 ele 不包含 className */
          ele.className += " "+className;
      };
  };

• removeClass()

• function removeClass(ele, className){
      if(ele.className){
          var reg = new RegExp("\\b"+className+"\\b");
          var classes = ele.className;
          ele.className = classes.replace(reg, "");
          if(/^\s*$/g.test(ele.className)){
              ele.removeAttribute("class");
          };
      }else{
          ele.removeAttribute("class");
      }
  };

• toggleClass()

• function toggleClass(ele, className){
      if(ele.className){
          var reg = new RegExp("\\b"+className+"\\b");
          if(!reg.test(ele.className)){
              /* 如果元素 ele 不包含 className */
              ele.className += " "+className;
          }else{
              var classes = ele.className;
              ele.className = classes.replace(reg, "");
              
              if(/^\s*$/g.test(ele.className)){
                  /* 如果元素的 class 為空, 則清除 class 屬性 */
                  ele.removeAttribute("class");
              };
          };
      }else{
          /* 如果元素的 className 屬性不存在, 則清除 class 屬性 */
          ele.removeAttribute("class");
      };
  };

 

• 將視頻的 currentTime 設置為 0

 

• 封裝功能函數
• 模仿 jQuery 源碼

• (function(w){
      w.$ = {};
      
      // callBack 將內部組件的 move 狀態暴露在了外部的業務邏輯
      w.$.drag = function(ele, callBack){
          ele.onmousedown = function(e){
              e = e || window.event;
          };
      };
  })(window);

 

• 對象.屬性()

• var callBack = {
      move:function(){
          console.log("Runing!");
      }
  };
  
  callBack.move();
  callBack["move"]();    // 調用，推薦使用
  
  callBack.stop = "Stop Now!";    // 動態添加屬性，推薦使用 
  callBack["stop"] = "Stop Now!";

 

• 功能函數    ----將 秒 轉為 時:分:秒

• funtion str2HMS(seconds){
      seconds = parseInt(seconds);
  
      var s = toZero( Math.floor(seconds%60) );
      var m = toZero( Math.floor(seconds%3600/60) );
      var h = toZero( Math.floor(seconds/3600) );
  
      return h+":"+m+":"+s;
  };
  
  function toZero(num){
      if(num<10){
          num = "0"+num;
      }else{
          num = ""+num;
      };
  };