使用 Vimeo 视频自动播放打开/关闭弹出窗口 - Javascript答案

【问题标题】：Open/close popup with Vimeo video auto play - Javascript使用 Vimeo 视频自动播放打开/关闭弹出窗口 - Javascript
【发布时间】：2015-10-29 23:37:27
【问题描述】：

我正在尝试创建带有 Vimeo 视频的弹出窗口。我的页面上有 id="showVideo" 的 div。单击该 div 我想打开弹出窗口（带有 id="opened-video" 的新 div）。 id="opened-video" 的 Div 具有看起来像这样的 Viemo 视频 iframe

<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

使用 src url 中的 ?autoplay=1 参数将此 iframe 设置为自动播放。

这是我的 JavaScript

jQuery(document).ready(function(){

    jQuery('#showVideo').click(function() {
    jQuery('#opened-video').fadeIn().html('<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><img src="<?php echo get_template_directory_uri()?>/images/resp-menu-close.png" alt="Close video" onClick="closeDiv()" id="close-video" />');
    }); 
});

这行得通。

您会注意到 html() 函数中的图像标签，这是用于关闭 id="opened-video" 的图像，我使用 Javascript 函数来实现

function closeDiv() {
        document.getElementById('opened-video').style.display = "none";

    }

这也有效，但有一个问题，opened-video 设置为 display="none" 但 Vimeo 视频仍在后台播放，我听到声音。当我按下 id="close-video" 图像时如何停止视频工作？单击图像时如何删除 src 参数 ?autoplay=1 ？还是有其他建议？

这是 HTML

<img src="<?php echo get_template_directory_uri()?>/images/play-real.png" alt="Play real" id="showVideo"  />

<div class="video-front" id="opened-video">     
    </div>

【问题讨论】：

标签： javascript jquery html css video

【解决方案1】：

在您的closeDiv() 函数中，将这两行设置为无显示，然后插入这两行，

$('iframe').attr('src', "");
$('iframe').attr('src', $('iframe').attr('src'));

所以它看起来像，

function closeDiv() {
    document.getElementById('opened-video').style.display = "none";
    // Removes the src
    $('iframe').attr('src', "");    
    // Reloads the src so that it can be played again
    $('iframe').attr('src', $('iframe').attr('src'));     
}

Working DEMO

【讨论】：