API YouTube не работает в iOS (iPhone/iPad), но нормально работает в настольных браузерах?

Я использую API YouTube на простом одностраничном веб-сайте. Я могу воспроизводить видео, и все мои функции YouTube успешно работают в настольных браузерах (за исключением IE 7 — возможно, эта проблема будет решена, если вы поможете мне ответить на этот вопрос), но, похоже, это не работает вообще в iOS (iPhone и iPad.) Плеер YouTube просто не показывает и вообще никаких воспоминаний о функционале YouTube в iOS нет.

Ниже приведена моя реализация кода. Если есть какая-либо информация о вопросе, которую я не предоставил, которая была бы полезна для этого вопроса, пожалуйста, дайте мне знать. Я хочу начать как можно проще при рассмотрении этого вопроса, а затем при необходимости предоставить дополнительную информацию.

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

var YTready = false,
    playerIdList = [],
    ytPlayers = {};

// When YouTube API is ready, switch YTready to true and run the queue of videos should any exist
// and run a list of page-specified functions such as carousel setups
var YTreadyFunctions = {};
function onYouTubeIframeAPIReady() {
    console.log('YT Ready');
    YTready = true;
    if (playerIdList.length > 0) {
        runYouTubeIframeList(playerIdList);
    }
    for(id in YTreadyFunctions){
        var thisFunc = YTreadyFunctions[id];
        var thisArgs = thisFunc.args;
        thisFunc.func(thisArgs.id,thisArgs.counters,thisArgs.isHome,thisArgs.isAutoRot,thisArgs.galleryType);
    }
}

function shortID(elemId){
    return elemId.split('-').join('');
}

function initializeYouTubeIframe(playerId,params){
        //var playerId = thisList[x];
        var thisPlayer = document.getElementById(playerId);
        ytPlayers[shortID(playerId)] = new YT.Player(playerId, {
            width: thisPlayer.getAttribute('width'),
            height: thisPlayer.getAttribute('height'),
        playerVars: {
            autohide: 1,
            //autoplay: 1,
            theme: 'light',
            showinfo: 0,
            color: 'white',
            rel: 0,
            origin: document.location.hostname,
            wmode: 'transparent'
        },
        videoId: playerId,
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
}

function runYouTubeIframeList(thisList) {
    // If the YouTube iFrame API (onYouTubeIframeAPIReady is not ready yet,
    // add the player(s) to a list (playerIdList) to wait until the API is ready and then initialize
    if (!YTready) {
        playerIdList.concat(thisList);
    } else {
        // YT API is ready. Initialize the list of player iframes.
        var thisListLength = thisList.length;
        for (var x = 0; x < thisListLength; x++) {
            initializeYouTubeIframe(thisList[x]);
        }
    }
}
function onPlayerReady(event) {
    //alert('player ready');
}
function onPlayerStateChange(event) {
    //alert('state changed: ' + event.data);
    if (event.data == 3) {
        $('.loading').remove();
    }
    if (event.data == 1) {
        $('#i360-static-panel').css('display','none');
        $('.loading').remove();
        $('div#i360-questions > h2').fadeIn(500).removeClass('transparent');
    }
    if (event.data == 0) {
        $('#i360-answer-mask').slideUp(function () {
            $('p.active-answer').remove();
            $('div#i360-questions > ul').fadeIn(500).removeClass('transparent');
            $('div#i360-questions > ul > li').removeClass('i360-clicked-question');
        });
        $('.i360-shown').fadeOut(300);
        $(event.target.a.parentNode).children('#i360-static-panel').css('display','block');
    }
}

// run through all yt-players and add their ID to a list of to-be-initialized players
$('.yt-player').each(function(i){
    playerIdList.push($(this).attr('id'));
});
runYouTubeIframeList(playerIdList);

function setVideoCarouselThumb(response,element){
    if(response.data){
        if(response.data.thumbnail.hqDefault){
            element.getElementsByTagName('img')[0].src = response.data.thumbnail.hqDefault;
        } else if(response.data.thumbnail.sqDefault){
            element.getElementsByTagName('img')[0].src = response.data.thumbnail.sqDefault;
        }
    } else if (response.status){
        if(response.status == '403'){
            element.setAttribute('class',element.getAttribute('class') ? element.getAttribute('class') + ' private' : 'private');
        }
    }
}
function getYouTubeInfoById(type,getID,callback,args){
    //window.console && console.log('function: getYouTubeInfoById | type = ',type,' | getId = ',getID,' | args = ',args);
    //consoleThis('https://gdata.youtube.com/feeds/api/' + type + '/' + getID + '?v=2&prettyprint=true&alt=jsonc');
    $.ajax({
        url: 'https://gdata.youtube.com/feeds/api/' + type + '/' + getID + '?v=2&prettyprint=true&alt=jsonc',
        dataType: 'jsonp',
        context: args ? args : '',
        success: function(response){
            callback(response,this);
        },
        error: function(response){
            callback(response,this);
            //consoleThis(response);
        }
    });
}

// END YOUTUBE
</script>


    <meta name="apple-mobile-web-app-title" content="Roundup" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Roundup" />
    <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0">

person Matt    schedule 13.05.2013    source источник
comment
у вас настроены все метатеги для устройств Apple/Touch?   -  person Augie    schedule 13.05.2013
comment
Я обновил вопрос метатегами, которые у меня есть в голове.   -  person Matt    schedule 13.05.2013


Ответы (1)


Согласно этот другой пост SO, ограничения существуют на iOS, где "...встроенные мультимедийные файлы не могут воспроизводиться автоматически программно в Safari на iOS — пользователь всегда инициирует воспроизведение."

У меня была та же проблема, и оказалось, что вы можете правильно внедрить IFrame YouTube-API и отобразить его на iOS с помощью большой красной кнопки YouTube «Воспроизвести», просто iOS не позволит вам запустить/ остановите видео с помощью собственных элементов управления и JavaScript. Например. вы можете перейти к следующему/предыдущему с помощью JavaScript, но вы не можете воспроизвести/приостановить воспроизведение, что необходимо сделать, щелкнув на видео, а затем с помощью встроенных элементов управления рядом с индикатором выполнения видео.

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

Надеюсь, это поможет!

person Ronan Jouchet    schedule 20.06.2013
comment
Я экспериментирую с этой проблемой и хочу прописать здесь, что, если мы попытаемся использовать автозапуск, видео больше не отвечает. Если мы не делаем playVideo(), когда onReady все работает нормально. [обновление] Я вижу, что наши элементы управления работают только после нажатия основной большой красной кнопки на видео. - person brasofilo; 30.10.2013
comment
У меня такая же проблема. Я не могу заставить игру работать, пока пользователь не нажмет красную кнопку воспроизведения. Флаг автовоспроизведения playerVars не работает, и если я попытаюсь воспроизвести видео, вызвав метод playVideo(), проигрыватель станет черным, и я больше не смогу получить к нему доступ (появляется короткий индикатор загрузки, но он быстро исчезает). до того, как игрок станет черным). - person Redtopia; 01.04.2014
comment
@Redtopia Ты это исправил? У меня такая же проблема. Я ничего не могу сделать, пока пользователь не нажмет красную кнопку воспроизведения. Но потом я могу выполнить load() playVideo() pauseVideo() в JS. - person Elyx0; 02.06.2014
comment
@ Elyx0, я определил, что пользователь должен щелкать видео для воспроизведения на мобильных устройствах. Черный экран смерти должен быть ошибкой iOS. (stackoverflow.com /вопросы/12496144/) - person Redtopia; 03.06.2014