在Android Kitkat上模拟鼠标点击Youtube视频

时间:2015-04-04 16:36:43

标签: javascript android jquery youtube

Youtube允许在iframe代码的帮助下嵌入用户创建的播放列表。我想将它们嵌入到一个网页上,以便在Android(Kitkat 4.4)电视盒硬件上播放。但是,它要求用户首先点击视频。

我发现Apple iOS和Android在大多数移动平台上禁用自动播放以避免糟糕的用户体验

但是,是否可以使用Jquery或纯JS解决方案(首选)模拟用户点击iframe。像这样:

 function myFunction() {
         setTimeout(function() {           ("#myiframe").triggerHandler('click');    },3000)
                }; 

如果有人可以帮助我,我将非常感激,因为这个功能对我的目的至关重要,而且我已经进行了广泛的搜索,但无法得到正确的解决方案。

感谢 DKJ

1 个答案:

答案 0 :(得分:1)

早上好dkjain,

据我在Youtube Player API docs中读到,加载播放器后会触发几个事件,其中一个事件应该是onReady()事件。

以下是有关如何自动播放单个视频或播放列表的一些更新代码:

HTML:

<div id="player"/> 将成为Youtube播放器的占位符


播放播放列表(playerVars):

JS:

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        playerVars: { 
            'listType': 'playlist',
            'list': 'PLi5VEqNXXQjVJ4-xZb92wTUawkSQRal0u'            
        },
        events: {
          'onReady': onPlayerReady
        }
    });
}
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

// as soon as the player is loaded, start the playback
function onPlayerReady(event) {
  event.target.playVideo();
}

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
document.head.appendChild(tag);

还有一个autoPlay: 1 playerVar,但这似乎不适用于移动平台:https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations


播放单个视频

JS:

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'nhX4rQ79C1A',
    events: {
        'onReady': onPlayerReady
    }
  });
}

window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

// as soon as the player is loaded, start the playback
function onPlayerReady(event) {
  event.target.playVideo();
}

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
document.head.appendChild(tag);

JSFiddles显示上面的代码:

单个视频:http://jsfiddle.net/Moonbird_IT/akjpmvpf/

播放列表:http://jsfiddle.net/Moonbird_IT/akjpmvpf/4/(再次更新)

如果我们朝着正确的方向前进,请告诉我: - )