在模态中单击时自动播放 Vimeo 视频答案

【问题标题】：Autoplay Vimeo video on click in modal在模态中单击时自动播放 Vimeo 视频
【发布时间】：2014-07-23 23:22:03
【问题描述】：

如何在图像点击时在引导模式窗口中自动播放 iframe 中的 Vimeo 视频？

我在使用 YouTube JavaScript API 之前已经这样做了，但不知道这如何与 Vimeo 一起使用。我看到他们也有一些 API，但可以使用一些指针来说明它是如何工作的。

首先尝试使用 jQuery 将 ?autoplay=1 附加到模态中的 iframe video src 属性，但没有成功。

当模式在视频完成之前隐藏时，我还需要 stop() 视频在后台运行。

任何指向正确方向的指针都非常有帮助！！！谢谢！

【问题讨论】：

我也在尝试用 jQuery 来完成这个
阅读此developer.vimeo.com/player/js-api 它应该会告诉您您需要做什么。您还可以尝试通过在加载 $('.your-video').click() 时手动触发点击视频来绕过 api

标签： javascript jquery vimeo vimeo-api

【解决方案1】：

我尝试使用 '?autoplay=1' 附加 iframe 的源代码，就像您提到的那样：

$("iframe")[0].src += "?autoplay=1";

似乎对我有用。我相信 iframe 还需要包含“allow="autoplay"'，例如：

<iframe src="YOURVIDEOURL" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay">

要停止点击视频 - 我想附加 src，然后删除 '?autoplay=1' 也可以。

希望这对某人有所帮助！

【讨论】：

这对我不起作用，我需要 &autoplay=1 而不是 ?autoplay=1

【解决方案2】：

如果您熟悉 jQuery，我编写了一个插件，可以简化使用标准 jQuery 表示法控制 Vimeo 视频。

https://github.com/jrue/Vimeo-jQuery-API

$("#yourvideo").play();

【讨论】：

【解决方案3】：

如果您尝试在单击图像时自动播放 vimeo 视频，那么这可能会有所帮助，我在单击图像时播放视频时遇到了同样的问题，但最终找到了这个解决方案。

<div id="modal-Id">
   <div id="parent-div">
     <img id="vimeo-videoId" src="images/your-image.png" onclick="return imgClick();" />
   </div>
</div>

 function imgClick() {
                jQuery('#your-imageId').hide();  //hide image to play the video
                var ifrm = document.createElement("iframe");
                ifrm.setAttribute("src", "https://player.vimeo.com/video/123456789?autoplay=1");
                ifrm.style.width = "496px";
                ifrm.style.height = "277px";
                // add rest of your values
                ifrm.frameborder = 0;
                document.getElementById("your-parent-Div").appendChild(ifrm);  //append it to your parent div 
                return false;
            }

【讨论】：