javascript - Cordova 外部应用 + 本地视频

Question

我们有一个使用 PhoneGap/Cordova 4.3.0 构建的 iOS 应用程序。此应用程序使用 <content src="http://example.com/foo" /> 直接加载外部网站在 config.xml文件。所有功能都包含在本网站中，因此我们实际上并未使用任何本地 HTML 或 JS 文件。

作为应用程序功能的一部分，我们必须播放一些视频。因为该应用程序也设计为离线工作，所以我们希望在本地缓存这些视频。因此，我们使用 FileTransfer 插件以及其他资源(如图像或 PDF)将它们下载到设备。下载文件后，我们将获得带有 file:// 的 URL。协议(protocol)。我们还可以选择使用 cdvfile://协议(protocol)。当我们使用 cdvfile://显示图片的网址，图片显示正确。但是，视频根本无法播放。

要播放视频，我们使用标准的 HTML5 视频标签:

<video width="auto" height="100%" controls="controls" autoplay="true">
    <source src="..." type="video/mp4" />
</video>

视频本身正在运行，它们可以从外部源正确播放(例如，如果我们从服务器而不是本地文件系统访问它们，它们就会播放)。我意识到这个问题与 Web 相关的概念有关，例如同源策略和访问本地文件系统的限制。然而，与此同时，我必须想知道为什么图像在这些相同的约束下工作正常。

到目前为止我尝试过的:

使用 file://和 cdvfile:// URL 为 src的视频。这不会产生任何视觉效果。屏幕只是黑色的。

使用 iframe与 src设置为视频网址。使用时file:// ，屏幕还是黑的。但是，当使用 cdvfile:// 时，出现iOS视频播放界面，有播放键和全屏键，但是视频不播放，也没有时间线。

向cordova添加一个名为video.html的本地文件它将 URL 作为参数并呈现 video将该 URL 标记为 src .计划是将此文件包含为 iframe ，但显然我无法制作 iframe到本地文件。我尝试了各种可能指向特定的 URL video.html文件(尽管实际上我不确定这是否可行)。我试过的有:cordova.file.applicationDirectory + 'www/video.html' , http://localhost/www/video.html , cdvfile://localhost/www/video.html .

我寻找了一些可以播放视频的cordova插件，但我没有找到适用于iOS的插件。大多数插件似乎都是针对 Android 的。

现在，我可能会以错误的方式处理这个问题。在我看来，cordova 的“标准用例”是您将 HTML/JS/CSS 文件存储在本地。我正在使用的外部内容可能有点不寻常。我将解释使我使用此功能的此应用程序的要求。

该应用程序应该是为多个平台构建的(尽管我们是从 iOS 开始的)。因此我们使用PhoneGap。

它应该可以在线和离线访问，尽管所有内容都来自服务器(本地没有生成内容)。这就是我们下载内容并将其保存在本地的原因。

它还应该即时自动更新自身的任何部分，而无需从 App Store 进行更新。这就是我们使用外部页面的原因 - 因为它有一个 cache.manifest这允许我们控制对 Web 应用程序代码的更新，同时允许它在本地缓存。这可能是需要考虑的最重要的事情，因为如果我们想在 Cordova 中本地保留一些文件，我们将不得不在 Javascript 中重新实现这个缓存功能(使用尽可能薄的层)。

无论如何，我主要关心的是如何让这些视频正常工作。我愿意尝试最黑客的解决方法!如果当前的开发决策真的不可能，那么也许你可以给我一些关于我应该如何构建应用程序以使其工作并仍然满足我的要求的提示。

非常感谢!

Answer 1

大约一年前我有一个类似的项目。但我不记得遇到过这个问题，因为我们将 html/js/css Assets 与应用程序捆绑在一起。

问题是您正在尝试从 http:/// 提供的 html 文件中加载 file:///协议(protocol) url。协议(protocol)，这不是原生 UIWebView 喜欢的东西。

您可以通过使用像 video://这样的自定义 URL 方案来绕过它，但是您需要编写一些 native 代码来拦截此请求并将实际视频通过管道返回到 URL 加载系统。

最终结果:



这是我如何使用 Cordova 4.3.0 和一些 ObjectiveC 做到的

创建一个名为 VideoURLProtocol 的新 Objective C 类，它扩展了 NSURLProtocol:

VideoURLProtocol.h:

#import <Foundation/Foundation.h>

@interface VideoURLProtocol : NSURLProtocol <NSURLConnectionDelegate>

@property (strong, nonatomic) NSURLConnection *connection;

@end

VideoURLProtocol.m:

#import "VideoURLProtocol.h"

@implementation VideoURLProtocol

@synthesize connection;

+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
    return [[[request URL] absoluteString] rangeOfString:@"video://"].location != NSNotFound;
}

+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
    return request;
}

+ (BOOL)requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b {
    return [super requestIsCacheEquivalent:a toRequest:b];
}

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
    [self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed];
}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
    [self.client URLProtocol:self didLoadData:data];
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection {
    [self.client URLProtocolDidFinishLoading:self];
}

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error {
    [self.client URLProtocol:self didFailWithError:error];
}

- (void)startLoading {
    NSString *currentURL = [[self.request URL] absoluteString];
    NSString *newURL = [currentURL stringByReplacingOccurrencesOfString:@"video://" withString:@"file:///"];
    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:[[NSURL alloc] initWithString:newURL]];
    self.connection = [NSURLConnection connectionWithRequest:request delegate:self];
}

- (void)stopLoading {
    [self.connection cancel];
    self.connection = nil;
}

@end

将以下行添加到 AppDelegate.m 的 didFinishLaunchingWithOptions 方法中

.
.
// These lines should already be there
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];

// This line
[NSURLProtocol registerClass:[VideoURLProtocol class]];
.
.    

这是使用这个新 URL 方案的 javascript 代码

document.addEventListener('deviceready', function(){    
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){        
        var caches = fileSystem.root.nativeURL.replace("Documents", "Library/Caches"), 
            videoPath = caches + "video.mp4";
        new FileTransfer().download("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4", videoPath, function(entry){            
            document.getElementsByTagName("video")[0].src = caches.replace("file:///", "video://") + "video.mp4"
        }, function(error){
            alert("unable to download file: " + error);
        });
    });
}, false);

还有一些值得一提的点:

请注意，在我的 javascript 代码中，我将文件下载到“/Library/Caches”而不是“/Documents”目录(默认位置)，这是因为“/Documents”目录被备份到 iCloud，Apple 拒绝尝试的应用程序备份超过 100 MB。这是我的应用程序被拒绝后发现的困难方法。
您可以在以下位置查看应用占用的空间:设置 > iCloud > 存储 > 管理存储 > {{您的 iphone 名称}} > 显示所有应用

您可以通过将以下行添加到 config.xml 来自动播放视频

<preference name="MediaPlaybackRequiresUserAction" value="false" />    

您还可以通过将以下行添加到 config.xml 来内联播放视频除此之外，您还需要向视频添加 webkit-playsinline="true"属性:

<preference name="AllowInlineMediaPlayback" value="true" />

<video controls="controls" autoplay="true" webkit-playsinline="true" preload="auto">
</video>

这是 Ray 的一个非常有趣的教程，它非常详细地解释了 NSURLProtocol: http://www.raywenderlich.com/59982/nsurlprotocol-tutorial