如何在iPad上使用Youtube iFrame API修复"如果播放不能立即开始,请尝试重启设备"？

Question

我创建了一个小的YouTube流媒体脚本,随机播放YouTube音乐视频或从队列中播放.它在几个月内一直运行良好,直到本周,它似乎不想在使用iPad/iPhone时加载视频.我得到以下错误:

如果不立即开始播放,请尝试重新启动设备

我尝试过的:

我已经尝试过Safari,Chrome,Firefox和Opera,但他们都错了.我已经尝试清除网站数据/缓存,重启设备,重新启动设备.什么都行不通.奇怪的是,它在Windows桌面上运行得非常好,这使我相信它不是代码中的错误,而是通过API或Safari改变的东西.我的代码最近没有被编辑,这可能导致它停止工作.

我已经尝试使用jsconsole.com调试它,没有任何可疑的弹出.在某些情况下,播放器将加载,视频的标题将显示,图像也将显示,但在大约30秒后,上面的错误将与加载微调器一起显示.

我知道playVideo(); 在iOS设备上无效(自动播放).这很好,再次,脚本以前工作过,我只需按下第一个视频播放.但现在,似乎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()一起使用.

Answer 1

我试图解决这个问题几个小时就撞到电脑上......这就是我发现的.

这是因为Apple严格的iOS限制:网页只能在直接响应用户反馈时开始播放音频/视频.(请注意,此限制仅影响第一次在页面上播放音频/视频.)

通常,要解决Apple的限制,确保play()调用直接在事件处理程序(例如,单击处理程序)中发生就足够了.这适用于Web Audio API和普通的HTML5视频 - 但有关YouTube播放器的内容阻止了它在YouTube上工作.

因此,YouTube的解决方案显然是要求用户点击YouTube视频本身以启动播放.从那时起,您可以使用YouTube iframe API(播放,暂停,搜索等)来控制它.但在用户点击视频之前,您无法使用API​​控制YouTube 视频.

为了获得简单的用户体验,您可以隐藏所有播放器控制用户界面,并告诉用户点击YouTube视频本身即可开始播放.然后,一旦用户点击了一次视频,就可以激活你的用户界面.当然,您应该将其设计为仅适用于iOS.

感谢头痛,Apple!

Answer 2

我有一个类似的问题,并进行了一些挖掘,结果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设备