【问题标题】:Is it possible to hide youtube's big red play button with a parameter?是否可以使用参数隐藏 youtube 的红色大播放按钮?
【发布时间】:2014-01-02 23:53:38
【问题描述】:

我目前用于创建 YouTube iframe 的代码的快速示例:

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

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

问题是现在不需要在视频开始时立即显示的红色大“播放”按钮。

有什么办法可以解决这个问题吗?我浏览了文档,找不到合适的参数来隐藏它。

【问题讨论】:

    标签: javascript html youtube youtube-javascript-api


    【解决方案1】:

    我发现这是不可能的。因此,隐藏播放按钮的唯一方法是将视频图像放在可以从 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();
    });
    

    【讨论】:

    • 这也违反了服务条款,因为您不能自己在视频上叠加任何内容。
    • 这不是真的。如jwplayer.jsvideo.js YouTube 包装中所示,可以去掉大红色的重播按钮。这两个流行的 JavaScript 库都依赖于 YouTube iFrame API 来嵌入 YouTube。所以我不认为他们使用了什么黑魔法。
    • @stillenat video.js 例如确实使用“黑魔法”。它只是获取标准缩略图图像之一并将这样的叠加层插入到 DOM 中。它只会在您按下播放后将 youtube 视频插入 DOM,即使这样它也不使用 YouTube iframe。
    【解决方案2】:

    每个 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
    

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

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

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

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

    对于标准定义版本的缩略图,使用类似这样的 url:

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

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

    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 来获取缩略图。

    【讨论】:

    • 我很欣赏这个答案所付出的努力,但问题是图像是不需要的。理想情况下,我想摆脱它们。
    • 我发现有用的两个参数是: showinfo=0 controls=0 autohide=1 showinfo=0 确保视频不会在视频帧的顶部显示标题。 controls=0 隐藏带有播放按钮、音量等的底部栏。autohide=1 隐藏控件,直到您将鼠标悬停在它们上方,这可能是最有用的。所有官方文档都是here
    • 我知道伙计,我很感激,但我已经尝试过了;这些参数已经到位。
    • 手动删除“在 youtube 上播放”叠加层违反了服务条款。检查我的新答案
    • 这个答案没有为 OP 的要求提供解决方案。
    猜你喜欢
    • 2017-11-21
    • 2015-05-30
    • 1970-01-01
    • 2012-03-28
    • 2014-12-01
    • 2012-03-08
    • 2017-04-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多