Cordova 外部应用程序 + 本地视频

Question

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

作为应用功能的一部分，我们必须播放一些视频。由于该应用程序也设计为离线工作，因此我们希望在本地缓存这些视频。因此，我们使用 FileTransfer 插件将它们与其他资源（如图像或 PDF）一起下载到设备。下载文件后，我们将使用file:// 协议获取 URL。我们还可以选择使用cdvfile:// 协议。当我们使用cdvfile:// URL 显示图像时，图像会正确显示。但是，视频根本不播放。

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

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

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

到目前为止我所尝试的：

1. 使用file:// 和cdvfile:// URL 作为视频的src。这不会产生任何视觉效果。屏幕只是黑屏。
2. 使用 iframe 并将 src 设置为视频 URL。使用file://时，还是黑屏。但是在使用cdvfile://时，出现了iOS视频播放界面，有播放键和全屏键，但是视频不播放，也没有时间线。
3. 将一个名为video.html 的本地文件添加到cordova，该文件将URL 作为参数并呈现video 标记，该URL 为src。计划是将此文件作为iframe 包含在内，但显然我无法将iframe 添加到本地文件中。我尝试了各种可能指向该特定 video.html 文件的 URL（尽管实际上我不确定这是否可行）。我试过的有：cordova.file.applicationDirectory + 'www/video.html'、http://localhost/www/video.html、cdvfile://localhost/www/video.html。
4. 我寻找了一些可以播放视频的 cordova 插件，但我没有找到一个适用于 iOS 的插件。大多数插件似乎都是针对 Android 的。

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

• 该应用程序应该是为多个平台构建的（尽管我们是从 iOS 开始的）。因此我们使用 PhoneGap。
• 它应该可以在线和离线访问，尽管所有内容都来自服务器（本地不生成任何内容）。这就是我们下载内容并将其保存在本地的原因。
• 它还应该即时自动更新自身的任何部分，而无需从 App Store 进行更新。这就是我们使用外部页面的原因——因为它有一个cache.manifest，它允许我们控制对 Web 应用程序代码的更新，同时允许它在本地缓存。这可能是需要考虑的最重要的事情，因为如果我们想在 Cordova 中本地保留一些文件，我们将不得不在 Javascript 中重新实现此缓存功能（使用尽可能薄的层）。

无论如何，我主要关心的是如何让这些视频正常工作。我愿意尝试最骇人听闻的解决方法！如果当前的开发决策确实无法实现，那么也许您可以给我一些提示，告诉我应该如何构建应用程序以使其工作并仍然满足我的要求。

非常感谢！

Answer 1

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

问题是您正在尝试从http:/// 协议提供的 html 文件中加载 file:/// 协议 url，这不是本机 UIWebView 所接受的。

您可以通过使用自定义 URL 方案（如 video://）绕过此问题，但您需要编写一些本机代码来拦截此请求并将实际视频通过管道传回 URL 加载系统。

最终结果：

这是我使用 Cordova 4.3.0 和一些 ObjectiveC 的方法

1. 创建一个名为 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

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

   .
   .
   // These lines should already be there
   self.window.rootViewController = self.viewController;
   [self.window makeKeyAndVisible];
   
   // This line
   [NSURLProtocol registerClass:[VideoURLProtocol class]];
   .
   .    
   

2. 这里是使用这个新 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

Answer 2

根据我在 iOS 上使用 file:// 协议的经验，因为该协议从设备文件系统的根目录开始。

我不认为这里会遇到任何跨域问题，因为 Cordova 没有实现跨域请求，而是将所有请求视为来自它们请求的源。 See this answer.

我的理论解决方案是使用相对 URL，而不是尝试使用任何协议。但是，您实现这一点的方式可能取决于文件何时成功下载。

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

其中cdvfile://localhost/www/ 是您在调用fileTransfer.download() referenced here 时为target 参数设置的路径。

successCallback 触发后，可能需要创建视频元素或在 javascript 中设置视频源。再次将 src 设置为相对 URL。

请注意，视频不会在移动设备上自动播放

From the Safari Developer Library

在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可能在蜂窝网络上并按数据单位收费，因此禁用了预加载和自动播放。