HTML5_音視頻標籤 和

時間  2019-11-08
標籤 html5 html 音視頻 標籤 欄目 HTML5 简体版
原文   原文鏈接

HTML5_音視頻標籤 <audio> 和 <video>html

audio 和 video 都是 inline行內元素html5

 

若是瀏覽器支持，則不顯示標籤文本web

IE8 不支持 audio video 標籤算法

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

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 可寫可不寫iphone

  • height: 480px;

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

  • 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;
    };
};
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程