在 Chrome 打包应用程序中播放本地视频文件答案

【问题标题】：Playing local video file in a Chrome Packaged App在 Chrome 打包应用程序中播放本地视频文件
【发布时间】：2013-05-11 19:47:45
【问题描述】：

是否可以从打包的应用程序中播放本地视频文件？我已经编写了代码来选择文件（chrome.fileSystem.chooseEntry）并识别路径（chrome.fileSystem.getDisplayPath），但是将其设置为我的视频标签的源返回：

不允许加载本地资源：file:///

提前致谢。

【问题讨论】：

我取得了一些进展，但还不够好。我决定尝试将其加载为 data-uri 并将其设置为我的视频标签中源标签的 src 属性，在我在我的视频对象上调用方法加载并且视频在我的应用程序上变黑之后它不响应任何命令，例如播放。在执行将序列化视频设置为数据 uri 的行之后运行此应用程序的进程将其内存使用量增加到超过 1gb。我想我会务实，只是设置一些视频流服务器。
你看过 GitHub 示例吗？ github.com/GoogleChrome/chrome-app-samples/tree/master/… 如果您可以通过媒体库 API 而不是加载任何任意文件，则可能会起作用。它也可能适用于本地文件。
我做了 sowbug，但是将 100mb 左右的视频序列化为 data-uri 非常慢，几乎每次应用程序崩溃时。 :/ 我试图将视频复制到应用程序的持久区域，但是当我将 src 属性设置为该地址（FileEntry 的完整路径或 toURL）并且对视频的请求被取消时。
请您在 crbug.com 上提交一个错误，并使用来自 chrome://crashes 的崩溃 ID？我们将不胜感激。
我会这样做，仅供参考，我也在尝试在这里找到解决方案：bit.ly/19BbP1r

标签： google-chrome html5-video google-chrome-app

【解决方案1】：

我的解决方案是通过这个调用选择本地文件：

chrome.fileSystem.chooseEntry({'type': 'openFile'}, function(fileEntry) {
    // ...
});

在内存中，我在沙盒持久区域中获得了一个目录：

fileSystem.root.getDirectory('videos', { create : true }, function(dirEntry) {
    // ...
}, $scope.errorHandler);

并将本地文件复制到该目录：

fileEntry.copyTo(dirEntry, fileEntry.name, function(newFileEntry) {
    video.src = newFileEntry.toURL();
});

效果很好而且很干净，我在这里没有实现但很重要的功能是编解码器检测，因为如果您尝试加载 Chrome 不支持的视频，您可能会认为有问题代码，但它与编解码器/视频播放器有关。

完整代码如下：

window.requestFileSystem(window.PERSISTENT, 300*1024*1024, function(fileSystem) {
    console.log('A request to access the file system have been made.');

    $scope.fileSystem = fileSystem;
}, $scope.errorHandler);

$scope.loadVideo = function() {
    chrome.fileSystem.chooseEntry({'type': 'openFile'}, function(fileEntry) {
       $scope.fileSystem.root.getDirectory('videos', { create : true }, function(dirEntry) {
          fileEntry.copyTo(dirEntry, fileEntry.name, function(newFileEntry) {
            video.src = newFileEntry.toURL();
          });
       }, $scope.errorHandler);
  });
};

【讨论】：

【解决方案2】：

我有一个类似的问题并遇到了同样的问题，由于安全隐患，您无法加载 file:/// 网址，并且使用媒体库示例会崩溃，因为我的视频文件超过 150MB。

chrome 团队建议我查看https://github.com/GoogleChrome/apps-resource-loader 并使用RAL.RemoteImage 使用的方法将文件下载到沙盒存储，然后从那里使用它。

我使用ral.min.js 并基于RemoteImage 对象实现了我自己的RemoteVideo 对象，将元素更改为video 对象而不是img 并使用海报而不是默认值加载之前的图像，这对我有用。

【讨论】：

dar，感谢您的回答。我也只是想回答它，因为我找到了类似的解决方案。我所做的是在我的应用程序沙盒存储上获取/创建一个目录并将选择的文件复制到那里，在本地内存中使用新的 fileEntry 我调用了 toURL() 方法并获得了持久存储上复制视频的地址。

【解决方案3】：

我发现有效的方法是从 FileEntry 创建一个对象 url，并将其用作 <video> 标记的 src。这是一个示例：

video_file.file(function(file) {
        var video_url = webkitURL.createObjectURL(file);
        $player.attr("src", video_url);
});

【讨论】：