2

Is it possible to play a local video file from a packaged app? I have already written the code to choose the file(chrome.fileSystem.chooseEntry) and identify the path(chrome.fileSystem.getDisplayPath), but setting it to the source of my video tag returns:

Not allowed to load local resource: file:///

Thanks in advance.

4

3 回答 3

4

My solution was to select the local file through this call:

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

With that in memory I got a directory in my sandboxed persistent area:

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

And copied the local file to that directory:

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

That worked perfectly and it's pretty clean, the feature I've not implemented in here but is important is the codec detection, because if you try to load videos that are not supported by Chrome you may think there is something wrong with the code but it's related to the codec/video player.

For further reference here is the complete code:

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);
  });
};
于 2013-05-20T13:20:03.100 回答
1

I had a similar question and ran into the same issues, you cannot load file:/// urls because of security implications, and using the media gallery example was crashing because my video files are over 150MB.

The chrome team suggested I look at https://github.com/GoogleChrome/apps-resource-loader and use the method the RAL.RemoteImage uses to download the file to the sandbox storage and then use it from there.

I use the ral.min.js and implemented my own RemoteVideo object that I based on the RemoteImage object, changing the element to a video object instead of an img and using the poster instead of a default image before it is loaded and this worked for me.

于 2013-05-20T12:39:11.210 回答
1

I've found what works is creating an object url from the FileEntry and use is as the src for the <video> tag. Here's a sample:

video_file.file(function(file) {
        var video_url = webkitURL.createObjectURL(file);
        $player.attr("src", video_url);
});
于 2014-01-01T17:01:34.957 回答