200403-HTML-視訊和音訊

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

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

加入影片、音訊

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

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

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

影音通用:

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

  例如:

  1	<video src="影片位置">

• preload
  這個屬性用來設定當頁面載入時影音的處理方法，可以使用以下三個值:

  1. none
     在使用者按播放之前，瀏覽器不載入影音檔。

  2. auto
     瀏覽器在頁面載入同時也下載影音檔。

  3. metadata
     瀏覽器在載入時只需要收集大小、第一個影格、播放片長、播放清單等資訊。

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

• controls
  此屬性會讓瀏覽器提供本身的播放控制鈕。

• autoplay
  這個屬性會使影音檔自動開始播放。

• loop
  使用這個屬性會指定影音結束後從頭播放。

• muted
  指定載入的影音檔靜音。

影片部分:

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

  例如:

  1	<video src="video/112.mp4" poster="img/123.jpg">

• width,height
  這兩個屬性可以用來指定影片在網頁上的像素尺寸。

多重影音來源

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

例如:

1
2
3
4
5

<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為例:

1
2
3
4
5
6
7
8

<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>

會得到以下結果: