啟用 IIS 播放 MP4 影片設定

HTML5 Video Tag

使用 HTML5 video 標籤播放本地站台的 mp4 預設中需要以手動開啟這些設置,才能正常的播放影片。HTML 5 目前所支援的影片格式有三種,分別為 ogg、mpeg 4、WebM



必須先於控制台 程式集 程式和功能 開啟或關閉 Windows 功能來啟用 IIS 功能於本地 IIS 站台的 ROOT 結點項目中選擇「MIME 類型」



設置 IIS 7 添加副檔名 .mp4MIME 類型 video/mp4



播放 MP4 影片及播放功能列畫面



網頁加入 HTML5 Video 播放 MP4、OGG、WebM

目前許多瀏覽器都支援 HTML5 以及 H.264 影片轉碼器或 WebM 格式的影片元素。能夠設定影片長、寬、增加影片播放控制列、是否自動播放、是否自動重覆播放等功能,不同瀏覽器所支援的影片格式不同,使用 <video> 標籤建議提供兩種以上的影片格式,才能自動根據瀏覽器判斷播放,如果該瀏覽器都沒有支援播放,則提示瀏覽器不支援 <video> 這個標籤。

HTML5 (video) 標籤屬性的基本語法

<video preload controls loop poster="media/coFlow.png" width="720" height="480">
  <source src="media/coFlow.mp4" type="video/mp4" />
  <source src="media/coFlow.ogv" type="video/ogg" />
  <source src="media/coFlow.webm" type="video/web" />
  瀏覽器不支援 HTML 5 <video> 標籤之影片格式播放。
</video>

preload 預先載入、autoplay 自動播放、controls 控制按鈕(播放功能列)、loop 播放循環。控制項中如果同時使用 autoplaypreload,會以 autoplay 屬性為處理。

poster 海報影像只會在無法使用視訊時顯示的圖片。設定視訊播放寬度 width 與設定視訊播放高度 height 的屬性。

source src 指向視訊檔案的位置,網址或相對位址,type 影片的類型。



網頁新增 HTML5 video 控制項

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video


HTML <track> Element 字幕軌道

WebVTT

WebVTT files are 8-bit Unicode Transformation Format (UTF-8) format text files that look like the following.

WEBVTT

00:00:01.878 --> 00:00:05.334
Enable IIS MIME to play MP4 movie settings

00:00:08.608 --> 00:00:15.296
Add Video Playback Control & Video Settings.

第一行必需是 WEBVTT 接著空行,接下來是一行時間範圍加一行或多行字幕內容加空行,一行時間範圍加一行或多行字幕內容加空行。
時間格式是 HH:MM:SS.sss 時:分:秒.毫秒。
開始時間 --> 結束時間、--> 的兩邊各有一個空格,這兩個時間必需寫在同一行
時間都是相對於視頻開始的時間間隔。
時間之後是字幕文本,時間和字幕文本之間不能有空行,字幕文本可以是一行或多行,字幕文本中不能有空行。


伺服器問題

WebVTT 字幕文件的 MIME 類型約定是 "text/vtt",需要在 IIS 或者 ApacheWeb 服務器中配置。