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

Question

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.

Just a wild guess, but as your HTML file contains a relative path to your video file, it is going to load it from the same directory the HTML file is in. The first version loads it from the application bundle, the second one from the documents folder. Are you sure that the video file exists in the documents folder? You may want to check it in the simulator and browse the file system on your Mac. — Björn Marschollek, Aug 03 '11 at 14:01
@Bjorn Yes I have manually put video into documents folder. I have 2 videos one smaller and one is larger. Smaller gets load but larger doesn't. — Janak Nirmal, Aug 03 '11 at 14:11
Do you receive memory warnings when trying to play the larger video? — Björn Marschollek, Aug 03 '11 at 14:14
@Bjorn no any other problem is there except loading that video. This controllers only does that loading html file from the document folder into webview. Than user can watch video. Purpose is like watching video from locally rather than loading from live site without internet and Filesharing is enabled so user can replace videos whenever new videos are available from website. Thax for your time. Any guesses why this happens ? — Janak Nirmal, Aug 03 '11 at 14:24
Did you consider that there might be a problem with the video? Does it play in an MPMoviePlayerController instance? — Björn Marschollek, Aug 04 '11 at 07:00
Either [**check it**](http://stackoverflow.com/questions/6921749/how-to-re-set-the-height-width-of-embedded-player-using-css) or [**check this one**](http://stackoverflow.com/questions/6909738/embedded-video-playing-with-multiple-orientations), may help you out... — alloc_iNit, Aug 05 '11 at 04:19

score 10 · Accepted Answer · answered Aug 06 '11 at 04:22

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.

score 1 · Answer 2 · answered Aug 05 '11 at 04:02

1

Use HTML5 ?

< video src="myvideoname.mov">

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

answered Aug 05 '11 at 04:02

Sum

4,369
1
22
38

score 0 · Answer 3 · answered Jun 03 '14 at 03:26

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

score 0 · Answer 4 · answered Aug 03 '11 at 15:17

0

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?

answered Aug 03 '11 at 15:17

Mihai Fratu

7,579
2
37
63

There is requirement of playing from HTML file only. I can not use this code in my project. Thax for your input. – Janak Nirmal Aug 03 '11 at 15:20
if your are using html5 doctype you have to keep in mind about this things: http://blog.zencoder.com/2010/10/06/how-many-formats-do-i-need-for-html5-video/ – matthewb Nov 12 '12 at 08:41

score 0 · Answer 5 · answered Aug 09 '11 at 02:31

0

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.

answered Aug 09 '11 at 02:31

Johan Kool

15,637
8
64
81

1

This doesn't seem to work as the video player bypasses the cache – Richard M Jul 18 '12 at 15:33
@RichardM Correct -- UIWebView apparently skips the cache and streams video directly from the server; the cache never even sees the request. – Caleb Feb 28 '13 at 22:59

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

5 Answers5

Linked