2013-06-21 21 views
25

自分のサイトのYouTube動画(IFrame API)でautoplayをtrueに設定すると、動画が再生されません。すべてのドキュメンテーションによると、appleは帯域幅の理由からiosで自動再生を無効にしているという。youtube.comのiOSで動画を自動再生する方法

しかし、iPadのyoutube.comで自動的に動画が再生されることがわかりました(ビデオ要素をクリックしないで)。 YouTubeはどのように機能しましたか? AppleがYouTubeのためだけに特別なことをしているとは想像もつきません。

+0

ない重複:ここ

は一例です。あなたがiOS上でyoutube.comのホームページにアクセスすると、自動再生が動作するように見える理由をOPから聞いています(私にとってもそうです)。 –

答えて

-3

できません。さまざまな理由(データ使用を含むがこれに限定されない)のために、Appleはビデオの自動再生を許可していません。

を参照してください:

Youtube embedded video: autoplay feature not working in iphone

+4

これは質問に答えるものではなく、重複しているわけではありません。 OPは、iOSでyoutube.comのホームページにアクセスすると、自動再生*が動作するように見える理由を尋ねています(これは私にとっても同じことです)。 – mpobrien

4

タップ/再生を許可するために、ビデオ]ボタンをクリックすると、YouTubeのチームは、ユーザーの相互作用を利用しているようです。

youtube.comはSPA(シングルページアプリケーション)なので、ページのリロードやリダイレクトはありません。

youtube.comでは自動再生が有効になっていません。

+0

DOMとURLを操作して、異なるページ間を移動しているように見せかけますか? –

+2

はい、プレーンなjavascriptと「history pushState」によるナビゲーションの管理があります。自動再生の詳細についてはこちらをチェックしてください:http://stackoverflow.com/questions/29894406/initialize-videojs-from-dummy-element-using-require-js –

-2

これはテストしていませんが、Javascriptを使用してプレーヤの再生機能を呼び出したり、ページがロードされたときにその要素をクリックしたりすることができます。

2

javascriptで行うことができます。

<div class="video-container"> 
    <div id="player"> </div> <!--<iframe width="960" height="720" src="//www.youtube.com/embed/5YptIh_avrM?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>--> 

</div> 

<script> 
    // 2. This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 

    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // 3. This function creates an <iframe> (and YouTube player) 
    // after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '720', 
     width: '960', 
     videoId: 'YOUR_ID_HERE', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 



    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
    event.target.playVideo(); 
    event.target.setVolume(20); 
    } 

    // 5. The API calls this function when the player's state changes. 
    // The function indicates that when playing a video (state=1), 
    // the player should play for six seconds and then stop. 
    var done = false; 
    function onPlayerStateChange(event) { 

    } 
    function stopVideo() { 
    player.stopVideo(); 
    } 
</script> 
+0

これはテスト済みで、iOS 9.1とChromeのSafariでは動作しませんon iOS 9.1 Aitor AznarÁlvarezさんの回答を、モバイル版でYouTubeがどのように行っているかをご覧ください。 – Gumbah

+0

私は9.1を真剣に憎んでいます。コメントをいただき、ありがとうございました。まだ執筆中ですが、これはこの「ダウングレード」の前です。 –

+0

これはラップトップ/デスクトップブラウザで動作します。モバイルiOSブラウザでは動作しません。 Androidで動作するかもしれません。 – mjwunderlich

関連する問題