从应用程序的 Documents 文件夹将视频嵌入到 UIWebView 中加载的 html 文件中答案

【问题标题】：Embed video in html file loaded in UIWebView from Documents folder of application从应用程序的 Documents 文件夹将视频嵌入到 UIWebView 中加载的 html 文件中
【发布时间】：2011-07-20 09:34:31
【问题描述】：

我有一个名为 videoplay.html 的 html 文件，内容如下

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <p>
        This is demo html file for playing movie file embedded.
    </p>
    <p>
        <video controls>
            <source src="myvideoname.mov">
        </video>
    </p>

</body>
</html>

同时使用以下代码(Loading from application bundle)它加载html内容并显示电影并能够播放电影文件。

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSString *path = [[NSBundle mainBundle] pathForResource:@"videoplay" ofType:@"html"];
NSString *content = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:content baseURL:baseURL];

使用以下代码(Loading from Document folder of application)它加载html内容但显示黑色部分而不是电影文件。

NSArray *documentPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDir =[documentPaths objectAtIndex:0]
NSString *pathOfHTmlFile = [documentsDir stringByAppendingPathComponent:@"videoplay.html"];
NSString *content = [NSString stringWithContentsOfFile:pathOfHTmlFile encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:content baseURL:[NSURL URLWithString:documentsDir]];

我在上面的代码中遗漏了什么导致我的代码无法工作？有什么想法吗？

我希望我的应用程序具有 UIFileSharingEnabled 功能，该功能使用户能够将视频放在文档文件夹本身中，这样我的视频文件将仅在文档文件夹中。

赏金更新 我发现如下。但它仍然只适用于较小的视频（大约小于 50 MB），如果视频较大（大约大于 100 MB）它不起作用。

NSArray *documentPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDir =[documentPaths objectAtIndex:0];
NSString *pathOfHTmlFile = [documentsDir stringByAppendingPathComponent:@"videoplay.html"];
NSString *content = [NSString stringWithContentsOfFile:pathOfHTmlFile encoding:NSUTF8StringEncoding error:nil];

documentsDir = [documentsDir stringByReplacingOccurrencesOfString:@"/" withString:@"//"];
documentsDir = [documentsDir stringByReplacingOccurrencesOfString:@" " withString:@"%20"];

NSURL *baseURL = [NSURL URLWithString:[NSString stringWithFormat:@"file:/%@//", documentsDir]];

NSLog(@"Baseurl--->%@",baseURL);
[self.webView loadHTMLString:content baseURL:baseURL];

因为我必须在我的项目中实现这一点，所以我没有其他方法可以做。

【问题讨论】：

只是一个疯狂的猜测，但由于您的 HTML 文件包含视频文件的相对路径，它将从 HTML 文件所在的同一目录加载它。第一个版本从应用程序包，来自文档文件夹的第二个。您确定视频文件存在于文档文件夹中吗？您可能想在模拟器中检查它并在您的 Mac 上浏览文件系统。
@Bjorn 是的，我已手动将视频放入文档文件夹。我有 2 个视频，一个较小，一个较大。较小的会加载，但较大的则不会。
@Bjorn 它只是在那里显示黑色部分。
在尝试播放较大的视频时是否收到内存警告？
@Bjorn 除了加载该视频外，没有任何其他问题。此控制器仅将 html 文件从文档文件夹加载到 webview 中。用户可以观看视频。目的就像从本地观看视频，而不是从没有互联网的实时站点加载，并且启用了文件共享，因此用户可以在网站上有新视频时替换视频。谢谢你的时间。任何猜测为什么会发生这种情况？

标签： iphone ipad uiwebview movie embedded-video

【解决方案1】：

经过大量的努力和研发，我发现，

在Simulator 3.2 和device with iOS 4.3.3 版本下，如果HTML 和视频文件位于同一位置，则使用以下代码可以正常工作。

NSArray *documentPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDir =[documentPaths objectAtIndex:0];
NSString *pathOfHTmlFile = [documentsDir stringByAppendingPathComponent:@"videoplay.html"];
NSString *content = [NSString stringWithContentsOfFile:pathOfHTmlFile encoding:NSUTF8StringEncoding error:nil];

documentsDir = [documentsDir stringByReplacingOccurrencesOfString:@"/" withString:@"//"];
documentsDir = [documentsDir stringByReplacingOccurrencesOfString:@" " withString:@"%20"];

NSURL *baseURL = [NSURL URLWithString:[NSString stringWithFormat:@"file:/%@//", documentsDir]];

NSLog(@"Baseurl--->%@",baseURL);
[self.webView loadHTMLString:content baseURL:baseURL];

仍然在Simulator 4.2 下不起作用。它显示黑色部分，而不是视频。然而无法找到Simulator 4.2 的解决方案，但它可以在设备上运行，所以我猜代码绝对没问题。

将此作为答案发布，以便如果有人这样做可能会有用。

【讨论】：

【解决方案2】：

使用 HTML5 吗？

如果所有内容都在一个组中而不是文件夹中，它应该会找到其他视频并正常工作。

【讨论】：

【解决方案3】：

为什么使用 HTML 文件播放视频而不使用 MPMoviePlayerViewController？

NSURL *assetURL = [NSURL fileURLWithPath:<#path_to_movie#>];
MPMoviePlayerController *moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:assetURL];  

if ([moviePlayer respondsToSelector:@selector(setFullscreen:animated:)]) {
    // Use the new 3.2 style API  
    moviePlayer.shouldAutoplay = YES;  
    [_delegate.view addSubview:moviePlayer.view];
    [moviePlayer setFullscreen:YES animated:YES];  
} else {  
    // Use the old 2.0 style API
    [moviePlayer play];
}

这不适合你吗？

【讨论】：

只需要从 HTML 文件播放。我不能在我的项目中使用此代码。谢谢你的意见。
如果您使用的是 html5 文档类型，您必须牢记这一点：blog.zencoder.com/2010/10/06/…

【解决方案4】：

让本地内容显示在UIWebView 中的一个技巧是使用替换缓存。 Matt Gallagher 在他的博客上有一些 sample code。

基本上，您会为电影分配一个 URL，例如“http://www.example.com/movie.mp4”，您可以在 HTML 中使用它来引用电影。加载电影时，替代缓存不会转到 URL，而是在本地获取数据。

AFAIK 这适用于所有 iOS 版本。

【讨论】：

这似乎不起作用，因为视频播放器绕过了缓存
@RichardM 正确 - UIWebView 显然跳过缓存并直接从服务器流式传输视频；缓存甚至从未看到请求。

【解决方案5】：

我遇到了类似的问题。一个名为 index.html 的 html 文件位于名为 assets 的 Documents 目录的 子文件夹 中。

文档/资产/index.html

 <html>
 <head>

 <script src="bundle.js"></script>
 <link href="styles.css" rel="stylesheet" type="text/css"></link>
 <base href="https://wikipedia.org">

 </head>
 <body>
      ...
 </body>
 </html>

请注意，它引用了资产目录中的其他文件。即bundle.js和styles.css。

已接受答案的代码示例的以下变体允许 UIWebView 加载 index.html 并使其引用的 js 和 css 文件仍然有效：

 NSArray *documentsPath = NSSearchPathForDirectoriesInDomains( NSDocumentDirectory, NSUserDomainMask, YES);

 NSString *assetsPath = [[documentsPath firstObject] stringByAppendingPathComponent:@"assets"];

 NSString *indexHTMLFilePath = [assetsPath stringByAppendingPathComponent:@"index.html"];

 NSString *encodedAssetsPath = [assetsPath stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

 NSURL *baseURL = [NSURL URLWithString:[NSString stringWithFormat:@"file:///%@/", encodedAssetsPath]];

 NSData *indexHTMLFileData = [[NSFileManager defaultManager] contentsAtPath: indexHTMLFilePath];

 [self.webView loadData:indexHTMLFileData MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:baseURL];

【讨论】：