一、標籤 <video>

在html5中，有這麼個標籤 <video> 標籤。

<video> 允許你簡單的嵌入一段視訊。

二、瀏覽器的相容性問題

  • WebM 容器通常包括了 Ogg Vorbis 音訊和 VP8/VP9 視訊。主要在 FireFox 和 Chrome 當中支援。
  • MP4 容器通常包括 AAC 以及 MP3 音訊和 H.264 視訊。主要在 Internet Explorer 和 Safari 當中支援。

三、如何新增視訊程式碼例子

<video controls>

  <source src="xxx.mp4" type="video/mp4">　　 //xxx.mp4  前面的xxx是代表要播放的視訊名稱

  <source src="xxx.webm" type="video/webm">  //xxx.mp4 前面的xxx是代表要播放的視訊名稱

  <p>Your browser doesn't support HTML5 video. Here is a <a href="xxx.mp4">turn to the video</a> instead.</p>  //如果兩個格式的視訊都不能播放，這裡有了herf標籤，幫助選擇跳轉到對應的視訊

</video>

1、我們在瀏覽器中程式碼中，每個 <source> 標籤頁含有一個 type 屬性，這個屬性是可選的，如果你沒有新增 type 屬性，瀏覽器會嘗試載入每一個檔案，直到找到一個能正確播放的格式，這樣會消耗掉大量的時間和資源。

2、這裡有兩個<source> 標籤，是為了不同瀏覽器支援的格式，能兩者選一個去播放。

3、control屬性，是使使用者必須能夠控制視訊和音訊的回放功能。

4、我們也可以新增其他屬性，如width寬，height高，autoplay自動播放，loop迴圈，preload緩衝屬性（"none（不緩衝）","auto（頁面載入後快取媒體檔案）","metadata（僅緩衝檔案的元檔案）"），poster屬性，這個屬性指向了一個影象的URL，這個影象會在視訊播放前顯示。通常用於粗略的預覽或者廣告。