首页 文章

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

提问于
浏览 次
0

我正在尝试用里面的Vimeo视频创建弹出窗口 . 我的页面上有div = id =“showVideo” . 点击该div我想打开弹出窗口（id为“open-video”的新div） . ID =“open-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 =“opens-video”，我使用Javascript函数执行此操作

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

    }

这也有效，但有一个问题，open-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 回答

  • 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

    回复于

相关问题