javascript - 在 Windows 8 中更改视频标签的来源

标签 javascript html windows-8

我正在尝试使用 HTML 和 JavaScript 为 Windows 8 构建一个小型视频播放器。我希望能够使用 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);
        }));

不幸的是,我收到错误:

Error: Unsupported video type or invalid file path

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

最佳答案

经过更多查看后,我发现文件路径必须先转换为 URL 对象,然后才能设置为标记的源。 更改此行:

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

至:

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

关于javascript - 在 Windows 8 中更改视频标签的来源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16956304/

相关文章:

javascript - Plupload 添加文件时自动开始上传

javascript - 当一行中的元素数量可变时,如何使用 jQuery 为每一行着色?

html - 在不将 flex 应用于 CSS 元素的情况下设置折叠优先级?

html - 使模态 Div 可滚动而不是页面背景

c# - 如何引用与我的 metro 风格应用程序打包在一起的图像源文件?

javascript - rdio 播放器页脚 slider

javascript - 正则表达式在 chrome 和 ie 中工作,但在 firefox 中不起作用

c# - 在 sqlite 中更新数据

windows-8 - Windows Phone 8 - 设备管理

javascript - 为什么这段代码会导致 Chrome 卡住?