YouTube API取得的playVideo方法不能在某些移动设备工作 [英] Youtube Api playVideo method doesn't work on some mobile devices

问题描述

我想在这里点击图像的YouTube视频上播放后，创建移动网站。

我已经在几款Android手机/版本，并在按预期有些不行为测试。

我的意思是它停在缓冲和永远不会到达播放视频。我注意到另一件事是，用户触发视频播放后，而不是编程播放器的工作原理。更详细的，如果我直接显示YouTube播放器，用户点击播放视频后点击一个按钮/图像播放其他视频工作的。

我已经张贴在这里，我与的jsfiddle

工作的测试页面

  $（文件）。就绪（函数（）{//缓存的jQuery对象
变量$身体= $（体），
    $日志= $（'＃日志），
    $ YT = $（'＃YouTube播放器），
    $ ytwrap = $（'＃ytwrapper'），
    $选择= $（'＃选择'）;
//这个code加载YouTube的API
var标记=使用document.createElement（'脚本'）;
tag.src =htt​​ps://www.youtube.com/iframe_api;
$ body.append（标签）;//这将成为玩家对象时API准备好
VAR的球员;//看看我们正在使用什么样的设备
变种的userAgent = navigator.userAgent.toLowerCase（）;
VAR isAndroid = userAgent.indexOf（'机器人'）＆GT; -1;
VAR isIpad = userAgent.indexOf（'iPad的）GT; -1;
VAR isIphone = userAgent.indexOf（'iPhone'）＆GT; -1;
window.onYouTubeIframeAPIReady =功能onYouTubeIframeAPIReady（）{    玩家=新YT.Player（YouTube播放器'，{
        VIDEOID：视频[0]
        playerVars：{
            请将allowFullScreen：的allowFullScreen'，
            playsinline：0
        }，
        事件：{
            'onReady'：onPlayerReady，
                onStateChange'：onPlayerStateChange
        }
    }）;
    window.player =玩家;
    //隐藏玩家
  slidePlayer（假）;};
功能onPlayerStateChange（事件）{    //当视频开始播放，
    //启用Android和放大器假全屏模式; iPad的
    如果（Event.data中== YT.PlayerState.PLAYING）{
        如果（isIpad）{
            fakeFullScreen（真）;
        }否则如果（isAndroid）{
            fakeFullScreen（真）;
        }
    }    //暂停时：隐藏播放器，显示大拇指
    如果（Event.data中== YT.PlayerState.PAUSED）{        如果（isAndroid）{
            //退出全屏
            fakeFullScreen（假）;            //滚动回选择
            window.scrollTo（0，playerTop）;
        }否则如果（isIpad）{
            fakeFullScreen（假）;
            window.scrollTo（0，playerTop）;
        }否则如果（isIphone）{
            幻灯片（假）;
        }
    }
}$（'＃vstImageAd .imageWrap IMG'）。点击（函数（五）{    亦即preventDefault（）;    变量$此= $（本）;    如果（球员）{        $ this.css（显示，无）;
        slidePlayer（真）;        player.playVideo（）;
    }}）;
//当拇指图像推，启动视频
$（'＃选择.playthumb IMG'）。点击（函数（五）{    变量$此= $（本），
        NR = parseInt函数（$ this.data（'NR'））;    如果（视频[NR]！）NR = 1;    player.loadVideoById（视频[NR]）;    //隐藏大拇指
    幻灯片（真）;
 }）;
}）;
 

解决方案

看起来你正在使用（player.playVideo（））是在移动设备中禁用某些功能。
在某些Android设备上使用player.playVideo（）后，我的情况下，视频isn't发挥甚至拍打后球员

的https://developers.google.com/youtube/iframe_api_reference?hl=zh-TW#Mobile_considerations

  

自动播放和回放脚本

  
  

HTML5元素，在一定的移动浏览器（例如Chrome
  和Safari），只允许它是否通过启动播放发生
  用户交互（例如，轻敲播放器）。

  
  

由于这个限制，功能等参数，自动播放，
  的playVideo（），loadVideoById（）将不会在所有的移动环境中工作**

I am trying to create a website for mobile where after clicking on an image a youtube video to play.

I have tested on several Android mobile phones/versions and on some doesn't behaves as intended.

What I mean is it stops at buffering and never reaches to play the video. Another thing that I noticed is that the player works after the user triggers the video to play and not programatically. More detailed if I directly show the youtube player, the user click to play video and afterward click a button/image to play another video this works.

I have posted here the test page that I worked with JsFiddle

$(document).ready(function () {

// Caching jQuery objects
var $body = $('body'),
    $log = $('#log'),
    $yt = $('#ytplayer'),
    $ytwrap = $('#ytwrapper'),
    $choices = $('#choices');


// This code loads the YouTube API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
$body.append(tag);

// This will become the player object when the API is ready
var player;

// See what kind of device we're using
var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = userAgent.indexOf('android') > -1;
var isIpad = userAgent.indexOf('ipad') > -1;
var isIphone = userAgent.indexOf('iphone') > -1;


window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {

    player = new YT.Player('ytplayer', {
        videoId: videos[0],
        playerVars: {
            allowfullscreen: 'allowfullscreen',
            playsinline: 0
        },
        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });


    window.player = player;
    //hide player 
  slidePlayer(false);

};


function onPlayerStateChange(event) {

    // When a video starts playing,
    // enable the fake fullscreen mode on Android & iPad
    if (event.data == YT.PlayerState.PLAYING) {
        if (isIpad) {
            fakeFullScreen(true);
        } else if (isAndroid) {
            fakeFullScreen(true);
        }
    }

    // On pause: hide the player, show thumbs
    if (event.data == YT.PlayerState.PAUSED) {

        if (isAndroid) {
            // Exit fullscreen
            fakeFullScreen(false);

            // Scroll back to choices
            window.scrollTo(0, playerTop);
        } else if (isIpad) {
            fakeFullScreen(false);
            window.scrollTo(0, playerTop);
        } else if (isIphone) {
            slide(false);
        }
    }
}



$('#vstImageAd .imageWrap img').click(function (e) {

    e.preventDefault();

    var $this = $(this);

    if (player) {

        $this.css("display", "none");
        slidePlayer(true);

        player.playVideo();
    }

});


// When a thumb image is pushed, start the video
$('#choices .playthumb img').click(function (e) {

    var $this = $(this),
        nr = parseInt($this.data('nr'));

    if (!videos[nr]) nr = 1;

    player.loadVideoById(videos[nr]);

    // Hide the thumbs
    slide(true);
 });
});

解决方案

Looks like some functions you are using (player.playVideo()) are disabled in Mobile devices. In my case after using player.playVideo() in some Android devices, the video isn´t played even after tapping the player

https://developers.google.com/youtube/iframe_api_reference?hl=zh-TW#Mobile_considerations

Autoplay and Scripted Playback

The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player).

Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments**

这篇关于YouTube API取得的playVideo方法不能在某些移动设备工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！