Embed video in html file loaded in UIWebView from Documents folder of application

问题

I have an html file named videoplay.html with following content

<!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>

while Using following code (Loading from application bundle) It loads html content and shows movie and able to play movie file.

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];

Using following code (Loading from Document folder of application) It loads html content but shows black portion instead of movie file.

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]];

What am I missing in above code which cause my code not to work ? Any Idea ?

I want my application with feature UIFileSharingEnabled which enables user to put videos in the document folder itself so my video files would be in documents folder only.

Update for Bounty I found something as follows. But still it only works for smaller videos(less than 50 MB approx) if videos are larger (greater than 100 MB approx) it is not working.

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];

As I must need to implement this in my project there is no other way to do for me.

回答1:

After lots of struggling and R&D I found that,

Under Simulator 3.2 and on device with iOS 4.3.3 version, using following code it is working if HTML and Video files are at the same location.

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];

Still under Simulator 4.2 it does not work. Instead of video it shows black portion. Yet unable to find the solution for Simulator 4.2 but it works on device so I guess code is absolutely fine.

Posting this as answer so that if any one doing the same may be useful.

回答2:

Use HTML5 ?

< video src="myvideoname.mov">

If everything is in a group and not a folder, it should find the other video and work.

回答3:

Why use an HTML file to play the video and not use 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];
}

Doesn't this work for you?

回答4:

One trick to get local content to show up in UIWebView is to use a substitution cache. Matt Gallagher has some sample code up on his blog.

Basically you assign an URL to the movie, say "http://www.example.com/movie.mp4", which you use in your HTML to refer to the movie. When the movie is loaded, instead of going to the URL, the substitution cache fetches the data locally.

AFAIK this works with all iOS versions.

回答5:

I had a similar issue. An html file called index.html in a sub-folder of the Documents directory called assets.

Documents/assets/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>

Note that it's referencing other files in the assets directory. Namely, bundle.js and styles.css.

The following variation on the accepted answer's code example allowed the UIWebView to load index.html and have the js and css files it referenced still work:

 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];

来源：https://stackoverflow.com/questions/6759818/embed-video-in-html-file-loaded-in-uiwebview-from-documents-folder-of-applicatio

标签

iphone

ipad

uiwebview

movie

embedded-video