快速入門：在應用程式中播放視訊 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這個主題說明如何使用 HTML5 Video 元素在使用 JavaScript 的 Windows 執行階段應用程式中播放視訊。

如需在使用 JavaScript 的 Windows 執行階段應用程式中使用音訊和視訊的其他範例，請參閱 HTML 媒體播放範例。

如需 Windows 執行階段應用程式支援的音訊與視訊媒體格式相關資訊，請參閱支援的音訊與視訊格式。

先決條件

這個主題假設您可以使用 JavaScript 建立基本的 Windows 執行階段應用程式。如果建立您的第一個應用程式時需要協助，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。

開啟應用程式資訊清單檔案 package.appxmanifest.xml，然後啟用Internet (Client) capability

在 Microsoft Visual Studio 中，按兩下 [方案總管] 中的 package.appxmanifest 項目，開啟應用程式資訊清單的設計工具。
按一下 [功能]。
核取Internet (Client) 功能的方塊。

這個功能可以讓應用程式對外存取網際網路，這是從網際網路 URL 播放視訊的必要條件。

注意播放本機視訊檔案時不需要這個功能。

開啟名稱為 Default.html 的 HTML 檔案，然後將視訊元素新增至文件的內文。

<body>
  <video id="mediaVideo" src="https://www.contoso.com/clip.mp4" controls/>
</body>

您應該以實際的 URL 取代範例中的 "https://www.contoso.com/clip.mp4" URL。

Video 元素提供一組內建的播放控制項，可以讓使用者開始或暫停視訊、搜尋新位置以及調整音量。預設不會顯示播放控制項。若要啟用播放控制項，只要新增 controls 屬性即可，如下所示。當使用者將滑鼠停留在視訊上，就會顯示控制項。

如果您事先知道視訊的尺寸，在 video 元素上設定 width 和 height 屬性，是很好的做法。這些屬性提供元素的配置大小 (以階層式樣式表 (CSS) 像素為單位)。載入頁面時，會保留元素的空間。如果您略過寬度和高度屬性，下載視訊之後會自動重排頁面。

<body>
   <video src="https://www.contoso.com/clip.mp4" controls width=640 height=480/>
</body>

寬度和高度屬性一律指定 CSS 像素，不採用單位。例如，"5cm" 和 "100%" 都是無效的。

如果寬度和高度屬性不符合視訊的內建大小，則視訊控制項會延展視訊，同時視需要使用上下黑邊保留外觀比例。不過最好還是避免延展視訊，因為這樣視覺上會產生變形。請盡量以需要的檢視大小編碼視訊。

這個主題示範如何使用 <video> 標記播放 URL 的視訊。