啟用 IIS 播放 MP4 影片設定
HTML5 Video Tag
使用 HTML5 video 標籤播放本地站台的 mp4 預設中需要以手動開啟這些設置,才能正常的播放影片。HTML 5 目前所支援的影片格式有三種,分別為 ogg、mpeg 4、WebM
必須先於控制台 程式集 程式和功能 開啟或關閉 Windows 功能來啟用 IIS 功能。於本地 IIS 站台的 ROOT 結點項目中選擇「MIME 類型」
設置 IIS 7 添加副檔名 .mp4 的 MIME 類型 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 播放循環。控制項中如果同時使用 autoplay 與 preload,會以 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 或者 Apache 等 Web 服務器中配置。
