jQuery鼠标上移自动播放预览视频插件

4522021-03-18 00:01:35

本文目录

1. 自动播放插件截图
2. 自动播放插件源码
3. 附注

做视频功能的站点肯定需要像大型素材站一样，鼠标上移后预览视频自动播放，节约客户时间、提升用户体验。而这一切，这个jQuery鼠标上移自动播放预览视频插件可以给你。

说是插件，其实非常简单。通过jQuery，再加上数行代码即可实现自动播放预览视频的功能。

自动播放插件截图

效果与各大型下载站一样，鼠标上移后视频自动播放，鼠标离开后暂停，GIF截图不方便，以图代字，请大家自行脑补。

自动播放插件源码

本插件完全依赖jQuery库，核心源码分享如下，供参考（如果没做过，相信我一定得折腾大半天，还未必好使）

<script>
$(function(){
    $('.video').hover(function(){
        $(this).find("video").get(0).play();
    }, function(){
         $(this).find("video").get(0).pause();
    });

    $('.v-collect').click(function(){
        var hclass =$(this).hasClass('chosed');
        if(hclass){
            $(this).removeClass('chosed');
        }else{
            $(this).addClass('chosed');
        }
    });
    $('.video').on('click',function(){
        var  thisvideo=  $(this).find("video")[0];
        if (thisvideo.paused){
           thisvideo.play();
        }else{
           thisvideo.pause();
        }
    });
});
</script>