2015-04-05 2 views
0

Привет всем Я работаю над событием предварительного просмотра, когда вы наведите указатель мыши на div. Однако, когда пользовательское мыло, я хочу, чтобы элемент плаката HTML был сброшен.Video poster reset when mouseleave the div

Обновлено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"> 
       Your browser does not support the 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: The Host of Designated Places</h3> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non dictum metus. Proin lacus leo, facilisis sed tincidunt placerat, aliquam sit amet massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium, tortor a suscipit volutpat, metus libero finibus velit, quis pulvinar dolor lorem quis nibh. 
        </p> 


       </div> 
</div> 
        </div> 
      </div> 
    </div> 

JQuery JQuery до сих пор называет элемент видео при наведении курсора класса .story-панели-оболочки

var figure = $(".story-panel-wrapper").hover(hoverVideo, hideVideo); 

function hoverVideo(e) { 
$('video', this).get(0).play(); 
}; 

function hideVideo(e) { 
$('video', this).get(0).pause(); 
}; 
+0

Что вы имеете в виду "Я хочу, чтобы плакат элемент HTML, чтобы сбросить"? Вернитесь к плакату на видео паузе, вы имеете в виду? – Drakes

+0

Ваш 'LINK' не ссылается нигде. –

+0

Пожалуйста, см. [«Если вопросы включают« теги »в их названиях?») (Http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), где консенсус «нет, они не должны»! –

ответ

0

Если вы хотите фильм, чтобы остановить и плакат для отображения при перемещении мыши вне вашего DIV, просто сделать это изменение:

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

Демо: http://jsbin.com/dokaju/2/

Чтобы приглушить видео и показать плакат :

function hideVideo(e) { 
    $video = $('video', this).get(0); 
    $video.pause(); 

    $($video).fadeTo(200, 0.1, function() { 
     $video.load(); 
     $($video).fadeTo(50, 1.0); 
    }); 
} 

Демо: http://jsbin.com/mifadisuqi/2/

+0

Привет, вы могли попробовать эту демонстрацию и убедиться, что она делает то, что вы хотите? – Drakes

+0

Спасибо! Это сработало. –

+0

Есть ли способ сделать это fadeIn или fadeTo плакат? –