Question

当你将鼠标悬停在div上时，嘿大家都在处理预览活动。但是当用户mouseleave我想要重置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的 到目前为止，当你将鼠标悬停在类.story-panel-wrapper

上时，JQuery会调用视频元素

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

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

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

Answer 1

如果您希望电影停止并且当鼠标移动到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/

当mouseleave div时，视频海报重置

1 个答案: