www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] stopping a video that is playing in a hidden div

  1. #1
    Join Date
    Mar 2010
    Posts
    4

    resolved [RESOLVED] stopping a video that is playing in a hidden div

    Hi folks!
    I seem to have coded myself into a corner, and I’m hoping you can help me out.

    On a product demo page, I have set up popup video modals based on hidden divs. Everything works great….except…

    In IE (all versions as far as I can tell)
    When the video window is closed (div hidden), the video keeps playing. This does not happen in any other browser.

    From the research I managed, and this does not appear to be a unique problem.

    http://www.webdeveloper.com/forum/sh...t=video+hidden

    http://www.webdeveloper.com/forum/sh...t=video+hidden

    http://www.webdeveloper.com/forum/sh...t=video+hidden

    However, there doesn’t seem to be a good solution.
    Some people are editing the flash video action script (which we do ~not~ have access to, unfortunately)

    There seems to be some javascript that only ½ works.

    HTML Code:
     <script type="text/javascript">
    function resetVideo(divId) {
                                    if (typeof(divId)=="string") { divId=document.getElementById(divId); }
                                    if (divId.innerHTML) {
                                    org=divId.innerHTML;
                                    divId.innerHTML='';
                                    divId.innerHTML=org;
                                    }
                                    return false;
    }
    </script>
    I have implemented it on a test video. It stops the video playing when the window is closed, but when the user clicks the video a second time, it won’t play at all.

    The only alternative I can see, is to make a "new window" pop up for each video (which is not what the designers wanted)

    I’m stumped. at this point I'm coding in circles. Any suggestions you have will be most welcome. If I’m going in completely the wrong direction, let me know. Can you think of any other option to make this work?

    on to the code!
    HTML Code:
    <div class="productContainer">
    	<div class="productName">
    		<p class="title">TESTING</p>
    		<p class="description">TESTING Blah blah</p>
    	</div>
    	<div class="productDetail">
    		<div class="videoThumbnail">
    			<p><a href="#" onclick='return revealModal("demoTESTING"); playVideo("demoTESTING","demoTESTING")'><img src="uploadedImages/Our_Products/videoThumbnail.jpg" alt="Advertising Demo Video" name="TESTING" border="0" id="TESTING" title="Advertising" onMouseOver="MM_swapImage('TESTING','','/uploadedImages/Our_Products/videoThumbnail2.jpg','Advert','','http://cmsstagingdev/uploadedImages/Our_Products/advert_hover.jpg',0)" onMouseOut="MM_swapImgRestore()"/></a></p>
    	  </div>
    		<div class="clear"></div>
    	</div>
    </div>
    <!-- pop up videos -->
    <div id="demoTESTING" style="DISPLAY: none">
    <div class="demoVideoModalBackground"></div>
    <div class="demoVideoModalContainer764x549">
    <div class="demoVideoModalContent">
    <object id="demoTESTING" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="764" height="550">
    	<param name="movie" value="/ProductDemos/Property/demo.swf" />
    	<param name="quality" value="high" />
    	<param name="base" value="/ProductDemos/Property/" />
    	<param name="movie" value="/ProductDemos/Property/demo.swf" />
    	<param name="wmode" value="transparent" />
    <embed id="demoTESTING" style="margin-top: -15px" base="/ProductDemos/Property/" src="/ProductDemos/Property/demo.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="764" height="550" wmode="transparent" ></embed>
    </object>
    </div><A onClick='return resetVideo("demoTESTING")'><img id="button_id" class="demoVideoModalCloseButton" src="/uploadedImages/Our_Products/fancy_closebox.png" border="0"/></A></div>
    </div>
    Code:
    function revealModal(parentDivID) {
    
        parentDiv = document.getElementById(parentDivID);
        window.onscroll = function() { parentDiv.style.top = document.body.scrollTop; };
        parentDiv.style.display = "block";
        parentDiv.style.top = document.body.scrollTop;
        var contentDiv = document.getElementById(parentDivID).childNodes[1];
        if (contentDiv !== null) {
            contentDiv.style.left = (getWindowWidth() - contentDiv.clientWidth) / 2 + "px";
            contentDiv.style.top = scrollTop() + (getWindowHeight() - contentDiv.clientHeight) / 2 + "px";
        }
    }
    
    function hideModal(divID) {
        document.getElementById(divID).style.display = "none";
    }

  2. #2
    Join Date
    Mar 2010
    Posts
    4
    I take it there isn't a solution to this? most unfortunate.

  3. #3
    Join Date
    Dec 2008
    Posts
    488
    I would imagine your best bet would be to use SWFobject to create your videos on the fly, and then basically remove them from the DOM when you want to make them stop. That way they remain in memory.

    Another option, and I'm not sure why you're not using this, is to use HighSlide. It's as simple as installing the script and then using a link with a special onclick event to launch the video. See a YouTube example at waitspace.com/Entertainment/Reception-Area-Waiting-Room-Video-And-Trivia-Entertainment-s/172.htm (sorry if that violates posting policies).

    Also, if you've already coded everything and don't want to switch, but you're using YouTube videos, you can enable allowScriptAccess="always" and use yourVideoObject.stopVideo()

  4. #4
    Join Date
    Mar 2010
    Posts
    4

    Thumbs up

    Thank you Jamesbcox1980!



    That did the trick! Somehow I missed HighSlide. But now that I know, it's made this project MUCH easier.

    I have everything working as it should be!

    thank you thank you thank you!


    *note: this was not for youtube videos, but old in house swf demo vids that all needed to be moved to the same page. all diff sizes and quality

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles