vue实现一个鼠标滑动预览视频封面组件（精灵图版本）

说在前面

🎈上上个星期写了一篇文章，记录了怎样通过纯前端实现一个鼠标滑动预览视频封面的vue组件，不少人跟我反馈说那样实现的效果不太好，用户体验感较差，也给了我一个新的实现方案，所以现在我在上上周实现的组件基础上增加了使用精灵图的展现方式。

效果预览

B站效果

组件效果

体验地址

http://jyeontu.xyz/jvuewheel/#/JVideoCover

组件实现

这里只对本次新增的精灵图模式进行介绍，其他地方的具体实现可以查看这一篇文章–>《vue实现一个鼠标滑动预览视频封面组件》

精灵图生成

什么是精灵图

css sprite也叫精灵图or雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有的零星图片集合到一张大图中。这样一来，当访问该页面时，就由原来的多次请求变为一次请求。客户端每显示一张图片都会向服务器发送一次请求，图片越多请求越多，延迟的可能性就越大，同时对服务器会造成压力。所以页面中如果有多个icon（小图标）时，推荐使用精灵图。

简单来说，就是将几张较小的图片放在一张大图上。

优点

• 1、减少网页的http请求，从而提升网页的性能。
• 2、减少图片的字节。

原理

• 1、需要一个设置好宽高的容器。
• 2、通过background-img引入背景图。
• 3、通过background-position将背景图移动到需要的位置。

精灵图制作

这里我使用了自己制作的一个node小工具来生成，对改小工具有兴趣的可以看看我的这篇文章–>《node制作一个视频帧长图生成器》，通过这个工具，我们可以生成下面这么一张图片。

组件模式切换

现在的组件是有两种展现模式，这里我通过一个参数来控制器展现的模式。

如上图，这里增加了一个设置封面精灵图的参数，如果该参数有值，则该组件的展现方式为使用精灵图进行展示，否则则为旧模式，即客户端截图展示。

精灵图展示

• html

<div
    v-if="coverLongImg"
    :id="uid + '-cover-long-img-box'"
    class="cover-long-img-box"
    @mousemove="imgHover"
    @mouseleave="hoverOut"
    @click="coverClick"
>
    <img
        :id="uid + '-cover-long-img'"
        alt=""
        :src="coverLongImg"
        class="cover-long-img"
    />
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• css

.cover-long-img-box {
    overflow: hidden;
    .cover-long-img {
        position: relative;
    }
}
1
2
3
4
5
6

如上代码，我们使用一个div作为精灵图的容器，后面我们可以通过修改精灵图的定位来实现图片的动态切换效果。

封面动态切换

• 监听鼠标移动事件

scroll-video:scroll-video微信小程序视频上下滑动播放方案视频滑动播放的两种方案：Swiper + Video，使用Swiper插入视频进行视频播放，小程序v2.4.0起Video组件支持同层渲染，大体思路是保证一个视频组件，记录Swiper的电流，并对swiper-item的下标做比对，来比较当前索引和current是否一致，一致则展示Video组件。滑动效果比较好，还有优化的，怎么预加载，怎么大体思路是固定一个视频组件，将封面图平铺在视频组件上，根据手势滑动的范围，确定上滑或替换

zip 0星 超过10%的资源 114KB

下载

监听鼠标的mousemove事件。

<div
    v-if="coverLongImg"
    :id="uid + '-cover-long-img-box'"
    class="cover-long-img-box"
    @mousemove="imgHover"
    @mouseleave="hoverOut"
    @click="coverClick"
>
    <img
        alt=""
        :src="coverLongImg"
        class="cover-long-img"
        :id="uid + '-cover-long-img'"
    />
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 修改精灵图定位

通过当前鼠标的坐标，可以计算精灵图应该进行的位移长度，具体代码如下：

coverLongImgChang(e, coverLongImg) {
    const coverLongImgBox = document.getElementById(
        this.uid + "-cover-long-img-box"
    );
    if (coverLongImg.src != this.coverLongImg) {
        coverLongImg.setAttribute("src", this.coverLongImg);
    }
    const w = coverLongImgBox.offsetWidth / this.stepNums;
    const x = e.offsetX - Math.abs(coverLongImg.offsetLeft);
    const index = Math.min(
        Math.max(Math.ceil(x / w), 1),
        this.stepNums
    );
    this.progressValue = index;
    coverLongImg.style.right =
        (index - 1) * (coverLongImg.offsetWidth / this.stepNums) + "px";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

展示视频时长

如上图，组件右下角增加了视频长度的显示，当然不想显示或者想自己编写样式展示的同学可以通过showDuration这个参数来进行控制。

插槽展示视频信息

如上图，组件下方增加了一个自定义插槽区域，可以添加自己想要展示的内容，如下代码，我们可以增加播放量和弹幕数的展示。

<j-video-cover
    class="video"
    :videoUrl="videoUrl"
    stepNums="15"
    :coverLongImg="coverLongImg"
    :height="'206px'"
    :width="'384px'"
>
    <template v-slot:video-info-slot>
        <span style="margin-left:1em;font-size:medium;">
            <i class="el-icon-video-play">i>
            <span style="margin-left:0.1em;">171.4万span>
        span>
        <span style="margin-left:1em;font-size:medium;">
            <i class="el-icon-chat-line-square">i>
            <span style="margin-left:0.1em;">6302span>
        span>
    template>
j-video-cover>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

组件库引用

这里我将这个组件打包进了自己的一个组件库，并将其发布到了npm上，有需要的同学也可以直接引入该组件进行使用。
引入教程可以看这里：http://jyeontu.xyz/jvuewheel/#/installView
引入后即可直接使用。

源码地址

组件库已开源，想要查看完整源码的可以到 gitee 查看，自己也整理了相关的文档对其进行了简单介绍，具体如下：

组件文档

驱动精灵2004预览版

application/x-dosexec 4星 超过75%的资源 5.90MB

下载

jvuewheel: http://jyeontu.xyz/jvuewheel/#/JVideoCover

Gitee源码

Gitee源码：gitee.com/zheng_yongt…

觉得有帮助的同学可以帮忙给我点个star，感激不尽~~~
有什么想法或者改良可以给我提个pr，十分欢迎~~~
有什么问题都可以在评论告诉我~~~

往期精彩

node封装一个图片拼接插件

基于inquirer封装一个控制台文件选择器

node封装一个控制台进度条插件

vue实现一个鼠标滑动预览视频封面组件

密码太多不知道怎么记录？不如自己写个密码箱小程序

微信小程序实现一个手势图案锁组件

vue封装一个弹幕组件

为了学（mo）习（yu），我竟开发了这样一个插件

程序员的浪漫之——情侣日常小程序

vue简单实现词云图组件

说在后面

🎉这里是JYeontu，喜欢算法，GDCPC打过卡；热爱羽毛球，大运会打过酱油。毕业一年，两年前端开发经验，目前担任H5前端开发，算法业余爱好者,有空会刷刷算法题，平时喜欢打打羽毛球🏸 ，也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。