HTML5 multi video screen -

i have multiple video tags in single screen absolute position , want longer video multiple , when longer video ends want execute code.

<div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">     <video preload="auto" autoplay>             <source src="1.mp4" type="video/mp4">             <source src="1.ogv" type="video/ogg">     </video> </div> <div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">     <video preload="auto" autoplay>             <source src="2.mp4" type="video/mp4">             <source src="2.ogv" type="video/ogg">     </video> </div> <div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">     <video preload="auto" autoplay>             <source src="3.mp4" type="video/mp4">             <source src="3.ogv" type="video/ogg">     </video> </div> 

how can it?

thanks, bhumi

so, if understand well, have multiple videos on 1 page, , when longest 1 ends playing, want execute code?

then you'd this:

$(document).ready(function() {     var longestvid = "";    $("video").each(function() {        if (longestvid == "" || longestvid.duration < this.duration)           longestvid = this;    });    //to loop others:   $("video").not($(longestvid)).attr("loop","loop");     $(longestvid).on("ended",function() {        //this code execute when longest video on page ends playing.    });  });