el-table生成视频预览图

要在 el-table 中生成视频预览图，你可以使用第三方 JavaScript 库来实现，其中比较常用的是 Video.js。

以下是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="videoUrl" label="视频">
      <template slot-scope="scope">
        <video id="video-{{ scope.$index }}" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="200" height="150">
          <source :src="scope.row.videoUrl" type="video/mp4">
        </video>
      </template>
    </el-table-column>
    <el-table-column label="预览图">
      <template slot-scope="scope">
        <img :src="generateThumbnail(scope.row.videoUrl)" alt="">
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  data() {
    return {
      tableData: [
        {
          name: '视频1',
          videoUrl: 'http://example.com/video1.mp4'
        },
        {
          name: '视频2',
          videoUrl: 'http://example.com/video2.mp4'
        }
      ]
    }
  },
  methods: {
    generateThumbnail(videoUrl) {
      let video = document.createElement('video');
      video.src = videoUrl;
      video.currentTime = 1;
      video.width = 200;
      video.height = 150;
      video.addEventListener('loadeddata', function() {
        let canvas = document.createElement('canvas');
        canvas.width = video.width;
        canvas.height = video.height;
        canvas.getContext('2d').drawImage(video, 0, 0, video.width, video.height);
        let thumbnail = canvas.toDataURL();
        document.getElementById('video-' + i).setAttribute('poster', thumbnail);
      });
    }
  },
  mounted() {
    let videos = document.querySelectorAll('video');
    for (let i = 0; i < videos.length; i++) {
      videojs(videos[i]);
    }
  }
}
</script>

这个示例中，我们使用 Video.js 来播放视频，并使用 Canvas 在视频上截取一帧作为预览图。在 `generateThumbnail` 方法中，我们首先创建一个 `video` 元素，并设置其 `src` 属性为视频的 URL，然后设置 `currentTime` 为 1，这样可以在视频加载后快速跳转到第一秒。接着，我们创建一个 `canvas` 元素，设置其宽高与视频一致，然后使用 `drawImage` 方法将视频渲染到 `canvas` 上。最后，我们通过 `toDataURL` 方法将 `canvas` 转换为 Data URL，作为预览图的 `src` 属性。注意，我们需要根据 `video` 元素的 ID 来设置相应的预览图。

当然，这只是一个简单的示例，你可以根据自己的需求进行更复杂的操作。