快速入门：在应用中使用“播放到”(HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
你可以使用“播放到”功能使用户能够很容易在其家庭网络中将音频、视频或图像以流数据的形式从计算机传输到其他设备。本主题为你显示如何在 Windows 应用商店应用中使用“播放到”让用户将媒体流式传输到目标设备。
目标: 使用“播放到”功能将流媒体传输到目标设备。
先决条件
Microsoft Visual Studio
说明
1. 创建一个新项目并允许访问到媒体库
- 打开 Visual Studio，然后从“文件”菜单中选择“新建项目”。在“JavaScript”部分中，选择“空白应用程序”。将该应用程序命名为 PlayToSample，然后单击“确定”。
- 打开 package.appxmanifest 文件并选择“功能”****选项卡。选中“音乐库”、“图片库”****和“视频库”功能，使你的应用程序可访问计算机上的媒体库。关闭并保存清单文件。
2. 添加 HTML UI
打开 Default.html 文件并将下面的 HTML 添加到 <body> 部分中。
<div style="position:fixed;width:300px;height:30px;"> <button id="videoButton">Video</button> <button id="audioButton">Audio</button> <button id="imageButton">Image</button> </div> <div id="displayDiv" style="position:fixed;top:40px;height:360px"> <div id="videoDiv"> <video id="vplayer" height="338" width="600" controls > Cannot play video. </video> </div> <div id="audioDiv"> <audio id="aplayer" controls >Cannot play audio.</audio> </div> <div id="imageDiv"> <img id="iplayer" height="338" width="600" alt="image"> </div> <br/> </div> <div id="messageDiv" style="position:fixed;top:400px;height:auto"></div>
3. 添加初始化代码
本步骤中的代码创建了通过 HTML 按钮单击事件的事件处理程序。showDiv 函数可切换显示哪个 HTML5 媒体元素（<video>、<audio> 或 <img>），并保留对活动元素的引用。此引用被传递到 PlayToManager 以将该元素的源以流数据的形式传输到“播放到”目标。包括快捷方式函数，id，以便于访问 getElementById 函数。
打开 js 文件夹。打开 Default.js 文件，添加下列代码替换默认的 WinJS.Application.onmainwindowactivated 函数。
app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { id("videoButton").addEventListener("click", videoButtonClick, false); id("audioButton").addEventListener("click", audioButtonClick, false); id("imageButton").addEventListener("click", imageButtonClick, false); videoButtonClick(); WinJS.UI.processAll(); } }; function id(tagName) { return document.getElementById(tagName); } // Save a reference to the current media element for PlayTo. var mediaElement; function showDiv(divName) { id("audioDiv").style.display = "none"; id("aplayer").src = null; id("imageDiv").style.display = "none"; id("videoDiv").style.display = "none"; id("vplayer").src = null; id(divName).style.display = "block"; switch (divName) { case "audioDiv": mediaElement = id("aplayer"); break; case "videoDiv": mediaElement = id("vplayer"); break; case "imageDiv": mediaElement = id("iplayer"); break; } } function videoButtonClick() { showDiv("videoDiv"); getVideoFile(0); } function audioButtonClick() { showDiv("audioDiv"); getAudioFile(0); } function imageButtonClick() { showDiv("imageDiv"); getImageFile(0); }
4. 添加从本地媒体库获取媒体源的代码
通过 HTML 按钮单击事件期间将调用本步骤中的代码。每个函数将获取所选媒体库中找到的第一项，并在相关的 HTML5 媒体元素中播放或显示。例如，如果你在应用程序中单击“视频”按钮，那么 getVideoFile 函数将从视频中获取第一个视频，将其设置为 <video> 标记的来源，并播放该视频。
在 Default.js 文件中，在上一步骤的代码后面添加下列代码。
function getVideoFile(fileIndex) { try { var videosLibrary = Windows.Storage.KnownFolders.videosLibrary; videosLibrary.getFilesAsync().then(function (resultLibrary) { if (resultLibrary.length > 0) { id("messageDiv").innerHTML += "Play video: " + resultLibrary[fileIndex].name + "<br/>"; id("vplayer").src = URL.createObjectURL(resultLibrary[fileIndex]); id("vplayer").play(); } }); } catch (ex) { id("messageDiv").innerHTML += "Exception encountered: " + ex.message + "<br/>"; } } function getAudioFile(fileIndex) { try { var musicLibrary = Windows.Storage.KnownFolders.musicLibrary; musicLibrary.getFilesAsync().then(function (resultLibrary) { if (resultLibrary.length > 0) { id("messageDiv").innerHTML += "Play audio: " + resultLibrary[fileIndex].name + "<br/>"; id("aplayer").src = URL.createObjectURL(resultLibrary[fileIndex]); id("aplayer").play(); } }); } catch (ex) { id("messageDiv").innerHTML += "Exception encountered: " + ex.message + "<br/>"; } } function getImageFile(fileIndex) { try { var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary; picturesLibrary.getFilesAsync().then(function (resultLibrary) { if (resultLibrary.length > 0) { id("messageDiv").innerHTML += "Show image: " + resultLibrary[fileIndex].name + "<br/>"; id("iplayer").src = URL.createObjectURL(resultLibrary[fileIndex]); } }); } catch (ex) { id("messageDiv").innerHTML += "Exception encountered: " + ex.message + "<br/>"; } }
5. 添加“播放到”代码
此步骤中的代码是在你的应用程序中启用“播放到”功能的全部所需。它可为当前应用程序获取一个到 PlayToManager 的引用并为 sourcerequested 事件关联事件处理程序。在 sourcerequested 事件处理程序中，将 HTML5 媒体元素的 msPlayToSource 属性传递到 PlayToManager 的 setSource 方法中。然后 PlayToManager 将媒体以流数据的形式传输到用户选择的“播放到”目标。
在 Default.js 文件中，在上一步骤的代码后面添加下列代码。
var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView(); ptm.addEventListener("sourcerequested", sourceRequestHandler, false); function sourceRequestHandler(e) { try { var sr = e.sourceRequest; var controller; try { controller = mediaElement.msPlayToSource; } catch (ex) { id("messageDiv").innerHTML += "msPlaytoSource failed: " + ex.message + "<br/>"; } sr.setSource(controller); } catch (ex) { id("messageDiv").innerHTML += "Exception encountered: " + ex.message + "<br/>"; } }
6. 创建一个“播放到”目标（可选）
要运行该应用程序，你需要选择一个目标设备，以便“播放到”功能可将媒体以流数据的形式传输到该设备。如果你没有经过认证的“播放到”接收器，则可使用 Windows Media Player 作为目标设备。要使用 Windows Media Player 作为目标设备，你的计算机必须连接到专用网络。
- 启动 Windows Media Player。
- 展开“流”菜单，并启用“允许远程控制我的播放器...”选项。****保持打开 Windows Media Player；它必须保持运行才能用作“播放到”目标。
- 打开“设备和打印机”控制面板。单击“添加设备和打印机”****。在“添加设备和打印机”向导中，在“选择要添加到此电脑的设备或打印机”窗口中找到你的电脑的“数字媒体呈现器”。这是你的电脑的 Windows Media Player。选中它，然后单击“下一步”。当向导完成后，你会在“多媒体设备”列表中看到你的 Windows Media Player 实例。
7. 运行该应用
- 在 Visual Studio 中，按 F5（调试）以运行应用。你可以选择任何一个媒体按钮以播放或查看不同媒体库中的第一个媒体项目。在媒体播放期间，打开“设备”超级按钮并选择你的“播放到”目标，以将媒体以流数据的形式传输到该目标设备。
摘要
在此快速入门文档中，你已经将“播放到”功能添加到播放视频和音频内容以及显示图像的应用程序中。“播放到”功能使用户能够将内容以流数据的形式从应用程序传输到在他们的网络中经过认证的“播放到”接收器。
相关主题
示例