web-dev-qa-db-ja.com

iPadでYoutube iFrame APIを使用して「再生がすぐに開始されない場合、デバイスを再起動してみてください」の修正方法

YouTubeのミュージックビデオをランダムに再生する、またはキューから再生する小さなYouTubeストリーミングスクリプトを作成しました。 iPad/iPhoneを使用しているときにビデオをロードしたくないと思われる今週までは数ヶ月間は問題なく機能していました。代わりに次のエラーが表示されます。

再生がすぐに開始されない場合は、デバイスを再起動してみてください

私が試したこと：

Safari、Chrome、Firefox、およびOperaおよびそれらすべてのエラーを試しました。ウェブサイトのデータ/キャッシュをクリアし、デバイスを再起動し、デバイスを完全に再起動しました。何も動作しません。つまり、Windowsデスクトップ上で完全に正常に動作し、コードのエラーではなく、APIまたはSafariで変更されたものであると思わせます。私のコードは最近編集されていないため、仕事をやめる。

Jsconsole.comを使用してデバッグしようとしましたが、疑わしいものは何も表示されません。場合によっては、プレーヤーがロードされ、ビデオのタイトルが表示され、イメージも表示されますが、約30秒後に、ロード中のスピナーとともに上記のエラーが表示されます。

PlayVideo（）; iOSデバイスでは機能しません（自動再生）。これは問題ありません。また、スクリプトは以前に機能しました。firstビデオで再生ボタンを押すだけで済みました。しかし今、iOSはビデオを自動再生しようとしているようです。そのため、playVideo（）呼び出しを削除することでテストしましたが、問題は解決しません。

IPad 2、iPad mini、およびiPhone 4でテスト済み（すべて、デバイスで利用可能な最新のiOSを搭載しており、以前はすべて動作していました）。

私は途方に暮れていて、週末の前にハウスパーティーのためにこれを修正しようとしています:)だから、iOSでエラーを引き起こしている可能性のあるものについての助けやヒントをいただければ幸いです。

JavaScriptコードは次のとおりです：

// 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: '390',
        width: '640',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    check_queue_timer = setTimeout(check_queue(),3000);
}

// 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) {
    if (event.data === 0) {
        // TRACK AS DONE, REFRESH QUEUE AND GET NEXT SONG
        // POST TO WRITE TO FILE
        $.ajax({
            type: 'POST',
            url: site_url+'ajax_next_track',
            dataType: 'json',
            data: 'queue_id='+$('#queue_id').val(),
            cache: false,
            success:
            function(data){

                if(data.status == 'success'){
                    $("#queue_table").empty();
                    if(data.queue.length == 0){
                        check_queue_timer = setTimeout(check_queue(),3000);
                    }
                    $.each(data.queue, function(i, item) {
                        if(i == 0){
                            event.target.loadVideoById(item.video_id);
                            event.target.playVideo();
                            $('#queue_id').val(item.queue_id);
                        }
                        $('#queue_table').append('<tr><td>'+item.title+'</td></tr>');
                    });
                }
                else{
                    console(data.message);
                }
            },
            error:
            function( jqXHR, textStatus, errorThrown ){
                $('#error_msg').html('Something broke.').fadeIn();
            }

        });
    }
}
function stopVideo() {
    player.stopVideo();
}

function check_queue(){
    $.ajax({
        type: 'POST',
        url: site_url+'ajax_next_track',
        dataType: 'json',
        data: 'no_delete=1',
        cache: false,
        success:
        function(data){

            if(data.status == 'success'){
                $("#queue_table").empty();
                if(data.queue.length == 0){
                    clearTimeout(check_queue_timer);
                    check_queue_timer = setTimeout(check_queue(),3000);
                }
                $.each(data.queue, function(i, item) {
                    if(i == 0){
                        player.loadVideoById(item.video_id);
                        player.playVideo();
                        $('#queue_id').val(item.queue_id);
                        clearTimeout(check_queue_timer);
                    }
                    $('#queue_table').append('<tr><td>'+item.title+'</td></tr>');
                });
            }
            else{
                console(data.message);
            }
        },
        error:
        function( jqXHR, textStatus, errorThrown ){
            $('#error_msg').html('Something broke.').fadeIn();
        }

    });
}

更新1（2015年11月25日）

最初から始めて、 https://developers.google.com/youtube/iframe_api_reference のサンプルコードを使用することにしました。 loadVideoById（）はiPadでは動作しなくなったようです。前だった。 loadVideoById（）またはplayVideo（）を含めない場合、機能します。理想的には、loadVideoById（）で動作するようにします。

javascriptiosyoutubeyoutube-apiyoutube-javascript-api
10
David

この問題を解決するために何時間もコンピューターに頭を打ちました...ここに私が見つけたものがあります。

これは、Appleの厳格なiOS制限のために発生しています。Webページは、ユーザーのフィードバックに直接応答する場合にのみオーディオ/ビデオの再生を開始できます。 （この制限は、ページでオーディオ/ビデオが再生されるfirst時間にのみ影響することに注意してください。）

通常、Appleの制限を回避するには、play（）呼び出しがイベントハンドラー（クリックハンドラーなど）で直接発生することを確認するだけで十分です。これは、Web Audio APIと通常のHTML5ビデオで機能しますが、YouTubeプレーヤーに関する何らかの問題により、YouTubeで機能しません。

結果として、YouTubeの解決策は、再生を開始するためにユーザーがYouTubeビデオ自体をクリックすることを要求することです。それ以降は、YouTube iframe APIを使用して再生、一時停止、シークなどを制御できます。ただし、ユーザーが動画をクリックするまでafterまでAPIを使用してYouTube動画を制御することはできません。

完璧なユーザーエクスペリエンスを得るために、プレーヤーを制御するUIをすべて非表示にし、YouTubeビデオ自体をクリックして再生を開始するようにユーザーに指示することができます。その後、ユーザーが動画を1回クリックすると、UIをアクティブにできます。もちろん、これはiOSにのみ適用するように設計する必要があります。

頭痛の種をありがとう、アップル！

8
Adrian Holovaty

私は同様の問題を抱えていましたが、掘り下げて、Appleは、スクリプトなどを介して埋め込みアイテムを自動再生する機能を削除したため、エンドユーザーが予期せずデータを使い果たしません。再生ボタン自体をトリガーします。

この問題を修正する最良の方法は、ユーザーがモバイルまたはデスクトップを使用しているかどうかを確認し、変数を設定することです（true/false）。

これは私がやったことです

var mobileDevice = false;
if(typeof window.orientation !== 'undefined'){
        var mobileDevice = true;
}

if(!mobileDevice) ytPlayer.playVideo();

うまくいけばそれが助けになります。

ソース（https://developer.Apple.com）

ユーザーの費用で携帯電話ネットワークでの迷惑ダウンロードを防ぐため、iOSのSafariで埋め込みメディアを自動的に再生することはできません。ユーザーは常に再生を開始します。

その他の回答- YouTube APIはiPad/iPhone/Flash以外のデバイスでは動作しません

5
Junior

問題が他の2つの答え（エイドリアンとジュニア）の言うことである場合、UIWebView（またはWKWebView）にアクセスしてmediaPlaybackRequiresUserActionフラグを設定することで簡単に解決する必要があります。これは、独自のソリューションを展開した場合、または公式フレームワーク（ https://github.com/youtube/youtube-ios-player-helper ）を使用している場合に実行できます。

Swift

let playerView = YTPlayerView()
playerView.webView.mediaPlaybackRequiresUserAction = false
1
ABeanSits

DPSオーディオアプリケーションをラップトップにインストールした後、問題に直面しました。アプリは、既存のオーディオドライバーを "Speakers（Digital Power Station）"オーディオデバイスに変更しました。

Reddit 投稿を読むことで、オーディオデバイスをラップトップのオリジンに置き換えます。したがって、問題は修正されました。

0
AR Rose