h5-音視頻標籤

###1. <video>:Html5提供的播放視頻的標籤
        　　　　src:資源地址
        　　　　controls:該屬性定義是顯示仍是隱藏用戶控制界面

　　調用默認控件   設置controls屬性   =  「controls」；   

　　注意： 在video元素中設置寬高指的是該元素的寬高，並不是指視頻內容的寬高

 

　　1.1） 主流視頻格式：　　　　　　　　　　　　　　　　　　音頻文件格式：

　　　　MPEG-4:  一般以.mp4爲擴展名　　　　　　　　　　　　　　.mp3

　　　　Flashship：     以.flv爲擴展名　　　　　　　　　　　　　　　.acc

　　　　Ogg：             .ogg　　　　　　　　　　　　　　　　　　　 .ogg

　　　　WebM：　　　.webm　　　　

　　　　　　　　　　音頻視頻交錯：    　　.avi

　　1.2.)  格式轉化

　　　　先將ffmpeg.exe文件下目錄路徑配置爲環境變量（路徑不能含中文），在執行如下命令
        用 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 製做ACC音頻    
            ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac
       

　　1.3.) 兼容性  source元素

　　<video width="600" height="" controls="controls">
　　　　<source src="resource/video/test.mp4" type="video/mp4"></source>
　　　　<source src="resource/video/OUTPUT.ogv" type="video/ogg"></source>
　　　　<source src="resource/video/OUTPUT.webm" type="video/webm"></source>
　　　　<!--<object width="" height="50" type="application/x-shockwave-flash" data="myvideo.swf"> //存放flash視頻
　　　　　　<param name="movie" value="myvideo.swf" />
　　　　　　<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
　　　　</object>-->
　　　　當前瀏覽器不支持 video直接播放，點擊這裏下載視頻： <a href="resource/video/OUTPUT.webm">下載視頻</a>
　　</video>

###2.<audio>:Html5提供的播放音頻的標籤
       　　 src:資源地址
        　　controls:該屬性定義是顯示仍是隱藏用戶控制界面

###3.video標籤的屬性
    width  :視頻顯示區域的寬度，單位是CSS像素
    height :視頻展現區域的高度，單位是CSS像素
    poster :一個海報幀的URL，用於在用戶播放或者跳幀以前展現
    
    src          :       要嵌到頁面的視頻的URL
    controls  :  顯示或隱藏用戶控制界面
    autoplay  :  媒體是否自動播放
    loop        :  媒體是否循環播放
    muted        :  是否靜音
    preload   :  該屬性旨在告訴瀏覽器做者認爲達到最佳的用戶體驗的方式是什麼
                    none: 提示做者認爲用戶不須要查看該視頻，服務器也想要最小化訪問流量；
                              換句話說就是提示瀏覽器該視頻不須要緩存。       //  不會預先加載，用戶點擊播放後纔開始加載
                    metadata: 提示儘管做者認爲用戶不須要查看該視頻，    //  一樣不會預加載，但會提早獲取視頻長度，海報等信息
                                 不過抓取元數據（好比：長度）仍是很合理的。
                    auto: 用戶須要這個視頻優先加載；換句話說就是提示：若是須要的話，
                             能夠下載整個視頻，即便用戶並不必定會用它。
                    空字符串：也就代指 auto 值。
                    
###4.audio標籤的屬性    
    src          
    controls  
    autoplay  
    loop        
    muted        
    preload   
    
    
###5.音視頻js相關屬性
    duration    :  媒體總時間(只讀)　　　　坑：有些瀏覽器在執行該屬性方法時尚未加載完視頻文件，也與網絡有關，會返回NaN值  解決方案：搭配js相關事件使用。例如：suspend事件
    currentTime :  開始播放到如今所用的時間(可讀寫)
    muted       :  是否靜音(可讀寫,相比於volume優先級要高)    坑： muted不會同步volume，要設置靜音則需同時設置muted=true和volume=0；且muted優先級高
    volume      :  0.0-1.0的音量相對值(可讀寫)
    paused      :  媒體是否暫停(只讀)
    ended       :  媒體是否播放完畢(只讀)
    error       :  媒體發生錯誤的時候，返回錯誤代碼 (只讀)
    currentSrc  :  以字符串的形式返回媒體地址(只讀)
    
    
    視頻多的部分:
        poster  :   視頻播放前的預覽圖片(讀寫)
        width、height  :   設置視頻的尺寸(讀寫)
        videoWidth、 videoHeight  :   視頻的實際尺寸(只讀)


###6.音視頻js相關函數
    play()  :  媒體播放
    pause()  :  媒體暫停
    load()  :  從新加載媒體


    
###7.js相關事件
    視頻:
        abort     在播放被終止時觸發,例如, 當播放中的視頻從新開始播放時會觸發這個事件。
        canplay    在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發。這個事件對應CAN_PLAY的readyState。
        canplaythrough    在媒體的readyState變爲CAN_PLAY_THROUGH時觸發，代表媒體能夠在保持當前的下載速度的狀況下不被中斷地播放完畢。

　　注意：手動設置currentTime會使得firefox觸發一次canplaythrough事件，其餘瀏覽器或許不會如此。
        durationchange    元信息已載入或已改變，代表媒體的長度發生了改變。例如，在媒體已被加載足夠的長度從而得知總長度時會觸發這個事件。
        emptied    媒體被清空（初始化）時觸發。
        ended    播放結束時觸發。
        error    在發生錯誤時觸發。元素的error屬性會包含更多信息。參閱Error handling得到詳細信息。
        loadeddata    媒體的第一幀已經加載完畢。
        loadedmetadata    媒體的元數據已經加載完畢，如今全部的屬性包含了它們應有的有效信息。
        loadstart    在媒體開始加載時觸發。
        mozaudioavailable    當音頻數據緩存並交給音頻層處理時
        pause    播放暫停時觸發。
        play    在媒體回放被暫停後再次開始時觸發。即，在一次暫停事件後恢復媒體回放。
        playing    在媒體開始播放時觸發（不管是初次播放、在暫停後恢復、或是在結束後從新開始）。
        progress    告知媒體相關部分的下載進度時週期性地觸發。有關媒體當前已下載總計的信息能夠在元素的buffered屬性中獲取到。
        ratechange    在回放速率變化時觸發。
        seeked    在跳躍操做完成時觸發。
        seeking    在跳躍操做開始時觸發。
        stalled    在嘗試獲取媒體數據，但數據不可用時觸發。
        suspend    在媒體資源加載終止時觸發，這多是由於下載已完成或由於其餘緣由暫停。
        timeupdate    元素的currentTime屬性表示的時間已經改變。
        volumechange    在音頻音量改變時觸發（既能夠是volume屬性改變，也能夠是muted屬性改變）.。
        waiting    在一個待執行的操做（如回放）因等待另外一個操做（如跳躍或下載）被延遲時觸發

    音頻:
        abort     在播放被終止時觸發,例如, 當播放中的視頻從新開始播放時會觸發這個事件。
        canplay    在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發。這個事件對應CAN_PLAY的readyState。
        canplaythrough    在媒體的readyState變爲CAN_PLAY_THROUGH時觸發，代表媒體能夠在保持當前的下載速度的狀況下不被中斷地播放完畢。

　　注意：手動設置currentTime會使得firefox觸發一次　　canplaythrough事件，其餘瀏覽器或許不會如此。         durationchange    元信息已載入或已改變，代表媒體的長度發生了改變。例如，在媒體已被加載足夠的長度從而得知總長度時會觸發這個事件。         emptied    媒體被清空（初始化）時觸發。         ended    播放結束時觸發。         error    在發生錯誤時觸發。元素的error屬性會包含更多信息。參閱Error handling得到詳細信息。         loadeddata    媒體的第一幀已經加載完畢。         loadedmetadata    媒體的元數據已經加載完畢，如今全部的屬性包含了它們應有的有效信息。         loadstart    在媒體開始加載時觸發。         mozaudioavailable    當音頻數據緩存並交給音頻層處理時         pause    播放暫停時觸發。         play    在媒體回放被暫停後再次開始時觸發。即，在一次暫停事件後恢復媒體回放。         playing    在媒體開始播放時觸發（不管是初次播放、在暫停後恢復、或是在結束後從新開始）。         progress    告知媒體相關部分的下載進度時週期性地觸發。有關媒體當前已下載總計的信息能夠在元素的buffered屬性中獲取到。         ratechange    在回放速率變化時觸發。         seeked    在跳躍操做完成時觸發。         seeking    在跳躍操做開始時觸發。         stalled    在嘗試獲取媒體數據，但數據不可用時觸發。         suspend    在媒體資源加載終止時觸發，這多是由於下載已完成或由於其餘緣由暫停。         timeupdate    元素的currentTime屬性表示的時間已經改變。         volumechange    在音頻音量改變時觸發（既能夠是volume屬性改變，也能夠是muted屬性改變）.。         waiting    在一個待執行的操做（如回放）因等待另外一個操做（如跳躍或下載）被延遲時觸發