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

说在前面

效果预览

B站效果

组件效果

体验地址

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

组件实现

精灵图生成

什么是精灵图

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>

• css

.cover-long-img-box {
    overflow: hidden;
    .cover-long-img {
        position: relative;
    }
}

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

封面动态切换

• 监听鼠标移动事件

<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>

• 修改精灵图定位

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";
}

展示视频时长

如上图，组件右下角增加了视频长度的显示，当然不想显示或者想自己编写样式展示的同学可以通过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;">6302</span>
        </span>
    </template>
</j-video-cover>

组件库引用

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

源码地址

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

组件文档

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

Gitee源码

Gitee源码：gitee.com/zheng_yongt…

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

往期精彩

node封装一个图片拼接插件

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

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

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

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

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

vue封装一个弹幕组件

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

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

vue简单实现词云图组件

说在后面