Thursday 30 January 2014

Add loop multiple HTML5 videos using javascript

 In Head tag:
      <script type="text/javascript">
            $(document).ready(function () {
                $("#divVideo").mouseover(function () {
                    $("#divmarquee").css("bottom", "47px");
                });
                $("#divVideo").mouseout(function () {
                    $("#divmarquee").css("bottom", "21px");
                });
            });   
        </script>

   In Body Tag:
   <div id="divVideo" style="width: 30%;">
        <video id="video" width="100%" controls>
        <source id="sovideo" src="ModelVideo/1/video1.mp4" />       
        </video>
        <div id="divmarquee" style="width: 100%; 
bottom: 47px; position: relative;">
            <marquee behavior="scroll" direction="left" 
onmouseover="this.stop();" onmouseout="this.start();"
                scrolldelay="250" scrollamount="5">
<span style="color:White;text-align: center;">Go on... hover over me!
</span></marquee>

        </div>
    </div>