Win10系列：JavaScript多媒体

document.getElementById("pickFileButton").addEventListener("click", pickFile);

代码调用getElementById函数获取id为"pickFileButton"的button按钮，并使用addEventListener函数为该按钮的click事件注册事件处理函数PickFile。

接下来在"app.onactivated = function (args) {......};"语句后面定义事件处理函数PickFile，实现文件的选取和视频播放功能，相关代码如下所示：

//定义click事件处理函数

function pickFile() {

//创建FileOpenPicker类型的对象

var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

//设置文件选取器的初始位置为视频库

openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;

//文件类型筛选

openPicker.fileTypeFilter.replaceAll([".mp4", ".wmv"]);

//选取多媒体文件

openPicker.pickSingleFileAsync().then(function (file) {

if (file) {

var localVideo = document.getElementById("videoId");

//为多媒体文件创建URL，并赋值给video控件的src属性

localVideo.src = URL.createObjectURL(file, { oneTimeOnly: true });

//播放这个多媒体文件

localVideo.play();

//成功打开多媒体文件时，给出提示消息

output.innerText = "成功打开了一个多媒体文件！";

}

else{

output.innerText = "请选取一个多媒体文件！";

}

},

//如果出现异常，进行相应的异常处理

function (error) {

output.innerText = "错误：" + error.message;

});

}

上面代码中，首先新建一个FileOpenPicker类型的对象openPicker作为文件选取器，并设置openPicker对象的suggestedStartLocation属性值为videosLibrary，将文件选取器起始位置定位为本地的视频库。然后通过openPicker对象的fileTypeFilter.replaceAll函数，设置文件选取器能够选取的文件类型为".mp4"和".wmv"。接下来调用openPicker对象的pickSingleFileAsync函数来选取多媒体文件，在pickSingleFileAsync函数中，通过if语句对file进行检查，如果file不为空，说明已经选取了文件，那么调用document.getElementById函数获取id属性值为"videoId"的元素，将其赋值给localVideo变量，并调用URL.createObjectURL函数为所选取的多媒体文件创建一个URL，赋值给localVideo对象的src属性。URL.createObjectURL函数有两个参数，一个是file，一个是oneTimeOnly。其中file为所选取的多媒体文件，oneTimeOnly指为多媒体文件创建的URL是否只使用一次。最后调用localVideo对象的play函数来实现视频播放功能，并在p元素中显示提示信息"成功打开了一个多媒体文件！"；如果没有选取文件，则会在p元素中显示提示信息"请选取一个多媒体文件！"。

图19-32 界面初始状态

图19-33 多媒体播放的效果