点击缩略图播放youtube视频

Click on thumbnail to play youtube video

本文关键字：youtube 视频 播放 略图      更新时间：2023-09-26

我正在使用移动设备（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"/>

我该怎么做？

感谢

您的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/

正如您所看到的，在src中添加参数&enablejsapi=1非常重要。

此外，video id在玩家初始化过程中的传递也不正确。

您想要实现的目标

你想要实现的是通过点击图像开始视频（至少如果我理解正确的话）。正如您在JsFiddle中看到的，我现在创建了一个play按钮，用于启动视频。您现在可以替换图像或任何其他您想要初始化视频的内容。

我希望这能帮到你！

祝你好运！

缩略图的URL是可预测的：

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

相关文章：