Using Cordova for mobile applications to play local video files

Question

Using Cordova for mobile applications to play local video files

Our iOS app, developed using PhoneGap / Cordova 4.3.0, loads an external website directly utilizing

<content src="http://example.com/foo" />

in the config.xml file. All functionality resides within this website, eliminating the need for local HTML or JS files.

To incorporate video playback functionality while maintaining offline access, we are caching videos locally on the device using the FileTransfer plugin alongside other resources like images and PDFs. Upon downloading, the files generate URLs with the file:// protocol, or alternatively, the cdvfile:// protocol. Surprisingly, while images display properly using cdvfile:// URLs, videos fail to play.

We have employed standard HTML5 video tags for playing the videos:

<video width="auto" height="100%" controls="controls" autoplay="true">
    <source src="..." type="video/mp4" />
</video>

The videos function correctly when accessed externally (i.e., from the server instead of the local filesystem). This issue appears linked to web concepts such as the same-origin policy and restrictions accessing the local filesystem. The puzzling aspect is why images behave as expected under these constraints.

Approaches attempted thus far include:

Using file:// and cdvfile:// URLs as the video src, resulting in a black screen devoid of any visual content.
Embedding an iframe with the video URL set as the src</code. While <code>file:// maintenance a black screen, switching to cdvfile:// unveils the iOS video player interface but fails to initiate video playback or provide a timeline.
Creating a local file named video.html inside Cordova, intending to invoke this file via an iframe. Attempts to reference the video.html file yielded inconclusive outcomes despite trying various URLs referencing it. Some attempts included:
```
cordova.file.applicationDirectory + 'www/video.html'
```
, http://localhost/www/video.html,
```
cdvfile://localhost/www/video.html
```
.
Pursuing Cordova plugins for video playback specifically for iOS, without success as most plugins cater to Android platforms.

This unconventional use case within Cordova prompts reconsideration of our approach. Ordinarily, Cordova applications store HTML/JS/CSS files locally, unlike our scenario where all content originates from external sources. We have adapted this method due to specific app requirements which I will outline below.

The intent is to deploy the app across multiple platforms initially targeting iOS, hence our use of PhoneGap.
The app aims to be accessible both online and offline, with all content retrieved from the server (sans locally produced content), necessitating the download and local storage of online resources.
Auto-updating capability without relying on App Store updates is desired, achieved through an external page with a cache.manifest ensuring control over web app code updates while permitting local caching. Noteworthy is that replicating this cache functionality within Cordova would entail significant JavaScript overhead.

My primary concern pertains to resolving the video playback issue at hand. I am open to exploring unconventional solutions! Should the current development choices render resolution unattainable, guidance on restructuring the application to meet the objectives while enabling video playback functionality will be greatly appreciated.

Thank you sincerely!

javascript ios cordova html5-video phonegap-build

Answer 1

Answer №1

About a year ago, I worked on a project that had similarities to this one. We didn't encounter this issue back then because we bundled our HTML, JS, and CSS assets with the app.

The problem arises from trying to load a file:/// protocol URL from an HTML file served through http:///. This causes discomfort for the native UIWebView.

To resolve this issue, you can use a custom URL scheme like video://, but it requires writing some native code to intercept requests and redirect the actual video back to the URL loading system.

My approach:

This is how I implemented it using Cordova 4.3.0 and Objective-C:

Create a new Objective-C class named VideoURLProtocol extending 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

Add the following line to the didFinishLaunchingWithOptions method of AppDelegate.m

.
.
// These lines should already be there
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];

// This line
[NSURLProtocol registerClass:[VideoURLProtocol class]];
.
.

Here's the JavaScript code using the new URL scheme:

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

Additional notes:

In the JavaScript code, I'm downloading the file to "/Library/Caches" instead of the default "/Documents" directory. Apple rejects apps that try to backup more than ~100 MB stored in the "/Documents" directory, which caught me off guard after my app was rejected.

You can set videos to autoplay by adding a line to your config.xml:

<preference name="MediaPlaybackRequiresUserAction" value="false" />

To play videos inline, add the following line to your config.xml and include webkit-playsinline="true" attribute in your video tag:

<preference name="AllowInlineMediaPlayback" value="true" />

<video controls="controls" autoplay="true" webkit-playsinline="true" preload="auto">
</video>

For more information on NSURLProtocol, check out Ray's tutorial:

Answer 2

About a year ago, I worked on a project that had similarities to this one. We didn't encounter this issue back then because we bundled our HTML, JS, and CSS assets with the app.

The problem arises from trying to load a file:/// protocol URL from an HTML file served through http:///. This causes discomfort for the native UIWebView.

To resolve this issue, you can use a custom URL scheme like video://, but it requires writing some native code to intercept requests and redirect the actual video back to the URL loading system.

My approach:

This is how I implemented it using Cordova 4.3.0 and Objective-C:

Create a new Objective-C class named VideoURLProtocol extending 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

Add the following line to the didFinishLaunchingWithOptions method of AppDelegate.m

.
.
// These lines should already be there
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];

// This line
[NSURLProtocol registerClass:[VideoURLProtocol class]];
.
.

Here's the JavaScript code using the new URL scheme:

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

Additional notes:

In the JavaScript code, I'm downloading the file to "/Library/Caches" instead of the default "/Documents" directory. Apple rejects apps that try to backup more than ~100 MB stored in the "/Documents" directory, which caught me off guard after my app was rejected.

You can set videos to autoplay by adding a line to your config.xml:

<preference name="MediaPlaybackRequiresUserAction" value="false" />

To play videos inline, add the following line to your config.xml and include webkit-playsinline="true" attribute in your video tag:

<preference name="AllowInlineMediaPlayback" value="true" />

<video controls="controls" autoplay="true" webkit-playsinline="true" preload="auto">
</video>

For more information on NSURLProtocol, check out Ray's tutorial:

Answer 3

Answer №2

Through my own experiences, I have encountered issues when using the file:// protocol on iOS due to its starting point at the root of the device's filesystem.

In this scenario, it seems unlikely that Cross-Origin problems are causing any hindrances as Cordova does not implement Cross-Origin requests, treating all requests as originating from the requesting source itself. For more information, you can refer to this answer.

A potential solution could involve utilizing a relative URL instead of relying on a specific protocol. Implementing this approach may vary depending on the successful download of the file.

<video width="auto" height="100%" controls="controls" autoplay="true">
    <source src="/localhost/www/video.mp4" type="video/mp4" />
</video>

The path cdvfile://localhost/www/ would have been designated as the target argument in your call to fileTransfer.download(), as explained here.

You may need to either create the video element or set the video source in JavaScript once the successCallback has been triggered. Again, assign the source as a relative URL.

Note: Videos will not automatically play on mobile devices.

For further details, visit the Safari Developer Library's page on Device-Specific Considerations.

In Safari on iOS (across all devices, including iPad), where users might be on cellular networks with data usage charges, preload and autoplay functionalities are disabled.

Answer 4

Through my own experiences, I have encountered issues when using the file:// protocol on iOS due to its starting point at the root of the device's filesystem.

In this scenario, it seems unlikely that Cross-Origin problems are causing any hindrances as Cordova does not implement Cross-Origin requests, treating all requests as originating from the requesting source itself. For more information, you can refer to this answer.

A potential solution could involve utilizing a relative URL instead of relying on a specific protocol. Implementing this approach may vary depending on the successful download of the file.

<video width="auto" height="100%" controls="controls" autoplay="true">
    <source src="/localhost/www/video.mp4" type="video/mp4" />
</video>

The path cdvfile://localhost/www/ would have been designated as the target argument in your call to fileTransfer.download(), as explained here.

You may need to either create the video element or set the video source in JavaScript once the successCallback has been triggered. Again, assign the source as a relative URL.

Note: Videos will not automatically play on mobile devices.

For further details, visit the Safari Developer Library's page on Device-Specific Considerations.

In Safari on iOS (across all devices, including iPad), where users might be on cellular networks with data usage charges, preload and autoplay functionalities are disabled.

Using Cordova for mobile applications to play local video files

Answer №1

Answer №2

Similar questions

Erase jQuery from the text

JavaScript script to modify the parameter 'top' upon clicking

Troubleshooting Firebase AppCheck v8 in React: Encountering a 400 error message stating "App ID is Invalid: 'undefined'"

Upon executing the `npm start` command, the application experiences a crash

The state in Reactjs is not displaying as expected

How do the authentication and authorization processes in my frontend connect with the backend of my API system?

Using jQuery to Check Cookies and Hide Content Depending on the Value and Data Attributes

Configuring Proxy Settings for WebpackDevServer

Instructions on creating an input field and a slider simultaneously

Leveraging Ajax for Executing a MySQL Query in PHP upon Clicking the Facebook Like Button

Time when the client request was initiated

Display complete information of the selected list in a modal window by clicking on it in PHP Yii

methods for retrieving nested JSON data from an API endpoint

Transferring data from Node.js server to React client with axios communication

In node.js, the global variable fails to update within a while loop

Assigning a specific data type value to an element as it enters the top of the viewport

Having trouble incorporating autocomplete search results into an HTML table using Jquery, Ajax, and JSP

What is the best way to generate mock JSON data on the client side using Objective-C for iOS development?

What is the process for running child_process when a user clicks on a view in an application

Navigating through search results on an XML page using jQuery