Как исправить "если воспроизведение не начнется в ближайшее время, попробуйте перезагрузить устройство" с помощью Youtube iframe API на iPad?

Я создал небольшой потоковый скрипт YouTube, который случайным образом воспроизводит музыкальные клипы YouTube или из очереди. Он отлично работал в течение нескольких месяцев до этой недели, когда он, похоже, не хочет загружать видео при использовании iPad/iPhone. Вместо этого я получаю следующую ошибку:

Если воспроизведение не начнется в ближайшее время, попробуйте перезагрузить устройство

что я пробовал:

Я пробовал Safari, Chrome, Firefox и Opera, и они все ошибки. Я попытался очистить данные/кэш веб-сайта, перезапустить устройство, выполнить перезапуск устройства. Ничего не работает. Странно то, что он отлично работает на рабочем столе Windows, что заставляет меня верить, что это не ошибка в коде, а что-то, что изменилось с API или с Safari. Мой код также не редактировался в последнее время, что могло бы заставить его перестать работать.

Я попытался отладить его с помощью jsconsole.com ничего подозрительного не всплывает. В некоторых случаи, игрок загрузит, название видео будет отображаться и так будет изображение, но примерно через 30 секунд, ошибка выше отображается вместе с загрузкой блесны.

Я знаю, что playVideo (); не работает (автозапуск) на устройствах iOS. Это нормально, и опять же, скрипт работал раньше, мне нужно было только нажать play на первый видео. Но теперь, похоже, iOS пытается автоматически воспроизвести видео. Итак, я также протестировал, удалив вызовы playVideo() , проблема все еще сохраняется.

протестировано на iPad 2, iPad mini и iPhone 4 (все с последней iOS, доступной на устройстве, и все работали ранее).

Я в недоумении и пытаюсь исправить это до выходных для домашней вечеринки :) поэтому я был бы признателен за любую помощь или подсказки о том, что может вызвать сбой на iOS.

вот код:

// 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 (25 НОЯБРЯ 2015)

Я решил начать с нуля и работать с примером кода на https://developers.google.com/youtube/iframe_api_reference . Кажется, что loadVideoById () больше не работает на iPads. Это было раньше. Если я не включаю loadVideoById() или playVideo (), он работает. В идеале я бы хотел, чтобы он работал с loadVideoById().

4 ответов


Я часами бился головой о компьютер, пытаясь решить эту проблему... Вот что я нашел.

Это происходит из-за драконовского ограничения iOS от Apple: веб-страницы могут начинать воспроизведение аудио / видео только при прямом ответе на отзывы пользователей. (Обратите внимание, что это ограничение влияет только на первый аудио/видео воспроизводится на странице.)

обычно, чтобы обойти ограничение Apple, достаточно убедиться, что ваш вызов play() происходит непосредственно в обработчике событий (например, обработчике кликов). Это работает для веб-аудио API и обычных видео HTML5, но что-то в проигрывателе YouTube мешает этому работать для YouTube.

в результате решение для YouTube, по-видимому, требует от пользователя щелкнуть само видео YouTube, чтобы начать воспроизведение. С этого момента вы можете управлять им с помощью API YouTube iframe (воспроизведение, пауза,поиск и т. д.). Но вы не можете управлять видео YouTube с помощью API, пока после пользователь нажал на видео.

для надежного пользовательского интерфейса вы можете скрыть весь пользовательский интерфейс управления плеером и сказать пользователям щелкнуть само видео YouTube, чтобы начать воспроизведение. Затем, после того, как пользователь щелкнул видео один раз, вы можете активировать свой пользовательский интерфейс. Конечно, вы должны разработать это только для применения к iOS.

Спасибо за головные боли, Apple!


У меня была аналогичная проблема, и я копал, оказывается, Apple удалила возможность автозапуска элементов вставки через скрипты и т. д., чтобы конечный пользователь неожиданно не использовал свои данные. Пользователь должен сам вызвать кнопку воспроизведения.

лучший способ устранить эту проблему-проверить, находится ли пользователь на мобильном или настольном компьютере, и установить переменную (true/false).

вот что я сделал

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

if(!mobileDevice) ytPlayer.playVideo();

надеюсь, что помогает.

источник (https://developer.apple.com)

для предотвращения нежелательных загрузок по сотовым сетям у пользователя расходы, встроенные носители не могут воспроизводиться автоматически в Safari on iOS-пользователь всегда инициирует воспроизведение.

больше ответов здесь - YouTube API не работает с iPad / iPhone / не Флэш-устройства


если вопрос в том, что говорят два других ответа (Adrian & Junior), то он должен быть легко решен путем доступа к UIWebView (или WKWebView) и задание mediaPlaybackRequiresUserAction флаг. Это можно сделать, если вы свернули свое собственное решение или если вы используете официальную структуру (https://github.com/youtube/youtube-ios-player-helper).

Свифт

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

Я столкнулся с проблемой после установки приложения DPS audio на свой ноутбук. Приложения изменили мой существующий аудио драйвер на их " Колонки (Цифровая Электростанция)" Аудио Устройств.

читая Reddit сообщение, я заменяю аудиоустройство на источник моего ноутбука. Таким образом, проблема решена для меня.