如何使用vue进行视频缩略图

我现在有好几个视频，我想显示其中某个视频的某个片段截图，点击进入一个新路由，路由包含了点击进入的视频

img


我现在的图片都是到网上找的图，想替换成视频的片段截图

我是了一下，之前提的想法似乎是可行的，你试试这个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video width="200px" height="100px" id="vdo1" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
<video width="200px" height="100px" id="vdo2" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
<video width="200px" height="100px" id="vdo3" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

<script>
    window.onload = (event)=>{
        vdo1 = document.getElementById("vdo1");
        vdo1.currentTime=10;//10 秒处

        vdo2 = document.getElementById("vdo2");
        vdo2.currentTime=30;//30 秒处

        vdo3 = document.getElementById("vdo3");
        vdo3.currentTime=50;//10 秒处
    }

</script>
</body>
</html>

效果如下：

img

这个可能就得自己截图了

是一个视频的不同时间点的图片吗？如果是这样的话
给你思路你可以试一试。做一个3*3的div 每个div 里边是一个video 标签,设置其输入源是这个视频，把播放时间currentTime设置成不同的时间点（例如）呢。