網頁設計虛擬主機程式語法啟用 IIS MIME 播放 MP4 影片設定 HTML5 Video 字幕軌道 WebVTT

啟用 IIS 7 播放 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 影片標籤以及影片格式的瀏覽器支援

瀏覽器MPEG 4OGGWebM
FireFox 4.0
不支援支援
支援
Chrome 5.0
支援支援支援
Safari 3.0
支援不支援不支援
Opera 10.5
不支援
支援支援
IE 9
支援不支援
不支援

網頁新增 HTML5 video 控制項

http://msdn.microsoft.com/zh-tw/library/hh924820(v=vs.85).aspx


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 服務器中配置。

Modification in