Question

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

Answer 1

There are 2 ways you can do this.

1. Remove the whole video when the popup is closed. Use $(video).remove()

2. Use the videojs javascript method

   VideoJS.DOMReady(function(){
     var myPlayer = VideoJS.setup("example_video_1");
     myPlayer.pause();  
   });