Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/425.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript YouTube API在iOS(iPhone/iPad)中不工作,但在桌面浏览器中工作正常?_Javascript_Ios_Youtube Api_Mobile Safari - Fatal编程技术网

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

Javascript YouTube API在iOS(iPhone/iPad)中不工作,但在桌面浏览器中工作正常?,javascript,ios,youtube-api,mobile-safari,Javascript,Ios,Youtube Api,Mobile Safari,我正在一个简单的单页网站上使用YouTube API。我能够播放视频,并且我的YouTube功能在桌面浏览器中都能成功运行(IE7除外——也许这个问题会在你帮助我回答这个问题时得到解决),但在iOS(iPhone和iPad)中似乎根本不起作用YouTube播放器根本不显示,在iOS中也没有YouTube的功能 下面是我的代码实现。如果有任何问题信息我没有提供,将有助于这个问题,请让我知道。我想以尽可能简单的方式开始解决这个问题,然后在必要时引入更多信息 /*===================

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

下面是我的代码实现。如果有任何问题信息我没有提供,将有助于这个问题,请让我知道。我想以尽可能简单的方式开始解决这个问题,然后在必要时引入更多信息

/*==========================================================================
    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">
/*==========================================================================
YOUTUBE
========================================================================== */
var tag=document.createElement('script');
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(标记,firstScriptTag);
var YTready=false,
playerIdList=[],
ytPlayers={};
//当YouTube API就绪时,将YTready切换为true,并运行视频队列(如果存在)
//并运行页面指定功能的列表,如旋转木马设置
var YTreadyFunctions={};
函数onyoutubeiframeapiredy(){
console.log('YT Ready');
YTready=true;
如果(playerIdList.length>0){
runYouTubeIframeList(playerIdList);
}
for(YReadyFunctions中的id){
var thisFunc=YTreadyFunctions[id];
var thisArgs=thisFunc.args;
thisFunc.func(thisArgs.id,thisArgs.counters,thisArgs.isHome,thisArgs.isAutoRot,thisArgs.galleryType);
}
}
函数shortID(elemId){
返回elemId.split('-').join('');
}
函数初始化youtubeiframe(playerId,params){
//var playerId=此列表[x];
var thisPlayer=document.getElementById(playerId);
YT球员[shortID(playerId)]=新的YT球员(playerId{
宽度:thisPlayer.getAttribute('width'),
高度:thisPlayer.getAttribute('height'),
playerVars:{
自动隐藏:1,
//自动播放:1,
主题:"光",,
showinfo:0,
颜色:'白色',
rel:0,
来源:document.location.hostname,
wmode:'透明'
},
playerId,
活动:{
“onReady”:onPlayerReady,
“onStateChange”:onPlayerStateChange
}
});
}
函数runYouTubeIframeList(thisList){
//如果YouTube iFrame API(onYouTubeIframeAPIReady)尚未就绪,
//将播放器添加到列表(playerIdList)中,等待API准备就绪,然后初始化
如果(!YTready){
playerIdList.concat(此列表);
}否则{
//YT API已准备就绪。初始化播放器iFrame列表。
var thisListLength=thisList.length;
对于(var x=0;xh2').fadeIn(500).removeClass('transparent');
}
如果(event.data==0){
$(“#i360应答掩码”).slideUp(函数(){
$('p.active-answer').remove();
$('div#i360 questions>ul').fadeIn(500).removeClass('transparent');
$('div#i360-questions>ul>li').removeClass('i360-clicked-question');
});
$('i360显示')。淡出(300);
$(event.target.a.parentNode).children(“#i360静态面板”).css('display','block');
}
}
//运行所有yt玩家,并将其ID添加到待初始化玩家列表中
$('.yt player')。每个(函数(i){
playerIdList.push($(this.attr('id'));
});
runYouTubeIframeList(playerIdList);
功能设置VideoCarouseThumb(响应,元素){
if(response.data){
if(response.data.缩略图.hqDefault){
元素。getElementsByTagName('img')[0]。src=response.data.thumbnail.hqDefault;
}else if(response.data.缩略图.sqDefault){
元素。getElementsByTagName('img')[0]。src=response.data.thumbnail.sqDefault;
}
}else if(响应状态){
如果(response.status==“403”){
element.setAttribute('class',element.getAttribute('class')?element.getAttribute('class')+'private':'private');
}
}
}
函数getYouTubeInfo(类型、getID、回调、args){
//window.console&&console.log('function:getYouTubeInfoById | type=',type',getId=',getId',args=',args);
//这是一种安慰https://gdata.youtube.com/feeds/api/“+type+”/“+getID+”?v=2&prettyprint=true&alt=jsonc”);
$.ajax({
网址:'https://gdata.youtube.com/feeds/api/“+type+”/“+getID+”?v=2&prettyprint=true&alt=jsonc”,
数据类型:“jsonp”,
上下文:args?args:“”,
成功:功能(响应){
回调(response,this);
},
错误:函数(响应){
回调(response,this);
//这(回应);
}
});
}
//结束YOUTUBE
根据,iOS上存在限制,其中“…嵌入式媒体无法在iOS上的Safari中以编程方式自动播放-用户始终启动播放。”

我也遇到了同样的问题,结果证明你可以通过YouTube的红色大“播放”按钮在iOS上正确嵌入和显示YouTube API IFrame,只是iOS不允许你自己启动/停止视频