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外掛做了兩件事情，一件是舊版的瀏覽器相容（

// 載入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('播放結束');