안녕하세요 여러분이 div 위로 마우스를 가져 가면 미리보기 이벤트에 참여하고 있습니다. 그러나 사용자가 마우스를 떠날 때 HTML 포스터 요소를 재설정하고 싶습니다.
업데이트 된 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-panel-wrapper 클래스 위로 마우스를 가져 가면 video 요소를 호출합니다.
var figure = $(".story-panel-wrapper").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
};
function hideVideo(e) {
$('video', this).get(0).pause();
};
마우스가 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);
});
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다