单击图像后如何播放/启动 youtube 视频？

Posted 2023-02-24

【中文标题】单击图像后如何播放/启动 youtube 视频？

【英文标题】：How to play/start youtube video after clicking on an image?

【发布时间】：2011-11-16 09:22:09

【问题描述】：

我有一张图片，我只想在点击图片后开始播放 youtube 视频。我该怎么做？

非常感谢！

【问题讨论】：

code.google.com/intl/fr-FR/apis/youtube/js_api_reference.html

这是一个包含完整工作示例的帖子：objectpartners.com/2013/08/21/…

【参考方案1】：

看看：

Youtube API examples

代码将是这样的：

function onPlayerReady(event) 
    $('img').click(function()  
        ytPlayer.playVideo();
    );

【参考方案2】：

另一种方法 - 使用“?autoplay=1”版本切换 iframe SRC（URL）。

<a href="#" id="clickMe">PLAY</a>

<iframe id="iframe"   src="//www.youtube.com/embed/F0naUkyEkmM" 
            data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"></iframe>

jQuery:

jQuery("#clickMe").on('click',function()
    var vi = jQuery("#iframe");
    vi.attr("src", vi.data("autoplay-src") );
);

【讨论】：

使用这种方法，如果你在浏览器中点击“返回”，就会出现一些混乱

【参考方案3】：

添加 autoplay=1 似乎只在第一次工作。我正在使用开始/停止按钮，当我第一次单击它时，我添加了 autoplay=1。然后，当我再次单击它时，我删除了 autoplay=1。效果很好。

但是当我尝试再次启动它（添加 autoplay=1）时，它不会启动。

【讨论】：

欢迎来到 ***。这似乎是评论而不是真正的解决方案。请考虑将其移至 cmets 部分或将其作为问题单独发布。无论如何，祝你有美好的一天！

【参考方案4】：

.click()JQuery 事件处理器：

$("#clickMe").click(function()
  $("#iframe")[0].src += "&autoplay=1";
  ev.preventDefault();
);

【参考方案5】：

我认为这会对您有所帮助。对我来说工作得很好。

$('.trigger').on('click', function () 
    $(".video")[0].src += "1";
);

<a href="#" class="trigger">Click</a>
        
<iframe class="video" src="https://www.youtube.com/embed/HJX71gFz_do?autoplay=" frameborder="0" allowfullscreen></iframe>