嵌入式视频即使在关闭后仍可播放

时间:2016-10-29 12:25:51

标签: javascript html

我有一个视频,即使关闭它也会继续播放。 我觉得我的jQuery中缺少一些东西。 有谁可以帮助我。 以下是与之相关的代码。

Jquery的

$("[data-media]").on("click", function(e) {
    e.preventDefault();
    var $this = $(this);
    var videoUrl = $this.attr("data-media");
    var popup = $this.attr("href");
    var $popupIframe = $(popup).find("iframe");

    $popupIframe.attr("src", videoUrl);



    var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var left = left/2 - 340;

    var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var top = top/2 - 180

    document.getElementById("vid").style.top = top + "px";
    document.getElementById("vid").style.left = left + "px"; 

    $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
    e.stopPropagation();
});

HTML

<div class="page"> <!-- class "page" is required for video to work-->
        <div class="popup" id="media-popup"> <!-- video embedded -->
            <iframe id="vid" src="http://testvideo.com" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div><!-- popup -->
</div>

1 个答案:

答案 0 :(得分:1)

当你点击一个视频网址时,你会看到一个视频网址列表,会出现一个弹出窗口,显示相应的视频。当你完成该视频时,你想通过点击iframe外部但在弹出窗口内删除它。

这是问题所在 您正在使用此$(".page").removeClass("show-popup"); 为了让第二部分完成删除这个类,只需使用css displayvisibility隐藏它就像让某些东西看不见但仍然可以听到它,所以视频是隐形的,但它是&#39 ; s还在那里玩。要解决此问题,你需要擦除iframe的src

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