快速入门：在应用中播放视频 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

本主题介绍如何使用 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) 功能框。

此功能为应用程序提供对 Internet 的出站访问，从 Internet 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 播放视频。