javascript - Using html5 <video> tag to let the video pause when clicking next in BXSLIDER -
isn't there simple code pauses html 5 video when click on next button? hard find on google, searched 2 hours , found nothing or didn't work.
i use bxslider client in page https://www.gester.nl/mbarara/about scroll down see videoslider. said above problem when click arrownext previous video keeps playing can hear.
i find annoying when simple can't have simple code.
can please me problem? thank taking time me problem.
this code:
<h1> choose between 8 video's </h1> <!-- video plugin --> <ul class="videoslider"> <li> <div id="content"> <video class="myvideo" controls > <source src="video1.mp4" type="video/mp4"> </video> </div> <div id="videocover"></div> <div class="overlay"> <pppp>video number 1</pppp> <pp>swipe or touch left/right arrow</pp> </div> </li> <li> <video class="myvideo1" controls> <source src="video2.mp4" type="video/mp4"> </video> <div id="videocover1"></div> <div class="overlay"> <pppp>video number 2</pppp> <pp>swipe or touch left/right arrow</pp> </div> </li> </ul>
and these controls bxslider:
/* direction controls (next / prev) */ .bx-wrapper .bx-prev { left: 10px; background: url(../images/controls.png) no-repeat 0 -32px; } .bx-wrapper .bx-prev:hover, .bx-wrapper .bx-prev:focus { background-position: 0 0; } .bx-wrapper .bx-next { right: 10px; background: url(../images/controls.png) no-repeat -43px -32px; } .bx-wrapper .bx-next:hover, .bx-wrapper .bx-next:focus { background-position: -43px 0; } .bx-wrapper .bx-controls-direction { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; }
this script pauses videos on click of slider arrow (i tested on site via console.)
$(document).ready(function(){ $(".bx-controls-direction a").on("click",function(){ // pause videos. $(".videoslider").find("video").each(function(){ $(this)[0].pause(); }); }); });
Comments
Post a Comment