Audio 和 Video 介紹

HTML多媒體 ， 主要分爲Audio 音頻和 Video 視頻。

1：Audio

基本語法

src 指定當前播放的音頻文件，controls播放控制器，loop歌曲循環，autoplay自動播放 (chrome66之後被禁止)主流瀏覽器已經關閉了自動播放，需要js觸發才行，preload 預加載，如果使用了autoplay這個屬性preload就失效了。

    <audio src="xxxx.mp3" controls="controls" loop="loop" autoplay="autoplay">
        您的瀏覽器不支持html5的audio標籤
    </audio>

Audio支持格式有：

    Firefox：支持 Ogg Vorbis和WAV

    Opera ：支持Ogg Vorbis和WAV

　　Safari ：支持MP3，AAC格式 ，和MP4

　　Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4

　　Internet Explorer 9+ ：支持MP3，AAC格式 ，和MP4

　　IOS ：支持MP3，AAC格式 ，和MP4

　　Android ：支持AAC和MP3

Audio 不光是一個HTML標籤，它還是一個window對象。既然是對象，那就有方法和屬性。

對象的常用屬性和方法

• currentTime，獲取當前播放時間
• duration，獲取歌曲的總時間

• play，播放

    audio.addEventListener("play",() => {});
    audio.onplay = () => {}

• pause，暫停
• loadstart，開始加載
• durationchange，時長數據變化
• loadedmetadata，元數據已加載
• progress，加載中
• canplay，可以播放
• canplaythrough，邊緩衝邊播放
• play()，播放歌曲
• pause()，暫停歌曲
• load()，重新加載歌曲

Audio.js

以前的Audio瀏覽器是不能直接播放的，如果需要播放一個音頻需要藉助一個flash插件。後來有了Audio.js的出現後，播放音頻不用依賴flash插件了。flash是使用as來編寫的，它和JavaScript有點相像，但是有一些門檻，在此基礎上，出現了很多的Audio插件，audio插件做了兩件事情，一件是舊版的瀏覽器兼容（http://kolber.github.io/audiojs/），第二件是美化自定義了瀏覽器的外觀。

    // 加載audio.js
    <script src="/audiojs/audio.min.js"></script>
    // 靜態加載
    <script>
      audiojs.events.ready(function() {
        const as = audiojs.createAll();
      });
    </script>
    // 動態加載
    <audio style="display:none" src="./music.mp3" preload="auto" />

2：Video

基本語法

src源，controls播放控制器，loop 循環播放，autoplay 自動播放，height，width，寬度和高度，在Audio裏面不能指定，但是在Video裏面是可以的，muted靜音，poster 預覽圖（當視頻沒有播放或者正在加載時展示給用戶的一張圖片，爲了交互的友好性），preload 預加載，和autoplay一塊時失效。

    <video src="xxxx.mp4" controls="controls" loop="loop" autoplay="autoplay" >
        您的瀏覽器不支持html5的video標籤
    </video>

Video 對象

常用的屬性和方法：

• currentTime，獲取當前播放時間
• duration，獲取歌曲的總時間

• play，播放

    video.addEventListener("play",() => {});
    video.onplay = () => {}

• pause，暫停
• loadstart，開始加載
• durationchange，時長數據變化
• loadedmetadata，元數據已加載
• loadeddata，當前幀的數據已加載，無法播放下一幀
• progress，加載中
• canplay，可以播放
• canplaythrough ，邊緩衝邊播放
• play()，播放視頻 返回一個promise
• pause() ，暫停視頻
• load() ，重新加載視頻

視頻格式與流媒體

video支持的視頻的格式主要有三種：MP4、ogg、webm。

Firefox ：支持Ogg Theora格式和WEBM
Opera ：支持Ogg Theora格式和WEBM
Safari ：支持MP4
Chrome ：支持Ogg Theora格式，MP4和WEBM
Internet Explorer 9 ：支持MP4和WEBM(需要安裝插件)
IOS ：支持MP4
Android ：支持MP4和WEBM(Android 2.3版本以上)

流媒體是指採用流式傳輸的方式在Internet播放的媒體格式(流媒體格式video標籤是不支持的)。

流媒體又叫流式媒體，它是指商家用一個視頻傳送服務器把節目當成數據包發出，傳送到網絡上。

用戶通過解壓設備對這些數據進行解壓後，節目就會像發送前那樣顯示出來。

典型的流媒體格式：rtmp、rtsp、flv都是流媒體的傳輸協議。

rtmp 是Adobe公司提供的一個流媒體協議，使用的是TCP協議，穩定性好

rtsp 是Netscape網景公司提供的一種協議，使用的是UDP協議，實時性好

flv 是蘋果公司提出的一個流媒體的一個協議，也是使用的TCP協議，把整個視頻流切割成一段一段的m3u8文件

Video.js

    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    
    const player = videojs('video', options, function onPlayerReady() {
        this.play();
        this.on('ended', function() {
            videojs.log('播放結束');
        });
    });