el-table生成视频预览图
时间: 2023-10-04 15:03:11 浏览: 116
el-table是一个Vue.js的表格组件,用于展示数据。如果你想在el-table中展示视频预览图,可以通过以下步骤实现:
1. 在el-table中添加一个列,用于展示视频预览图。比如:
```
<el-table-column prop="video" label="视频预览图">
<template slot-scope="scope">
<img :src="scope.row.videoPreview" alt="">
</template>
</el-table-column>
```
2. 在获取视频列表数据时,为每个视频添加一个预览图链接。你可以使用FFmpeg等工具获取视频的缩略图,并将其保存在服务器上。然后在获取视频列表数据时,将每个视频的预览图链接添加到数据中。比如:
```
[
{id: 1, name: 'video1', video: 'http://example.com/video1.mp4', videoPreview: 'http://example.com/video1-preview.jpg'},
{id: 2, name: 'video2', video: 'http://example.com/video2.mp4', videoPreview: 'http://example.com/video2-preview.jpg'},
{id: 3, name: 'video3', video: 'http://example.com/video3.mp4', videoPreview: 'http://example.com/video3-preview.jpg'},
]
```
这样,当el-table渲染视频列表时,会自动显示每个视频的预览图。
阅读全文