Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:
#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:
$(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
});
Posted
Updated 19-Oct-20 23:40pm
v2

Refer- HTML5 Video[^].

Check "Video Formats and Browser Support" to know the browser support.

I would also suggest you to go through article How To Check If Your Browser Supports HTML5 Or Not[^] which gives you a tip to use flash when video tag is not supported by browser.
 
Share this answer
 
$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});
 
Share this answer
 
Comments
CHill60 20-Oct-20 6:23am    
An unformatted, uncommented code dump is not a solution to this 7 year old question

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900