目的c - JSを使ってVimeoの動画を自動再生する方法

YouTubeのビデオを自動的に再生させようとした人は誰も、苦労する可能性があることを知っています。 Appleは正しい理由で「自動再生」パラメータをブロックしましたが、この機能を動作させる必要があることがあります。目的c - JSを使ってVimeoの動画を自動再生する方法

私はauto playing youtube videosと同じ問題を抱えていたようですが、自動再生が動作するようにするには、プレーヤーがロードされて電話をする準備ができているときよりも、プレーヤーの 'onReady' 'player.play（）'を押すと、別のユーザーの介入なしに開始されます。

VimeoにもJavaScript APIがあります。自動再生のトリックを行うことができます。使用方法を把握できません。

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

しかし、これはアラートを追加した後、私のために動作しません：

彼らはJSミニライブラリーは、物事を簡単にするためにFroogaloop呼ばれてきた、私は次のHTML文字列と一緒にそれを使用this answer by @ilaを見ましたこのコードには、私がどれ...それは準備ができて "イベントが発生したことがないので（？）ready()メソッドが呼び出されることは決してありませんことを縫い目

を、func1()が呼び出さと「addEvent」行を実行し得ることを見ることができますが、アイデア？

出典

2013-04-01 Eyal

質問に対する私の最初の答えは、理想的ではないブルートフォース方法です。私はVimeo Javascript APIとfroogaloopを使って、私の2番目の方法を見てみることをお勧めします。

私は、HTMLページ内でVimeo iframeを使用していると仮定し、このページをiOSアプリ内またはSafari内のUIWebView内で使用していると仮定します。

Vimeo iframeにイントロスペクションすると、最初にhtmlビデオタグが読み込まれないことが示されます。ビデオをロードするには、プログラム再生ボタンをタップする必要があります。

今日（2013年4月に変更される可能性があります）、正しい要素を取得して適切な機能を呼び出すことができます。いくつかの動作中のサンプルコードで実証されています。

// 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's 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 a gist

まともな人は、これはそれを行うための最善の方法はないと言うかもしれませんが、自動的にあなたのiOSアプリ内でVimeoのビデオを再生するために、それが動作するようには思えません。

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

出典

2013-04-09 09:36:39 Jessedc

お返事ありがとうございます:)これはうまくいくようですが、私はこの解決策に2つの問題があります：1.あなたが言及したように、これは最良の方法ではありません。私はこの問題を公式Vimeo JS API。ボタンレイアウトのようなものは、時間とともに変化し、コードを壊すことがあります。 2.タップして再生すると、再生ボタンが数秒間表示され、その後にスピナーが始まります。私は 'setTimeout'で1000の値を変更しようとしますが、それは役に立ちません。私はスピナーが2番目に始まることを望みます。再生ボタンをタップしてください（少なくとも、再生ボタンはタップしても表示されません） – Eyal

JS APIによれば、プレイヤーに送ることができる「再生」方法がありますAPIリファレンス）を参照してください。私はチャンスがあるときに私の答えを更新します。 https://developer.vimeo.com/player/js-api – Jessedc

ok私はお待ちしています、10x – Eyal

原因によって強制Same Origin Policyに動作しませんローカルまたはHTML文字列を経由してファイルをロードする：

のUIWebViewにあなたのバンドルからhtmlファイルをロードし、それをロードするためのコードが定型でありますウェブブラウザ。

iframeは、Vimeoのiframeがhttp://プロトコルを介してアクセスされていると、ローカルファイルがfile://プロトコルを介してであるので、それは戻って、メインウィンドウにpostEvent()呼び出しだ伝播することができません。「準備完了」イベントは、このメカニズムを介して送信されます。

このインスタンスではVimeo APIを使用できますが、iframeが読み込まれたときにiframeから「ready」イベントがpostEvent経由でウィンドウに送信されることを知る必要があるビデオを自動的に再生するために使用できます。

postEventを使用しているという事実は、Vimeo API Documentationで提供されているコードによって明確になっています。 Froogaloopも同じコードを使用して、あなたのマシン上のHTMLファイル内のVimeoのAPIの最も基本的な例を実行した場合はGoogle Chromeは説明のメッセージがスローされます

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

：（Safariはこれを示していない）

を
安全でないJavaScriptが、URLがhttp://player.vimeo.com...のフレームからURLファイル：///...index.htmlでフレームにアクセスしようとしています。アクセスを要求しているフレームには「http」というプロトコルがあり、アクセスされるフレームには「ファイル」というプロトコルがあります。プロトコルは一致する必要があります。

問題のコードは単純です：（See this gist 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>

適切な解決策は、Vimeoのはiframeと同じプロトコルを持ち、リモート・サービス上のHTMLページをホストすることです。この場合、http://の住所からのものです。

上記をhttp://(insert your host here)からロードすると、iOSシミュレータ、Safari、Google Chromeで即座に動作します。

デバイスでもっとやりたければ、私が与えた2つの答えをマージする必要があります。準備ができていると判断されるまでiframeをポーリングし、プレイヤーオブジェクトに再生を指示します。

出典

2013-04-10 08:49:04 Jessedc

youtubeのビデオで同じ問題のための私の解決策を見たことがありますか？ http://stackoverflow.com/questions/15717754/ vimeoで同じapprocheを使用することはできませんか？ – Eyal

あなたが指している答えは、Vimeoのビデオを同じように動作させる方法を示唆していません。 2つのAPIを見ることで、彼らは完全に異なった動作をすることは明らかです。 YouTube iframe APIはiframe要素をページに作成しますが、Vimeo APIはiframe自体に埋め込まれています。 Youtubeは、最初の答えの深いダイビングに似たiframeに直接javascriptで一握りのイベントをバインドしています.Vimeoは標準のpostEvent（）メソッドしか使用していません。 – Jessedc

目的c - JSを使ってVimeoの動画を自動再生する方法

答えて

関連する問題