javascript - Video poster reset when mouseleave the div -

javascript - Video poster reset when mouseleave the div -

hey i'm working on preview event when hover on div. when user mouseleave want html poster element reset.

updated link

html

<div class="story-panel-wrapper" id=""> <div class="row"> <div class="col l7 m6 s12"> <div class="stories"> <span class="story-description">hello world</span> <div class="video"> <div class="videoslate"> <div class="video-container"> <video class="thevideo" width="978" poster="img/emily-poster.jpg" loop> <source src="videos/emily.mp4" type="video/mp4"> browser not back upwards video tag. </video> </div> </div> </div> </div> </div> <div class="col l5 m6 s12 "> <div class="story-panel-container"> <div class="story-panel-content"> <h3 class="custom-red-text-margin">emily: host of designated places</h3> <p> lorem ipsum dolor sit down amet, consectetur adipiscing elit. fusce non dictum metus. proin lacus leo, facilisis sed tincidunt placerat, aliquam sit down amet massa. lorem ipsum dolor sit down amet, consectetur adipiscing elit. fusce pretium, tortor suscipit volutpat, metus libero finibus velit, quis pulvinar dolor lorem quis nibh. </p> </div> </div> </div> </div> </div>

jquery jquery far calling video element when hover on class .story-panel-wrapper

var figure = $(".story-panel-wrapper").hover( hovervideo, hidevideo ); function hovervideo(e) { $('video', this).get(0).play(); }; function hidevideo(e) { $('video', this).get(0).pause(); };

if want film stop , poster display when mouse moves outside div, create change:

function hidevideo(e) { // $('video', this).get(0).pause(); $('video', this).get(0).load(); }

demo: http://jsbin.com/dokaju/2/

to fade out video , show poster:

function hidevideo(e) { $video = $('video', this).get(0); $video.pause(); $($video).fadeto(200, 0.1, function() { $video.load(); $($video).fadeto(50, 1.0); }); }

demo: http://jsbin.com/mifadisuqi/2/

javascript jquery html