是否可以使用参数隐藏youtube的大红色播放按钮?

时间:2013-12-15 16:05:22

标签: javascript html youtube youtube-javascript-api

我正在使用的代码的快速示例来创建我的YouTube iframe:

player = new YT.Player('[PLAYER ID]', {
  height: '300',
  width: '480',
  videoId: '[VIDEO ID]',
  playerVars: { 'controls': 0, 'showinfo': 0 },
});

到目前为止,它的工作效果都非常好,它可以在没有控件或信息条的情况下加载视频,我可以“手动”使用javascript播放视频。

问题在于,现在不再需要大红色的“播放”按钮,该按钮会暂时显示为视频的开始。

enter image description here

有什么方法可以摆脱这个吗?我查看了文档,找不到合适的参数,可以让我隐藏它。

2 个答案:

答案 0 :(得分:5)

我发现它不可能。因此,隐藏播放按钮的唯一方法是将视频图像放在视频上方,可以从youtube获取,如下所示。 每个YouTube视频都有4个生成的图片。它们的格式如下:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

但是一旦添加了叠加层,点击屏幕而不是控制将无法播放视频,为此,请添加以下播放视频的jQuery

jQuery('#overlay').click(function(){
  jQuery(this).hide();
  jQuery('#youtube_id').get(0).playVideo();
});

答案 1 :(得分:1)

每个YouTube视频都有4个生成的图片。它们的格式如下:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

列表中的第一个是全尺寸图像,其他是缩略图图像。默认缩略图图像(即1.jpg2.jpg3.jpg之一)是:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

对于高质量版本的缩略图,请使用与此类似的网址:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

还有一个中等质量版本的缩略图,使用类似于总部的网址:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

对于缩略图的标准定义版本,请使用与此类似的网址:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

对于缩略图的最大分辨率版本,请使用与此类似的网址:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

以上所有网址都可通过https获取。只需在上述任意网址中将http更改为https即可。此外,稍微缩短的主机名i3.ytimg.com可用于代替上面示例网址中的img.youtube.com

或者,您可以使用YouTube Data API (v3)或较旧的YouTube API v2.0来获取缩略图。