媒体播放详细信息 (HTML)

项目
12/11/2015

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

了解如何为 Windows 8.1 创建功能丰富的媒体应用，可以播放音频和视频以及延长电池使用寿命和优化渲染。

我们将重温如何创建与媒体功能一起加载的使用 JavaScript 的 Windows 应用商店应用的详细信息。在 Windows 8.1 中进行了大量改进，例如新的 msRequestFullscreen API，使用户可以比以往更方便地进行创建。我们将重温：

媒体播放基础知识，比如使用 audio 和 video HTML 元素、支持传输控件，以及从设备或网络加载媒体文件。
媒体播放功能，比如适当阻止屏幕变暗、在后台播放音频、与系统媒体传输控件交互、调整视频大小、创建自定义传输控件，以及支持全屏呈现。
应用基础知识，比如保留应用状态、在应用栏中创建 UI，以及创建“设置”浮出控件。

如果你还不熟悉使用 JavaScript 开发 Windows 应用商店应用，请查看使用 JavaScript 创建你的首个 Windows 应用商店应用来快速入门。

下面的每一步都链接到一个带有示例和代码的操作方法主题，因此你可以在需要更多信息时查看这些内容。

媒体播放详细信息示例包括我们在此处讨论的所有内容。我们将经常引用此随行示例，并将你引导至实现特定功能的地方。

媒体播放示例应用的屏幕截图

创建媒体应用

创建你的示例

如果希望遵循此处的步骤来将媒体功能添加到自己的应用，可以从平面导航详细信息主题和关联的平面导航模式模板开始。或者，你可以在 Microsoft Visual Studio 中创建空白 Windows 应用商店应用项目或导航项目。虽然随行示例具有简单的导航结构，但它确实使用了未包含在空白模板的 navigation.js, 中的帮助程序函数。因此，从某一个导航模板开始并删除不需要的模板可能更简单。

或者，直接跳到媒体播放详细信息随行示例。

本文提供的随行示例实现了此处的所有步骤，但是为了赶进度，我们就不再浏览代码。每一个步骤都包含"在示例中找到它"部分，有助于你快速找到代码。

示例源文件的结构简单易懂，为此你可以很容易地找到代码，无需通过源文件的多个图层深入查找。但是，你可能喜欢拆分源文件并组织你自己的项目。

媒体播放基础知识

	快速入门：在应用中播放视频在你的应用中设置视频的基础知识。此操作方法主题涉及有关操作方法的详细信息，但要获取音频和视频播放的基础知识，只要将 audio 或 video 元素添加到 HTML 并将 src 属性设置为媒体文件即可。要控制媒体播放，请使用内置传输控件，方法是将 controls 属性添加到 audio 或 video 元素。通过将 controls 属性设置为 true 或 false，启用和禁用控件。传输控件提供常见媒体 UI 元素，比如播放按钮和音量控件。下面是这些控件在示例中的外观。在示例中找到它：将 video 元素命名为 mediaVideo，并在文件 \pages\mediaPlayer\mediaPlayer.js 中的 HTML 中定义。
	支持的音频和视频格式使用 JavaScript 的 Windows 应用商店应用支持大量音频和视频格式。单击完整列表的链接。
	如何使用 FileOpenPicker 控件打开本地媒体文件现在，我们已有了媒体播放，让我们在应用运行的同时设置媒体源。 FileOpenPicker 控件让用户从本地文件系统或从 Microsoft OneDrive 选择文件。此步骤显示如何设置 FileOpenPicker 以及如何将 video.src 属性设置为由 FileOpenPicker 返回的文件。使用 StorageApplicationPermissions.futureAccessList 存储由 FileOpenPicker 打开的文件的权限。然后，你的应用可以在以后访问这些文件，比如在应用从终止状态恢复时。 FileOpenPicker 类似如下。 FileOpenPicker 不要求你的应用声明用于系统文件夹（比如音乐、视频和文档）的功能。这是因为用户对 FileOpenPicker 和打开哪些文件有整体控制。出于安全和隐私目的，你的应用应声明尽量少的功能。但如果你希望应用能够访问视频和音乐文件夹而无需用户输入 — 例如，显示音乐文件夹中的所有唱片集画面 — 你必须声明相应的功能。有关详细信息，请参阅应用功能声明。在示例中找到它：查看 \pages\mediaPlayer\mediaPlayer.js 中的 `setMediaSourceFromFilePicker` 和 `setMediaSourceFromFile` 函数以及 \pages\mediaPlayer\mediaPlayer.html 中的 `browseButton` 应用栏按钮。
	如何从网络播放媒体文件 FileOpenPicker 控件对于在本地系统上获取文件工作良好，但不适用于将媒体源设置为网络上的某个文件。要这样做，只要将 src 设置为网络上媒体文件的路径即可。在示例中找到它：查看 \pages\mediaPlayer\mediaPlayer.js 中的 `setMediaSourceFromTextBox` 和 `setMediaSourceFromPath` 函数。还可查看 \pages\mediaPlayer\mediaPlayer.html 中的 `txtSourceInput` input 元素，它用于输入媒体路径。

媒体播放功能

	如何在音频和视频播放过程中保持显示通常，当 Windows 应用商店应用在特定时间段内检测不到用户输入时，屏幕会变暗并最终关闭。这在大多数应用中是一件好事情，因为它可节省能源并延长电池使用寿命。虽然在大多数媒体应用中，我们不希望显示屏变暗，因为某人可能正在观看视频。使用 System.Windows.Display.DisplayRequest 类来告诉系统，始终为你的应用保持显示屏打开。但只要你的应用不再需要它（比如当应用暂停、媒体结束播放或媒体暂停时），则确保取消此请求。不取消此请求将学杂费电池使用寿命。如果通过内置传输控件上的全屏按钮或通过 msRequestFullscreen 函数启用了全屏呈现，则系统将自动处理禁用，并重新启用屏幕变暗。因此，如果你的应用需要仅在全屏模式下禁用屏幕变暗，则不需要自已管理 DisplayRequest。在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.js 中的 `setScreenDimming` 函数。
	如何使用系统媒体传输控件 Windows 8.1 引入了新的类用于与系统媒体传输控件交互。从现在开始，使用 SystemMediaTransportControls 而不是旧的 MediaControl 类。系统媒体传输控件不同于 HTML 媒体对象上的传输控件。这些控件是在按下硬件媒体键时弹出的控件，例如耳机上的音量控件，或者某些键盘上的媒体按钮。你的应用可以注册以使用这些控件，甚至可以传递回要由它们显示的媒体元数据（比如唱片集画面或歌曲名称）。下面看一看这些控件。在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.js 中的 `WinJS.UI.Pages.define`、`setupSystemMediaTransportControls` 和 `systemMediaControlsButtonPressed` 函数。以及 \pages\mediaPlayer\mediaPlayer.js 中的 `mediaPlaying`、`mediaPaused` 和 `mediaEnded` 事件处理程序。
	如何在后台播放音频。现在，我们来设置后台音频支持，以便用户可以在与不同应用交互时，通过你的应用听音乐。当播放音频的应用移到后台时，比如当用户切换到不同的应用时，默认行为是停止音频。但音乐应用可以选择使音频继续播放。要在后台播放音频，必须在应用清单的“声明”部分设置后台音频任务。而且你必须对 SystemMediaTransportControls 启用 isPlayEnabled 和 isPauseEnabled 属性并处理 buttonpressed 事件。这是必需的，这样当你的应用不是活动应用时，用户有办法播放和停止音频。在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.html 中的 video 元素、\pages\mediaPlayer\mediaPlayer.html 中的 `setupSystemMediaTransportControls` 函数，以及查看用于启用后台任务的 package.appmanifest.xml 的“声明”部分。
	如何启用全屏呈现用于 audio 和 video 对象的内置传输控件具有全屏按钮。但如果希望以编程方式启用或禁用全屏呈现，则使用 msRequestFullscreen 函数。在 Windows 8.1 之前，你必须计算全屏的限制并自己显示和隐藏其他 UI。如果没有以正确的方式执行此操作，则可能不会启用某些呈现优化。因此始终应当使用 msRequestFullscreen 函数来启用和禁用全屏呈现。（而且这样只会更简单。）在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.js 中的 `fullScreenMedia` 函数。
	如何编写自定义传输控件如果需要扩展 audio 和 video 传输控件提供的功能，或者如果你希望完全替换它们，则必须创建自定义传输控件。媒体播放详细信息示例在 AppBar 上实现所有自定义传输控件，但保留启用内置传输控件。如果你在创建自己的自定义传输控件，可能希望只是用自己的控件替换内置 UI。要关闭内置传输控件，请将 controls 设置为 false。此操作方法主题包括创建自定义传输控件，用于播放、暂停、停止、快进、后退、位置滑块、全屏、音频部分、静音和音量。在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.html 中的 AppBar 元素，以及参阅 \pages\mediaPlayer\mediaPlayer.js 用于实现这些功能的事件处理程序。

应用基础知识

添加应用栏

使用 WinJS.UI.AppBar 将与应用和audio及video对象交互的 UI 放在应用栏中。WinJS.UI.AppBarCommand 控件是专为 AppBar 构建的，而且工作良好。以下控件类型可用：“button”、“toggle”、“flyout”、“separator”和 “content”。

WinJS.UI.AppBarIcon 枚举包含大量可以用于 AppBarCommand.icon 的符号。你还可以提供自己的自定义可移植网络图形格式 (PNG) 文件。

下面是随行示例中底部 AppBar 的外观。

显示带有 AppBarButtons 的 AppBar

随行示例将浮出控件用于音轨选择控件和音量控件。这有助于节省空间。

有关使用 AppBar 和设计你的应用的信息，请参阅应用栏指南。

在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.html 中的 <div id="appBarTop" 和 <div id="appBarBottom" 元素。如果你想了解特定控件和功能是如何实现的，请查看 \pages\mediaPlayer\mediaPlayer.js 中用于应用栏按钮的事件处理程序。

管理应用生命周期和状态

在 Windows 应用商店应用中保存应用状态很重要，因为你的应用可能随时在后台暂停以及由系统终止。当应用恢复时，用户通常希望媒体恢复到之前的相同位置，而且所有应用设置都保持不变。

你可以将应用状态保存到设备上的独立存储，也可以保存到漫游存储。漫游存储是个不错的选择，因为它让用户在多个设备上运行应用，而且其状态在所有设备间共享。

要保存的重要 video 状态有：src、currentTime、loop、paused、ended、autoplay 和任意选定的 audioTracks。

navigation.js 是 Visual Studio 模板一部分的帮助程序函数。它们包含在所有空白模板中。这些帮助程序函数可简化暂停、继续和从终止状态恢复的处理。

某些媒体状态应在加载媒体后恢复 — 例如 currentTime。

在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.js 中的 app.oncheckpoint、navigationHelper_SaveState、restoreMediaState、mediaLoaded 和 appResumingFromSuspend 函数。在 \js\default.js 中，查看 app.onactivated。

应用设置指南

将 WinJS.UI.SettingsFlyout 控件用于使用 JavaScript 的 Windows 应用商店应用。

设置用于配置选项，这些选项整体影响应用行为，而且只会偶尔调整。媒体播放详细信息示例创建了可以用于存储应用设置的音频设置和视频设置浮出控件。

在示例中找到它：查看 \js\default.js 中的 app.onactivated。 audio.html、video.html、help.html 和 privacy.html 设置页面位于 \settings 子文件夹中。

整理

使用 Windows 应用认证工具包

建议。运行 Windows 应用认证工具包可帮助确保应用满足 Windows 应用商店要求。我们建议你在将主要功能添加到应用时，运行该工具包。

完成了！现在，你已了解了用于应用的不同媒体播放功能，可以创建类似媒体播放详细信息示例的应用了。

希望了解更多信息？

Windows 应用商店应用 UI 详细信息

了解有关设计 Windows 应用商店应用 UI 的更多信息。

用户交互详细信息

了解有关将触摸输入添加到 Windows 应用商店应用的详细信息。

采用 JavaScript 的 Windows 应用商店应用的路线图

了解有关通常情况下使用 JavaScript 创建 Windows 应用商店应用的详细信息。

设计应用 UX

了解有关设计出色用户体验的详细信息。

支持的音频和视频格式

了解有关在使用 JavaScript 的 Windows 应用商店应用中受支持的音频和视频格式的详细信息。

音频和视频性能

了解有关针对媒体应用的性能注意事项的详细信息。

快速入门：添加 WinJS 控件和样式

了解有关在使用 JavaScript 的 Windows 应用商店应用中的控件和事件的详细信息。

	快速入门：在应用中播放视频在你的应用中设置视频的基础知识。此操作方法主题涉及有关操作方法的详细信息，但要获取音频和视频播放的基础知识，只要将 audio 或 video 元素添加到 HTML 并将 src 属性设置为媒体文件即可。要控制媒体播放，请使用内置传输控件，方法是将 controls 属性添加到 audio 或 video 元素。通过将 controls 属性设置为 true 或 false，启用和禁用控件。传输控件提供常见媒体 UI 元素，比如播放按钮和音量控件。下面是这些控件在示例中的外观。在示例中找到它：将 video 元素命名为 mediaVideo，并在文件 \pages\mediaPlayer\mediaPlayer.js 中的 HTML 中定义。
	支持的音频和视频格式使用 JavaScript 的 Windows 应用商店应用支持大量音频和视频格式。单击完整列表的链接。
	如何使用 FileOpenPicker 控件打开本地媒体文件现在，我们已有了媒体播放，让我们在应用运行的同时设置媒体源。 FileOpenPicker 控件让用户从本地文件系统或从 Microsoft OneDrive 选择文件。此步骤显示如何设置 FileOpenPicker 以及如何将 video.src 属性设置为由 FileOpenPicker 返回的文件。使用 StorageApplicationPermissions.futureAccessList 存储由 FileOpenPicker 打开的文件的权限。然后，你的应用可以在以后访问这些文件，比如在应用从终止状态恢复时。 FileOpenPicker 类似如下。 FileOpenPicker 不要求你的应用声明用于系统文件夹（比如音乐、视频和文档）的功能。这是因为用户对 FileOpenPicker 和打开哪些文件有整体控制。出于安全和隐私目的，你的应用应声明尽量少的功能。但如果你希望应用能够访问视频和音乐文件夹而无需用户输入 — 例如，显示音乐文件夹中的所有唱片集画面 — 你必须声明相应的功能。有关详细信息，请参阅应用功能声明。在示例中找到它：查看 \pages\mediaPlayer\mediaPlayer.js 中的 `setMediaSourceFromFilePicker` 和 `setMediaSourceFromFile` 函数以及 \pages\mediaPlayer\mediaPlayer.html 中的 `browseButton` 应用栏按钮。
	如何从网络播放媒体文件 FileOpenPicker 控件对于在本地系统上获取文件工作良好，但不适用于将媒体源设置为网络上的某个文件。要这样做，只要将 src 设置为网络上媒体文件的路径即可。在示例中找到它：查看 \pages\mediaPlayer\mediaPlayer.js 中的 `setMediaSourceFromTextBox` 和 `setMediaSourceFromPath` 函数。还可查看 \pages\mediaPlayer\mediaPlayer.html 中的 `txtSourceInput` input 元素，它用于输入媒体路径。

	如何在音频和视频播放过程中保持显示通常，当 Windows 应用商店应用在特定时间段内检测不到用户输入时，屏幕会变暗并最终关闭。这在大多数应用中是一件好事情，因为它可节省能源并延长电池使用寿命。虽然在大多数媒体应用中，我们不希望显示屏变暗，因为某人可能正在观看视频。使用 System.Windows.Display.DisplayRequest 类来告诉系统，始终为你的应用保持显示屏打开。但只要你的应用不再需要它（比如当应用暂停、媒体结束播放或媒体暂停时），则确保取消此请求。不取消此请求将学杂费电池使用寿命。如果通过内置传输控件上的全屏按钮或通过 msRequestFullscreen 函数启用了全屏呈现，则系统将自动处理禁用，并重新启用屏幕变暗。因此，如果你的应用需要仅在全屏模式下禁用屏幕变暗，则不需要自已管理 DisplayRequest。在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.js 中的 `setScreenDimming` 函数。
	如何使用系统媒体传输控件 Windows 8.1 引入了新的类用于与系统媒体传输控件交互。从现在开始，使用 SystemMediaTransportControls 而不是旧的 MediaControl 类。系统媒体传输控件不同于 HTML 媒体对象上的传输控件。这些控件是在按下硬件媒体键时弹出的控件，例如耳机上的音量控件，或者某些键盘上的媒体按钮。你的应用可以注册以使用这些控件，甚至可以传递回要由它们显示的媒体元数据（比如唱片集画面或歌曲名称）。下面看一看这些控件。在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.js 中的 `WinJS.UI.Pages.define`、`setupSystemMediaTransportControls` 和 `systemMediaControlsButtonPressed` 函数。以及 \pages\mediaPlayer\mediaPlayer.js 中的 `mediaPlaying`、`mediaPaused` 和 `mediaEnded` 事件处理程序。
	如何在后台播放音频。现在，我们来设置后台音频支持，以便用户可以在与不同应用交互时，通过你的应用听音乐。当播放音频的应用移到后台时，比如当用户切换到不同的应用时，默认行为是停止音频。但音乐应用可以选择使音频继续播放。要在后台播放音频，必须在应用清单的“声明”部分设置后台音频任务。而且你必须对 SystemMediaTransportControls 启用 isPlayEnabled 和 isPauseEnabled 属性并处理 buttonpressed 事件。这是必需的，这样当你的应用不是活动应用时，用户有办法播放和停止音频。在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.html 中的 video 元素、\pages\mediaPlayer\mediaPlayer.html 中的 `setupSystemMediaTransportControls` 函数，以及查看用于启用后台任务的 package.appmanifest.xml 的“声明”部分。
	如何启用全屏呈现用于 audio 和 video 对象的内置传输控件具有全屏按钮。但如果希望以编程方式启用或禁用全屏呈现，则使用 msRequestFullscreen 函数。在 Windows 8.1 之前，你必须计算全屏的限制并自己显示和隐藏其他 UI。如果没有以正确的方式执行此操作，则可能不会启用某些呈现优化。因此始终应当使用 msRequestFullscreen 函数来启用和禁用全屏呈现。（而且这样只会更简单。）在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.js 中的 `fullScreenMedia` 函数。
	如何编写自定义传输控件如果需要扩展 audio 和 video 传输控件提供的功能，或者如果你希望完全替换它们，则必须创建自定义传输控件。媒体播放详细信息示例在 AppBar 上实现所有自定义传输控件，但保留启用内置传输控件。如果你在创建自己的自定义传输控件，可能希望只是用自己的控件替换内置 UI。要关闭内置传输控件，请将 controls 设置为 false。此操作方法主题包括创建自定义传输控件，用于播放、暂停、停止、快进、后退、位置滑块、全屏、音频部分、静音和音量。在示例中找到它：请参阅 \pages\mediaPlayer\mediaPlayer.html 中的 AppBar 元素，以及参阅 \pages\mediaPlayer\mediaPlayer.js 用于实现这些功能的事件处理程序。