Search code examples
jqueryasp.netoverlayswfobject

jquery video popup overlay not ending video in IE on close


Using the code found here:

How to popup a jquery window to play youtube video?

I created the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script src="js/swfobject.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">

    $(function () {
        var videoModal = $('#video-modal').overlay({
            expose: {
                color: 'black',
                loadSpeed: 200,
                opacity: 0.85
            },
            closeOnClick: true,
            api: true
        });

        $('.video-link').click(function () {
            videoModal.load();

            var videoUrl = $(this).attr('href');
            var flashvars = {};
            var params = {
                allowFullScreen: "true",
                allowscriptaccess: "always"
            };
            var attributes = {};

            swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);

            return false;
        });
    });

</script>
    <form id="form1" runat="server">
   <a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 1</a>
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 2</a>

<div class="modal" id="video-modal">
    <div id="video-container" style="width: 425px; height: 344px;"></div>
</div>



    </form>
</body>
</html>

It works as expected in firefox (on clicking anywhere outside of the video container, the popup closes and the video stops playing). In IE - the video continues to play on close. Any ideas on how I could stop the video from playing in IE?

When i use swfobject.removeSWF I can no longer click on any of the links and have my movie 'open' again. Here is where I'm at so far:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var videoModal = $('#video-modal').overlay({
            expose: {
                color: 'black',
                loadSpeed: 200,
                opacity: 0.85
            },
            closeOnClick: true,
            api: true,
            onClose: function () {
                swfobject.removeSWF('video-container');
            }
        });

        $('.video-link').click(function () {
            videoModal.load();

            var videoUrl = $(this).attr('href');
            var flashvars = {};
            var params = {
                allowFullScreen: "true",
                allowscriptaccess: "always"
            };
            var attributes = {};
            swfobject.createSWF({ data: this.href, width: "425", height: "344" }, params, 'video-container');


            return false;
        });


    });


</script>

Solution

  • To stop your flash video when you close it, or hide it, you need to call the swfobject.removeSWF('video-container')

    From the document of the overlay that you use http://flowplayer.org/tools/overlay/index.html we see that there is the close() and the onlose, that you can call the above function to stop your video when the dialog close.

    I have to say you, that the video is not stop on any browser, if you not call the removeSWF. Just the mozilla stop by him self, or hide it and you not see it, I do not know, but you need to call this command to stop it.