第12天:HTML5-<VIDEO>標籤

第 12 屆 iThome 鐵人賽

DAY 12

Modern Web

我可以修改，所以先亂打系列第 12 篇

12th鐵人賽

h1144777

團隊想吃薑母鴨

2020-09-27 16:29:06

5826 瀏覽

分享至

這篇文章內會有一些關於將影片與音訊加入到網頁內的方法。

可以使用HTML5中的<video>標籤，可以更簡單方便的將影片或音訊放到網站之中，要注意檔案格式，目前瀏覽器支援度最高的影片格式為MP4，音訊檔為mp3。也可使用另一種方法，利用現在的線上影音平台(例如Youtube)，將影片上傳到影音平台後再崁入到網頁中，以下會有關於兩種做法的說明。

加入影片、音訊

加入影片使用<video>標籤
加入音訊使用<audio>標籤

關於支援格式部分可以到下面網址查詢:
https://caniuse.com/

這兩個標籤有許多屬性可以使用，以下會一一介紹:

影音通用:

src
這個屬性用來指定影音檔案路徑。

例如:
```
<video src="影片位置">
```
preload
這個屬性用來設定當頁面載入時影音的處理方法，可以使用以下三個值:
1. none
  在使用者按播放之前，瀏覽器不載入影音檔。
2. auto
  瀏覽器在頁面載入同時也下載影音檔。
3. metadata
  瀏覽器在載入時只需要收集大小、第一個影格、播放片長、播放清單等資訊。

以下屬性不需要值，只要屬性在就會將此選項開啟:

controls
此屬性會讓瀏覽器提供本身的播放控制鈕。
autoplay
這個屬性會使影音檔自動開始播放。
loop
使用這個屬性會指定影音結束後從頭播放。
muted
指定載入的影音檔靜音。

影片部分:

poster
這個屬性可以指定影片正在下載，或是影片開始播放前所顯示的影像。

例如:
```
<video src="video/112.mp4" poster="img/123.jpg">
```
width,height
這兩個屬性可以用來指定影片在網頁上的像素尺寸。

多重影音來源

各種瀏覽器支援的影音格式不同，為了因應這個情形，可以使用<source>這個標籤來指定影音檔不同的來源。

例如:

<video width="480" height="240" controls>
<source src="video/001.ogg">
<source src="video/001.mp4">
<p>您的瀏覽器不支援 HTML5 影片</p>
</video>

以上程式碼用<source>來取代原本在<video>標籤內的路徑，當瀏覽器不支援第一個ogg格式時會讀取下一行，也就是mp4格式，如果瀏覽器都不支援時，則會將不支援的文字顯示給使用者。

崁入外部影音檔

現在網路上有許多影音平台提供崁入影片功能，使用崁入影片可以有效降低伺服器的負荷量，減少影片對網頁讀取效率的影響，這裡可以使用之前學習過的<iframe>標籤，以下用Youtube為例:

<iframe 
width="1195" 
height="672" 
src="https://www.youtube.com/embed/COLxKY5y-T0" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>

會得到以下結果(以圖片示意):

若要控制Youtube影片在頁面上的顯示大小，可以在影片外面加上一個<div>標籤，再用class選擇器
配合CSS即可，例如:

  <style>
    .videowrap {
        margin:50px auto;
        max-width: 60%;
    }

</style>
    
  <div class="videowrap">
            <iframe width="1195" height="672" src="https://www.youtube.com/embed/COLxKY5y-T0" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </div>

  </div>

即可得到以下結果(圖片示意)