【问题标题】:Simulate mouse click on Youtube videos on Android Kitkat在 Android Kitkat 上模拟鼠标点击 Youtube 视频
【发布时间】:2015-06-09 12:38:32
【问题描述】:

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

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

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

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

如果有人能帮我解决这个问题,我将不胜感激,因为此功能对我的目的至关重要,我进行了广泛搜索,但找不到合适的解决方案。

谢谢 dkj

【问题讨论】:

标签: javascript android jquery youtube


【解决方案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/(再次更新)

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

【讨论】:

  • 您好,早上好,很高兴看到您的回复,过去 2 天我一直在为此苦苦挣扎。该代码完美适用于单个视频,但我正在尝试嵌入播放列表。你能试着把它做成一个播放列表吗?这是我的播放列表代码:...thanxs.
  • 这会有所帮助吗:stackoverflow.com/questions/9313216/…。我试过了,但我无法让它工作。
  • 你能再看看吗?答案现在包含一个如何播放播放列表的示例,与前面的示例相比,您基本上需要更改的唯一一件事是包含 playerVars 而不是提供 VideoID。 HTH 和复活节快乐!
  • Hy, 'autoplay': 1,适用于桌面浏览器,但不适用于我的移动设备,这是我一直在努力解决的问题。
  • 是的,请阅读相关内容。我结合了第一个和第二个代码,现在它应该可以工作了。
猜你喜欢
  • 2011-12-30
  • 2011-04-02
  • 1970-01-01
  • 1970-01-01
  • 2022-11-18
  • 1970-01-01
  • 2017-04-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多