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

[mmmillerDesign]

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.

 <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!

<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>

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";
}

[mmmillerDesign]

I take it there isn't a solution to this? most unfortunate.

[jamesbcox1980]

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()

[mmmillerDesign]

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