el-table怎么嵌入单个或多个视频？

安装：npm i video.js

一、template部分：

<template>
  <div class="myVideo">
    <el-table :data="tableData">
      <el-table-column label="名称" prop="name">
      </el-table-column>
      <el-table-column label="年龄" prop="age">
      </el-table-column>
      <el-table-column label="视频">
        <template slot-scope="scope">
          <video v-for="(item,index) in scope.row.img" :key="index" id="videoPlayer" class="video-js vjs-default-skin" controls playsinline autoplay="autoplay" width="500px">
            <source :src="item.images" type="video/mp4" />
          </video>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

二、script部分：

import "video.js/dist/video-js.css";
export default {
  data() {
    return {
      dp: null,
      tableData:[
        {
          name:'阿泽',
          age:24,
          img:[
            {
              images:"https://liuxinze.oss-cn-beijing.aliyuncs.com/pics/1690362429437.mp4"
            },
            {
              images:"https://liuxinze.oss-cn-beijing.aliyuncs.com/pics/1690362429437.mp4"
            }
          ]
        },
        {
          name:"web",
          age:28,
          img:[
            {
              images:"https://liuxinze.oss-cn-beijing.aliyuncs.com/pics/1690362429437.mp4"
            }
          ]
        }

      ],
       //这里是配饰功能的地方
      options: {
        autoplay: false, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音
        preload: "auto", // 预加载
        controls: true, // 显示播放的控件
      },
    };
  },
}

三、css部分

<style  scoped>
.video-box {
  width: 100%;
  max-width: 500px;
  max-height: 500px;
}
::v-deep .video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

四、样式

 

这篇写的有点糙，着急下班，有不懂的可以私信我，看到就回，希望对你有帮助！