您可以在不启用自动播放的情况下隐藏 YouTube 嵌入的控件吗？

Posted 2023-02-24

【中文标题】您可以在不启用自动播放的情况下隐藏 YouTube 嵌入的控件吗？

【英文标题】：Can you hide the controls of a YouTube embed without enabling autoplay?

【发布时间】：2014-01-09 17:41:44

【问题描述】：

<iframe   src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen>

如果您删除 ?autoplay=1，视频将无法播放。看起来您不能在未启用自动播放的情况下使用 controls 参数。

不知道为什么 YouTube 嵌入文章中没有提到这一点。

希望我错了。

https://developers.google.com/youtube/player_parameters#controls

【参考方案1】：

设置自动播放=0

<iframe   src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen>

如此处所示：Autoplay=0 Test

【讨论】：

注意：这似乎不再起作用。 YouTube 很可能已经更改了他们的 API - 不确定当前的替代/修复是什么。

需要注意的是，用户仍然可以使用右箭头键在视频中向前跳过。似乎每次按键都是 5 秒快进/跳过。如果这是您的目标，您将需要添加参数 &disablekb=1，这将禁用所有键盘功能（包括从键盘播放/暂停）。

showinfo 已弃用，请参阅文档修订历史公告 - link

【参考方案2】：

要继续使用 iframe YouTube，您只需将 ?autoplay=1 更改为 ?autoplay=0。

实现此目的的另一种方法是使用 YouTube javascript Player API。 (https://developers.google.com/youtube/js_api_reference)

编辑：不再支持 YouTube JavaScript Player API。

<div id="howToVideo"></div>

<script type="application/javascript">

    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = false;
    ga.src = 'http://www.youtube.com/player_api';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);

    var done = false;
    var player;

    function onYouTubePlayerAPIReady() 
        player = new YT.Player('howToVideo', 
            height: '390',
            width: '640',
            videoId: 'qUJYqhKZrwA',
        playerVars: 
            controls: 0,
            disablekb: 1
        ,
          events: 
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          
        );
    
    function onPlayerReady(evt) 
        console.log('onPlayerReady', evt);
    
    function onPlayerStateChange(evt) 
        console.log('onPlayerStateChange', evt);
        if (evt.data == YT.PlayerState.PLAYING && !done) 
            setTimeout(stopVideo, 6000);
            done = true;
        
    

    function stopVideo() 
        console.log('stopVideo');
        player.stopVideo();
    

</script>

这里是一个 jsfiddle 示例：http://jsfiddle.net/fgkrj/

请注意，播放器的“playerVars”部分中禁用了播放器控件。您做出的一项牺牲是用户仍然可以通过单击来暂停视频。我建议编写一个简单的 JavaScript 函数来订阅停止事件并调用 player.playVideo()。

【讨论】：

可以在 playerVars 中设置自动播放 0 吗？

添加&enablejsapi=1参数时不支持JS API吗？

有什么证据表明不再支持 JS api？文档上没有通知说明。

【参考方案3】：

使用autoplay=0

自动播放需要 2 个值。

Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.

重要的部分

autoplay=0&showinfo=0&controls=0

这是你的问题的演示FIDDLE

【参考方案4】：

如果您在 src 末尾添加此 ?showinfo=0&iv_load_policy=3&controls=0，它将删除除右下角 YouTube 徽标之外的所有内容 工作示例：http://jsfiddle.net/42gxdf0f/1/

【参考方案5】：

?modestbranding=1&autohide=1&showinfo=0&controls=0

autohide=1

这是我从未找到的东西......但它是关键:) 我希望它有所帮助

【参考方案6】：

关注https://developers.google.com/youtube/player_parameters 了解有关视频控件的更多信息，例如：

<iframe id="video_iframe"   src="http://www.youtube.com/v/course_url?start=7&autoplay=0&showinfo=0&iv_load_policy=3&rel=0"
                frameborder="0"
                allowfullscreen></iframe>

start=7&autoplay=0&showinfo=0&iv_load_policy=3&rel=0" frameborder="0"

所有控件都在其中描述

【参考方案7】：

要删除你的管 controls 和 title 你可以这样做

<iframe width="560" height="315" src="https://www.youtube.com/embed/zP0Wnb9RI9Q?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen ></iframe>

code with output

showinfo=0 用于删除标题，&controls=0 用于删除音量、播放、暂停、花费。

【参考方案8】：

您可以使用“Youtube-nocookie”隐藏“稍后观看”按钮（这不会隐藏分享按钮）

添加 controls=0 也将删除屏幕底部的视频控制栏，使用 modestbranding=1 将删除屏幕右下角的 youtube 徽标

但是同时使用它们并不能按预期工作（它只会隐藏视频控制栏）

<iframe   src="https://www.youtube-nocookie.com/embed/fNb-DTEb43M?controls=0" frameborder="0" allowfullscreen></iframe>

【参考方案9】：

自动播放仅适用于 /v/ 而不是 /embed/，因此将 src 更改为：

src="//www.youtube.com/v/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0"

【讨论】：

自动播放参数适用于我的 /embed/ 链接。