YouTube API 不能在 iOS (iPhone/iPad) 中工作，但在桌面浏览器中工作正常?

YouTube API not working in iOS (iPhone/iPad) but working fine in Desktop browsers?(YouTube API 不能在 iOS (iPhone/iPad) 中工作，但在桌面浏览器中工作正常?)

问题描述

我在一个简单的单页网站中使用 YouTube API.我能够播放视频，并且我的所有 YouTube 功能都可以在桌面浏览器中成功运行(IE 7 除外——也许这个问题会在你帮助我回答这个问题时得到解决)但它似乎不起作用在 iOS(iPhone 和 iPad)中根本没有.YouTube 播放器根本不显示，并且在 iOS 中根本没有 YouTube 功能的回忆.

I am using the YouTube API in a simple one page website. I am able to get videos to play and all of my YouTube functionality works successfully in Desktop browsers (with the exception of IE 7 -- perhaps this issue will be addressed in you helping me answer this question) but it doesn't seem to work at all in iOS (iPhone and iPad.) The YouTube player simply does not show and there are no reminiscences of YouTube functionality at all in iOS.

下面是我的代码实现.如果我没有提供任何对这个问题有帮助的问题信息，请告诉我.我想从解决这个问题开始尽可能简单，然后在必要时提供其他信息.

Below is my code implementation. If there's any question information I did not provide that would be helpful for this question, please let me know. I want to start as simple as possible in addressing this issue and then bring in additional information if necessary.

/*==========================================================================
    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">

推荐答案

根据this other SO post，iOS 上存在限制，其中 "...嵌入式媒体无法在 iOS 上的 Safari 中以编程方式自动播放 - 用户总是开始播放."

According to this other SO post, limitations exist on iOS, where "...embedded media cannot be played automatically programatically in Safari on iOS - the user always initiates playback."

我遇到了同样的问题，结果你可以使用 YouTube 的红色大播放"按钮正确嵌入 YouTube-API IFrame 并在 iOS 上显示，只是 iOS 不允许您使用自己的控件开始/停止视频 &JavaScript.例如.您可以使用 JavaScript 进行下一个/上一个，但不能播放/暂停，这必须通过单击 on 视频，然后使用视频进度条旁边的本机控件来完成.

I had the same problem and it turns out you can have a YouTube-API IFrame properly embedded and shown on iOS with YouTube's big red "Play" button, it's just that iOS won't let you start/stop the video with your own controls & JavaScript. E.g. you can next/previous with JavaScript, but you cannot play/pause, which has to be done by clicking on the video, then with the native controls next to the video progress bar.

但是关于你第一段的最后一句话，撇开这些限制不谈，YouTube 播放器应该显示，你所做的事情有问题(尽管我不够专业，无法判断).我也在一个简单的单页网站中这样做，随意看看我做了什么.

But regarding the last sentence of your first paragraph and putting aside these limitations, the YouTube player should show, there is something wrong in what you did (though I'm not expert enough to tell what). I am also doing that in a simple one-page website, feel free to have a look at what I did.

希望有帮助！

这篇关于YouTube API 不能在 iOS (iPhone/iPad) 中工作，但在桌面浏览器中工作正常?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！