Geek Answers Handbook

Goal c - How to autoplay Vimeo videos using JS

Anyone who has tried to make a Youtube / Vimeo video automatically runs on iOS knows that this can be a painful task. Apple has blocked the auto play option for the right reasons, but sometimes you still need this functionality to work.

I had the same problem with youtube automatically playing videos , apparently, to make autostart work, you need to do some javascript magic, listen to the player, onReady ', than when the player is loaded and ready to play, you call "player.play () "to start it without any user intervention.

Vimeo also got some javascript API, and I'm sure you can do the autostart trick, I just can't figure out how to use it.

They have a JS mini library called Froogaloop , to simplify the task, I saw this answer from @ila , which uses it in conjunction with the following html line:

 NSString *htmlString = [NSString stringWithFormat: @"<html><head>" "<script src=\"froogaloop.js\"></script>" " <script>" "function ready()" "{$f(document.getElementById(\"player\")).api(\"play\");}" "function func1() " "{$f(document.getElementById(\"player\")).addEvent(\"ready\", ready);}" "window.onload=func1;" "</script></head><body>" "<iframe id=\"player\" src=\"http://player.vimeo.com/video/39287488?api=1&amp;player_id=player\" width=\"315\" height=\"455\" frameborder=\"0\" webkit-playsinline>" " </iframe></body></html>"]; - (void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"webview loaded"); NSString *path = [[NSBundle mainBundle] pathForResource:@"froogaloop" ofType:@"js"]; NSString *jsCode = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil]; [webView stringByEvaluatingJavaScriptFromString:jsCode]; }

But this does not work for me, after adding warnings to this code, I see that func1() receives a call and executes the string "addEvent", BUT , this means that the ready() method is never called, because the event is "ready" never started (?) ...

Any ideas?

+6
source share
2 answers

My first answer to the question is a method that is not an ideal brute force method. I would suggest looking at my second method using the Vimeo Javascript and froogaloop APIs.

I assume that you are using a Vimeo iframe inside an html page and using this page in a UIWebView inside an iOS application or inside Safari.

A bit of introspection in the Vimeo iframe shows that it does not load the html video tag initially. You will need to programmatically click the play button to download the video.

To do this today (April 2013, it may change), you can just grab the right elements and call the necessary functions. This is best demonstrated with some working code.

 // You are loading this page inside a UIWebView <html> <head></head> <body> <iframe width="" height="" src="http://player.vimeo.com/video/62207569 " frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <script> // Add a listener for the window load event window.addEventListener('load', onWindowLoad, false); function onWindowLoad(event) { //use a loop to continue checking the vimeo iframe for the 'play' button checkForTrue(isIframeButtonLoaded, iFrameButtonLoaded); } function checkForTrue(func, callback) { setTimeout(function() { if (func()) { callback( iFrameButton() ); } else { checkForTrue(func, callback); }; }, 1000); } //finds the 'play' button within the Vimeo iframe function iFrameButton() { //window.frames[0].document.getElementsByTagName('div')[1]; // this also works... return window.frames[0].document.getElementsByTagName('button')[5]; } //simple boolean condition to check for the iframe button function isIframeButtonLoaded() { return ( iFrameButton() != null ); } //once the button is loaded, click it function iFrameButtonLoaded(iFrameButton) { iFrameButton.click(); } </script> </body> </html>

This source code is also available as an entity.

A reasonable person may say that this is not the best way to do this, but in order to automatically play vimeo videos in your iOS application, it seems to work.

The code for downloading the html file from your package and loading it into a UIWebView is a template:

 - (void)viewDidLoad { [super viewDidLoad]; NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"VimeoTrial" ofType:@"html"]; NSString *htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil]; [self.webView loadHTMLString:htmlString baseURL:nil]; }
+8
source

Uploading the file locally or using an HTML string will not work due to the same origin policy provided by the web browser.

iframe cannot distribute it postEvent() accesses the main window because Vimeo iframe accesses through the http:// protocol and the local file through the file:// protocol. The Ready event is dispatched through this mechanism.

In this case, you can use the Vimeo API, but to automatically play back the video that you need to know when loading the iframe, but the "finished" event is sent from the iframe to the window via postEvent.

The fact that it uses postEvent is illustrated by the code provided in the Vimeo API Documentation . Froogaloop also uses the same code.

 window.addEventListener('message', onMessageReceived, false);

If you run the most basic example of the Vimeo API in an HTML file on your computer, Google Chrome will throw a descriptive message: (Safari does not show this)

An unsafe JavaScript attempt to access a frame with the URL file: ///...index.html from the frame with the URL http://player.vimeo.com... Request for access to the frame has the protocol "http", the frame being accessed has the file protocol. The protocols must match.

This code is simple: ( See this meaning for the full source )

 <iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> <script> var player = $f(document.getElementById('player')); player.addEvent('ready', function() { player.api('play'); }); </script>

The correct solution is to host the HTML page on a remote service that has the same protocol as the Vimeo iframe. In this case, nothing from the http:// address.

If you download the above from http://(insert your host here) , it works instantly in the iOS simulator, Safari and Google chrome.

If you want to do more on the device, you will have to combine the two answers that I gave; Interview the iframe until you find it ready, then tell the player that you are playing.

+2
source

More articles:


All Articles