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

【问题标题】：How to play/start youtube video after clicking on an image?单击图像后如何播放/启动 youtube 视频？
【发布时间】：2023-03-30 03:56:02
【问题描述】：

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

非常感谢！

【问题讨论】：

code.google.com/intl/fr-FR/apis/youtube/js_api_reference.html
这是一个包含完整工作示例的帖子：objectpartners.com/2013/08/21/…

标签： javascript jquery api youtube click

【解决方案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" width="1280" height="720" 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）时，它不会启动。

【讨论】：

欢迎来到 StackOverflow。这似乎是评论而不是真正的解决方案。请考虑将其移至 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>

【讨论】：