How to stop video in ie8 when hiding a div?

Question

I have written some JavaScript that will display a video when someone clicks on a picture and then they can click on the "x" to close the video but the video continues to play in ie8 when hidden but stops with FireFox and Chrome. If anyone can tell me how to fix this by having the video stop when the "xbutton" image is clicked I'd greatly appreciate it I have been fighting with this for hours. This is what I have so for JavaScript:

    function toggle(div_id) {
       var el = document.getElementById(div_id);
       if ( el.style.display == 'none' ) {  el.style.display = 'block';}
       else {el.style.display = 'none';}    }

    function blanket_size(popUpDivVar) {
      var blanket = document.getElementById('blanket');
      blanket_height = document.body.parentNode.scrollHeight;           
      blanket.style.height = blanket_height + 'px'; 
          }

    function popup(windowname) {
       blanket_size(windowname);    
       toggle('blanket');
       toggle(windowname);  
           }

and this is the html I am using. I am just using dreamweaver to add a .flv video file from my computer.

    <div id="blanket" style="display:none;"></div>
    <div id="popUpDiv" style="display:none;">
    <a href="#popUpDiv" onclick="popup('popUpDiv')"><img 
    src="../New images/newxbtn-red.png" class ="xbutton" alt = "Close"/></a>
    <p> Video Header</p>
    <!--Dreamweaver video code starts here -->
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="622"
    height="350" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="allowScriptAccess" value="always" />
    <param name="FlashVars" 
    value="&amp;MM_ComponentVersion=1&amp;skinName=Halo_Skin_3&amp;streamName=video/bf-
    eng&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download 
    the latest version of Flash Player. Delete it if you don’t want users to see the 
    prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
     <!--[if !IE]>-->
     <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf"  
     width="622" height="350">
     <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="allowScriptAccess" value="always" />
    <param name="FlashVars"  
    value="&amp;MM_ComponentVersion=1&amp;skinName=Halo_Skin_3&amp;streamName=video/bf-  
    eng&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash 
    Player 
    6.0 and older. -->'
    <div>
   <p><a href="http://www.adobe.com/go/getflashplayer"><img 
   src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"  
   alt="Get Adobe Flash player" /></a></p>
   </div>
   <!--[if !IE]>-->   
   </object>
   <!--<![endif]-->
   </object>
    <!-- Video Ends -->
     </div>
     <div class ="image">   
     <a href="#popUpDiv" onclick="popup('popUpDiv')">
     <img src="img/farmers/Donahue_Beef.jpg" width="190" height="110" alt="Beef" />
     <img src="../New images/playbtn.png" width="200" height="116" alt="Play" class = 
     "play"/></a>
     </div>

Thanks again!

score 3 · Answer 1 · edited Dec 06 '12 at 19:23

3

There may be a very easy way using jQuery. In my case I generated a flash embed div with object in it. With jQuery you can easily define a close button with the empty() function on click. This clears the content of the div and the video is no longer in the DOM.

$("#video a.close").click(function(){
 $("#flashlayer").empty();
}

edited Dec 06 '12 at 19:23

AMIC MING

6,306
6
46
62

answered Dec 06 '12 at 19:01

Carsten

31
2

If you want back the video again, you will have get it from server again using this approach, or you will have to ask the user to refresh the page. Both does not that sounding usability. – Shiham Apr 29 '13 at 12:05

Nick Beranek · Answer 2 · 2012-03-20T14:38:56.720

1

First, you'll have to listen for the click event on your xbutton element (which I recommend adding an ID to):

function listen(event, elem, func) {
  if (elem.addEventListener) {
    elem.addEventListener(event, func, false);
  } else if (elem.attachEvent) {
    elem.attachEvent(event, func);
  }
}

listen('load', window, function() {
  var xbutton = document.getElementById('xbutton');
  var player = document.getElementById('FLVPlayer');
  listen('click', xbutton, function(e) {
    player.Stop();
    e.preventDefault();
  });
});

You can use the JavaScript method Stop() to stop your Flash video.

edited Mar 20 '12 at 14:38

answered Mar 19 '12 at 20:05

Nick Beranek

2,721
1
19
14

Hi Nick, Thanks for answering, I have put in the code that dreamweaver generates when I chose the add a video option. The video has a stop button but I need the video to stop playing once the pop div is closed when clicking "x" because you can still hear the audio once the div is hidden. – Travis Mar 19 '12 at 20:32
It helps to know that the video is Flash. Let me do some research. – Nick Beranek Mar 20 '12 at 14:32

How to stop video in ie8 when hiding a div?

2 Answers2