关闭其内嵌弹出窗口，跨浏览器时如何停止html5视频 [英] How to stop html5 video when closing its inline popup, cross-browser

问题描述

你好伙伴们，我在需要的时候来找你。我有一个包含html5视频的内联弹出窗口。我添加了一个停止（'＃video'）;到关闭弹出功能，这是有效的，但只有在Chrome和Opera，而不是在Firefox和EI，这导致我基于相同的代码的子问题，任何人都可以找到视频无法正确加载的原因歌剧和Safari。我不能为我的生活弄清楚为什么和我希望你们中的一个可以。



HTML：

Hello fellow coders i come to you in a time of need. I have an inline popup containing html5 videos. i added a stop('#video'); to the "close popup" function and this works, but only in Chrome and Opera, not in Firefox and EI, which leads me to a sub question, based on the same code, can anyone se a reason why the video wont load properly in Opera and Safari. I cant for the life of me figure out why and im hoping one of you can.

HTML:

<section id="video">
    <a href="#" class="topopup">
        <img src="images/play.png" alt="Play company video" title="Play company Video"/>
    </a>

    <div id="toPopup">
        <div class="close"></div>
        <div id="popup_content">
            <video width="100%" height="auto" controls>
                <source src="video/AM1.mp4" type="video/mp4">
                <source src="video/AM2.webm" type="video/webm">
                <source src="video/AM3.ogg" type="video/ogg">
                Video format not supported by your browser
            </video>
        </div>
    </div>
    </div>
    <div id="backgroundPopup"></div>
</section>

CSS：

CSS:

#video {
    background: #ecf0f1;
    /*light gray*/
}

#video img {
    width: 36.11%;
    max-width: 252px;
}

#backgroundPopup {
    position: fixed;
    display:none;
    height:100%;
    width:100%;
    background:#000000;
    top:0px;
    left:0px;
}

#toPopup {
    background: none repeat scroll #000;
    margin-left:10%;
    margin-right:10%;
    height:auto;
    display: none;
    position: fixed;
    top: 10%;
    z-index: 1;
}

JavaScript：

JavaScript:

$(this).keyup(function (event) {
    if (event.which == 27) // 27 is 'Ecs' in the keyboard
    disablePopup(); // function close pop up
});

$(this).keyup(function (event) {
    if (event.which == 27) stop('#video');

});

$("div#backgroundPopup").click(function () {
    disablePopup(); //  close pop up

});

$("div#backgroundPopup").click(function () {
    stop('#video'); // stop video
});

推荐答案

（this）.keyup（function（event）{
if（event.which == 27）// 27键盘中的'Ecs'
disablePopup（）; //函数关闭弹出
}）;

(this).keyup(function (event) { if (event.which == 27) // 27 is 'Ecs' in the keyboard disablePopup(); // function close pop up });

（this）.keyup（ function（event）{
if（event.which == 27）stop（'＃video'）;

}）;

(this).keyup(function (event) { if (event.which == 27) stop('#video'); });

（ div＃backgroundPopup）。click（function（）{
disablePopup（）; //关闭弹出

}）;

("div#backgroundPopup").click(function () { disablePopup(); // close pop up });

这篇关于关闭其内嵌弹出窗口，跨浏览器时如何停止html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！