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

Asked 20/7, 2011 at 9:34 Answered 3/6, 2014 at 3:26

Solved iphone ipad uiwebview movie embedded-video

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.

Exchangeable answered 20/7, 2011 at 9:34 Comment(8)

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. – Insolvable 3/8, 2011 at 14:1

@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. – Exchangeable 3/8, 2011 at 14:11

@Bjorn It just shows black portion there. – Exchangeable 3/8, 2011 at 14:12

Do you receive memory warnings when trying to play the larger video? – Insolvable 3/8, 2011 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 ? – Exchangeable 3/8, 2011 at 14:24

Did you consider that there might be a problem with the video? Does it play in an MPMoviePlayerController instance? – Insolvable 4/8, 2011 at 7:0

Either check it or check this one, may help you out... – Impaste 5/8, 2011 at 4:19

You get any solution?. @PeterSmith – Epigenesis 12/1, 2017 at 9:0

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.

Exchangeable answered 6/8, 2011 at 4:22 Comment(0)

Use HTML5 ?

< video src="myvideoname.mov">

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

Anorak answered 5/8, 2011 at 4:2 Comment(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?

Tumefaction answered 3/8, 2011 at 15:17 Comment(2)

There is requirement of playing from HTML file only. I can not use this code in my project. Thax for your input. – Exchangeable 3/8, 2011 at 15:20

if your are using html5 doctype you have to keep in mind about this things: blog.zencoder.com/2010/10/06/… – Shem 12/11, 2012 at 8:41

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.

Allier answered 9/8, 2011 at 2:31 Comment(2)

This doesn't seem to work as the video player bypasses the cache – Linkous 18/7, 2012 at 15:33

@RichardM Correct -- UIWebView apparently skips the cache and streams video directly from the server; the cache never even sees the request. – Norse 28/2, 2013 at 22:59

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

Petua answered 3/6, 2014 at 3:26 Comment(0)

Recommended topics

Hot tags