How to autoplay html5 video element in overlays?

Question

I created a page that contains multiple media, each one inside a hidden div that is triggered to load in a jquery tools overlays when one clicks on a menu link. Few things I wish to achieve when one clicks on the link:

1. video autoplay when it's loaded in overlays
2. video pause or stop when overlays is closed
3. video reload and autoplay if one click again on the same link

I achieved #2, but failed on #1 and #3. With the code below, video player and media are loaded in overlays but does not autoplay, and player fails to load when one attempts to close the link and reopen again.

What did I do wrong in the following code?

<div id="menu">
   <a href="#"><img src="images/image1.jpg" rel="#overlay1"/></a>
   <a href="#"><img src="images/image2.jpg" rel="#overlay2"/></a>
   <a href="#"><img src="images/image3.jpg" rel="#overlay3"/></a>
</div>
<div class="overlay" id="overlay1">
   <video class="player" id="bbb" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
     <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
      </object>
   </video>
</div>
<div class="overlay" id="overlay2">(same as above, different media)</div>
<div class="overlay" id="overlay2">(same as above, different media)</div>

<script>
$(function() {
    $("a [rel]").overlay({
        effect: 'apple',        
        expose: '#101010',
        closeOnClick: 'false',
        closeOnEsc: 'false',
        onLoad: function(content) {
            this.getOverlay().find(".player").flowplayer(0).load();
            $('#bbb').get(0).play()
        },
        onClose: function(content) {
            $(".overlay").children().filter("video").each(function(){
                this.pause();
            });
        }
    });         
    $(".player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {clip: {autoPlay: true}});
}); 
</script>

Answer 1

the simple easy way to do this would be simply empty the overlay contents on mouseout and then populate them on mouseover before showing the overlay. this way the browser would do all of the work for you. There would be a tiny performance hit because of the dom manipulation but hardly worth mentioning..

something like:

<div class="overlay" id="overlay1" data-vsrc-mp4="...mp4" data-vsrc-webm="...webm" data-vsrc-ogv="...ogv" data-vsrc-poster="...jpg">

so you now have all to the necessary stuff on the element's data attrs then you can just do something like:

var videoTemplate = 
'<video class="player" id="bbb" controls="controls" poster="##poster##" width="640" height="360"><source src="##mp4##" type="video/mp4" /><source src="##webm##" /><source src="##ogv##" type="video/ogg" /><object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowFullScreen" value="true" /><param name="wmode" value="transparent" /><param name="flashVars" value="config={\'playlist\':[\'##poster##\',{\'url\':\'##mp4##\',\'autoPlay\':true}]}" /><img alt="Big Buck Bunny" src="##poster##" width="640" height="360" title="No video playback capabilities, please download the video below" /></object></video>';

$("div.overlay").hover(function(){
   var newhtml = videoTemplate.replace(/##poster##/g,$(this).data("vsrc-poster")//....and so on for all data elements
   $(this).empty().append(newhtml);
},function(){
   $(this).empty();
});

I havent tested this but the idea is sound...

Hope that helps.