单击图像时开始/播放嵌入式（iframe）youtube-video

Posted 2023-02-24

【中文标题】单击图像时开始/播放嵌入式（iframe）youtube-video

【英文标题】：start/play embedded (iframe) youtube-video on click of an image

【发布时间】：2011-09-08 23:16:37

【问题描述】：

我正在尝试通过单击图像开始播放嵌入的 youtube 视频。这个想法是在视频顶部放置一个图像，当单击该图像时，它会淡出并开始播放视频。

我正在使用 jquery 淡化图像，并希望找到一种方法来使用 jquery 播放或单击视频。

淡入淡出工作正常，但我不知道如何触发视频播放。 我通过将视频设置为自动播放并隐藏它，然后在单击图像时淡入视频，让它在几个浏览器上工作。在大多数浏览器上，视频会在淡入时自动播放，但在 chrome 中，即使它被隐藏，它也会开始自动播放。它在 ios 中也不能很好地工作。

由于我对此很陌生，我什至不确定我写的是否 100% 正确，但我尝试过这样的事情但没有成功：

     $('#IMAGE').click(function()  $('#VIDEO').play(); );

那么，我将如何让视频在点击图片时播放？ 有没有办法在点击图片时播放视频，只使用jquery？

提前谢谢你。

【问题讨论】：

这个运气好吗？我想在悬停时开始/停止 iframed youtube 视频

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

@NateFlink 您的示例在 Chrome 中不再适用于我。

【参考方案1】：

YouTube iframe 示例

<iframe id="video" src="https://www.youtube.com/embed/xNM7jEHgzg4" frameborder="0"></iframe>

点击播放 html 元素

<div class="videoplay">Play</div> 

播放视频的jQuery代码

$('.videoplay').on('click', function() 
    $("#video")[0].src += "?autoplay=1";
);

感谢https://codepen.io/martinwolf/pen/dyLAC

【讨论】：

@JohannCombrink 所有解决方案都不能作为 android/iOS 内置行为 ***.com/a/15093243/248616

@alex 这应该被接受，因为它是通过.src += "&autoplay=1"的最干净的代码

@NamGVU，因为原始发帖人在描述中说，他最初的尝试“它在 iOS 中也不能很好地工作”，这告诉我他需要它在 iOS 上运行。而且由于在移动设备上进行的浏览比在桌面浏览器上进行的浏览更多，因此不应将其视为正确答案，因为它不能解决操作问题。这是我们现在所做的是接受部分有效的答案还是我们应该接受完整的答案。 hrrmmmm....我想知道。

我试图做同样的事情，但我的 iframe 中已经有了 ?rel=0。如果您在同一条船上，请使用“&autoplay=1”而不是“?autoplay=1”

点击按钮不播放

【参考方案2】：

HTML代码：-

<a href="#" id="playerID">Play</a>
<iframe src="https://www.youtube.com/embed/videoID" class="embed-responsive-item" data-play="0" id="VdoID" ></iframe>

Jquery 代码：-

$('#playerID').click(function()
    var videoURL = $('#VdoID').attr('src'),
    dataplay = $('#VdoID').attr('data-play');

    //for check autoplay
    //if not set autoplay=1
    if(dataplay == 0 )
        $('#VdoID').attr('src',videoURL+'?autoplay=1');
        $('#VdoID').attr('data-play',1);
     
     else
        var videoURL = $('#VdoID').attr('src');
        videoURL = videoURL.replace("?autoplay=1", "");
        $('#VdoID').prop('src','');
        $('#VdoID').prop('src',videoURL);

        $('#VdoID').attr('data-play',0);
     

);

就是这样！

【参考方案3】：

开始视频

var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);

停止视频

var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);

如果没有其他参数，您可能需要将“&autoplay=1”替换为“?autoplay=1”

适用于 FF 和 Chrome 上的 vimeo 和 youtube

【讨论】：

实际上是 ?autoplay=1 而不是 &

@Mike 这取决于源 URL 中是否有任何参数。

【参考方案4】：

复制这个 div 代码应该可以完美运行

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer;"  src="http://oi59.tinypic.com/33trpyo.jpg" />
</div>
<div id="thevideo" style="display: none;">
<embed   type="application/x-shockwave-flash" src="https://www.youtube.com/v/26EpwxkU5js?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />
</div>

【参考方案5】：

你可以像这样简单地做到这一点

$('#image_id').click(function() 
  $("#some_id iframe").attr('src', $("#some_id iframe", parent).attr('src') + '?autoplay=1'); 
);

其中 image_id 是您点击的图片 ID，some_id 是 div 的 ID，其中 iframe 也是您可以直接使用 iframe id。

【讨论】：

如果 url 之前有查询参数怎么办。值得深思。

如果您知道它总是在那里，那么您可以将 ?autoplay=1 替换为 &autoplay=1。但如果这是不确定的，那么你必须找到那些参数并将这个额外的附加到那个

【参考方案6】：

快速而肮脏的方法是简单地将iframe 替换为使用jQuery 设置的autoplay=1。

HTML

占位符：

<div id="videoContainer">
  <iframe   src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>

---

自动播放链接：

<a class="introVid" href="#video">Watch the video</a></p>

JQUERY

调用函数的onClick 捕手

jQuery('a.introVid').click(function()
  autoPlayVideo('VIDEO_ID_HERE','450','283');
);

---

功能

/*--------------------------------
  Swap video with autoplay video
---------------------------------*/

function autoPlayVideo(vcode, width, height)
  "use strict";
  $("#videoContainer").html('<iframe   src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');

【讨论】：

在阅读了这个出色的解决方案后，不得不查找“use strict” (***.com/questions/1335851/…)。

哪些版本？尝试删除“use_strict”；看看它是否有效。

遗憾的是，这在移动平台上不起作用，因为它们不允许自动播放功能。除此之外，这很好用+1。

旁注：此解决方案可能不会计算观看次数，请参阅***.com/q/38189515/1066234

和@BlakePlumb 说的一样，不适用于移动设备；这就是 Android/iOS 内置行为***.com/a/15093243/248616

【参考方案7】：

您应该能够指定一个安全的脚本域。 api文档提到 “作为一项额外的安全措施，您还应该在 URL 中包含 origin 参数” http://code.google.com/apis/youtube/iframe_api_reference.html src="http://www.youtube.com/embed/J---aiyznGQ?enablejsapi=1&origin=mydomain.com" 将是您的 iframe 的 src。

但是它没有很好的记录。我现在正在尝试类似的东西。