在Windows 8中更改视频标记的来源

时间:2013-06-06 07:37:26

标签: javascript html5 windows-8

我正在尝试用HTML和HTML构建一个适用于Windows 8的小型视频播放器。 JavaScript的。我希望能够使用FilePicker更改视频源。

这是我正在使用的代码:

<body>
  <video id="player" controls="controls">
    <!--<source src="trailer.mp4" type="video/mp4" />-->
    <source src="trailer (1).mp4" type="video/mp4" />
  </video>
  <button id="pickFile">Pick File</button>
</body>

在default.js文件中:

args.setPromise(WinJS.UI.processAll().done(function (e) {
            pickFile.addEventListener("click", function (e) {
                var picker = new Windows.Storage.Pickers.FileOpenPicker();
                picker.fileTypeFilter.push(".mp4", ".webm", ".ogv");
                picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
                picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
                picker.pickSingleFileAsync().then(function (file) {
                    if (file) {
                        player.setAttribute("src", file.path);
                        player.load();
                        player.play();
                    }
                }, function (err) {
                    console.log(err.description);
                });
            }, false);
        }));

我很遗憾地收到错误:

  

错误:视频类型不受支持或文件路径无效

如何正确更改视频代码的来源以播放本地视频?

1 个答案:

答案 0 :(得分:1)

在查看了更多内容之后,我发现在将源文件设置为标记之前,必须将文件路径转换为URL对象。 改变这一行:

player.setAttribute("src", file.path);

为:

var src = URL.createObjectURL(file);
payer.setAttribute("src", src);