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

coder 2023-07-27 原文

我们有一个使用 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 中重新实现这个缓存功能(使用尽可能薄的层)。

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

非常感谢!

最佳答案

大约一年前我有一个类似的项目。但我不记得遇到过这个问题，因为我们将 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

关于javascript - Cordova 外部应用 + 本地视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29455858/

javascript Cordova code 34 video ios html5-video phonegap-build

有关javascript - Cordova 外部应用 + 本地视频的更多相关文章

ruby - 将差异补丁应用于字符串/文件 - 2
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
ruby - 使用 C 扩展开发 rubygem 时，如何使用 Rspec 在本地进行测试？ - 2
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby-on-rails - 如何优雅地重启 thin + nginx？ - 2
我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？最佳答案设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI
ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2
是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好最佳答案我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

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

有关javascript - Cordova 外部应用 + 本地视频的更多相关文章

随机推荐