Question

我正在使用移动设备（iOS），我想点击缩略图来启动YouTube视频。在iOS设备上，视频以全屏显示。

我正在使用iframe，但我只想使用图片：

<iframe id="ytplayer" type="text/html" width="120" height="100" src="http://www.youtube.com/embed/'+id+'?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0"/>

我该怎么做？

由于

Answer 1

缩略图的网址是可预测的：

http://img.youtube.com/vi/[id]/0.jpg

http://img.youtube.com/vi/[id]/1.jpg

http://img.youtube.com/vi/[id]/2.jpg

http://img.youtube.com/vi/[id]/3.jpg

有关详细信息，请参阅此答案：

https://stackoverflow.com/a/2068371/318557

Answer 2

您的HTML：

<iframe id="ytplayer" type="text/html" width="120" height="100"  
src="http://www.youtube.com/embed/'+id+'?hd=1&rel=0&autohide=1&showinfo=0" 
frameborder="0"/>

所需的jQuery：

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      height: '200',
      width: '200',
      playerVars: { 'autoplay': 1, 'controls': 0 },
      events: {
        'onReady': onPlayerReady
      }
    });
}

function onPlayerReady(event){
  event.target.playVideo();
    $("#play").on('click', function() {
      player.playVideo();
    });
    $("#pause").on('click', function() {
      player.stopVideo();
    });
}

工作示例：

http://jsfiddle.net/8kN6Z/218/

如您所见，向&enablejsapi=1添加参数：src非常重要。

此外，video id通过播放器的初始化传递无效。

您想要实现的目标

您希望实现的是通过单击图像来启动视频（至少在我理解正确的情况下）。正如您在JsFiddle中看到的，我现在创建了一个启动视频的play按钮。您现在可以替换图像或其他任何您想要初始化视频的内容。

我希望这会帮助你！

祝你好运！

点击缩略图即可播放YouTube视频

2 个答案: