前端Html5（2）之多媒體音訊視訊標籤

  html5協議的釋出使得視訊和音訊的播放可以不依賴於flash外掛，而是通過html5定義的新標籤<audio>和<video>來在網頁上播放視訊和音訊。

音訊

<main>
    <audio src='像我這樣的人.mp3' controls autoplay loop>
    </audio>

    <audio controls autoplay loop muted>
        <source src="平凡的一天.mp4">
        <source src="平凡的一天.wav">
        您的瀏覽器不支援 audio 標籤。
    </audio>
</main>
複製程式碼

audio標籤常用的屬性有：
controls：表示出音訊控制元件，每個瀏覽器樣式不同。
autoplay：自動播放。
loop：迴圈播放。
muted：靜音。
  在chrome瀏覽器中，音訊控制元件有暫停/播放健，進度條，時間和音量展示。不支援autoplay，它只在首次進去頁面是有效果，重新整理頁面不能自動播放，支援loop，支援muted，音量鍵可以恢復聲音。

  在火狐瀏覽器中，音訊控制元件有暫停/播放健，進度條，時間和音量展示。支援autoplay，支援loop，支援muted，音量鍵可以恢復聲音。

  在safari瀏覽器中，音訊控制元件有暫停/播放健，進度條，時間。不支援autoplay，支援loop，支援muted，但沒有音量鍵，因此在瀏覽器中不能修改音量。

  source標籤允許規定可替換的視訊/音訊檔案供瀏覽器根據它對媒體型別或者編解碼器的支援進行選擇。若不支援，可以顯示提示資訊。

視訊

<main>
    <video src="第01課 Vue第一天-Vue基礎的使用-01.mp4" autoplay controls loop width="500px" height="500px"></video>
</main>
複製程式碼

video常用屬性：
controls：表示出視訊控制元件，每個瀏覽器樣式不同。
autoplay：自動播放。
loop：迴圈播放。
width：設定視訊控制元件的寬度。
length：設定視訊控制元件的長度。
  在chrome瀏覽器中，視訊控制元件有暫停/播放健，進度條，時間，音量展示，全屏和下載。不支援autoplay，它只在首次進去頁面是有效果，重新整理頁面不能自動播放，支援loop。 單擊視訊介面不會暫停播放，雙擊可以全屏。

  在火狐瀏覽器中，視訊控制元件有暫停/播放健，進度條，時間，音量展示，全屏。支援autoplay，支援loop。 單擊視訊介面會暫停播放，雙擊可以全屏。

  在safari瀏覽器中，視訊控制元件有暫停/播放健，進度條，快進，時間，音量展示，全屏。不支援autoplay，支援loop。 單擊視訊介面會暫停播放，雙擊不可以全屏。