I have been using the JavaScript script VideoJS: http://videojs.com/ to build some video players that can be shown to the user in a popup. I have built the popup as follows:
<script type=text/javascript>
VideoJS.setupAllWhenReady();
jQuery(document).ready(function ()
{
// videos have video js applied to them
//$(video).VideoJS()
$(.show-video).click(function ()
{
$(.video-background).show();
$(.video-container).fadeIn(fast);
});
$(.close-video).click(function ()
{
$('.video-background').fadeOut();
$('.video-container').fadeOut();
});
});
</script>
<a class=show-video>Show Video</a>
<div class=video-background>
<div class=video-container>
<div class=video-js-box vim-css>
<video id=video1 class=video-js poster=wallpaper.png controls=controls width=1024 height=768>
<source src=video.mp4 type='video/mp4; codecs=avc1.42E01E, mp4a.40.2' />
<object id=flash_fallback_1 class=vjs-flash-fallback width=1024 height=768 type=application/x-shockwave-flash
data=http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf>
<param name=movie value=http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf />
<param name=allowfullscreen value=true />
<param name=flashvars value='config={playlist:[poster.png, {url: video.mp4,autoPlay:false,autoBuffering:true}]}' />
</object>
</video>
</div>
<a class=close-video>Close Video</a>
</div>
</div>
I have two problems:
1) If the video is playing and the user closes the video popup, the video will still be playing in the background... how do I stop this?
2) I've noticed on sites like: http://www.apple.com/imac/features.html that the videos popup in the same way by using a hashtag and id to show content but unlike in my example the video isn't in the page... any ideas on how they do this? As they arn't loading an external webpage. Would love to see some examples of how to do this with jQuery as I will be having multiple videos so would be great to just pull them in based on the hashtag on the link!
Thanks