4

I'm working on mobile device (iOS) and I want to click on a thumbnail to launch a youtube video. On iOS device the video appears in fullscreen.

I'm using iframe but i want to use only image: 

<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"/>

How can I do this ?

Thanks

4

2 回答 2

0

缩略图的 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

于 2013-06-28T12:07:02.400 回答
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/

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

此外，video id通过播放器的初始化传递也无法正常工作。

你想达到什么

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

我希望这可以帮助你！

祝你好运！

于 2013-07-03T11:59:29.247 回答