vue中实现视频播放

一：方法一

main.js中引入并且定义全局变量

java 复制代码

//Video.js 视频配件
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
import * as echarts from 'echarts'  //引入Echarts，
Vue.prototype.$echarts = echarts  //定义为全局变量

java 复制代码

//通过相对路径来引入
 <el-row :gutter="30">
      <el-col :span="20" :offset="1">
        <el-card class="box-card">
          <div class="video-player vjs-custom-skin">
            <video id="myVideo" class="video-js" :playsinline="false">
              <source src="../../../assets/images/1.mp4" type="video/mp4" >
            </video>
          </div>
        </el-card>
      </el-col>
    </el-row>
    //绝对路径引入需要把文件放在public下
 <el-row :gutter="30">
      <el-col :span="20" :offset="1">
        <el-card class="box-card">
          <div class="video-player vjs-custom-skin">
            <video id="myVideo" class="video-js" :playsinline="false">
              <source src="/1.mp4" type="video/mp4" >
            </video>
          </div>
        </el-card>
      </el-col>
    </el-row>
export default {
  name: "TestTwo",
  data() {
    return {
    };
  },
  mounted() {
    this.initVideo();
  },
    methods: {
    initVideo() {
      //初始化视频方法
      let myPlayer = this.$video(myVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        volume: 0.1,
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        //自动播放属性,muted:静音播放
        autoplay: "muted",
        // autoplay: "true",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "500px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "310px",
        language: "zh-CN",
        aspectRatio: "9:6", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      });
    },
  },

方法二：通过自带的库来实现

java 复制代码

    <el-table v-loading="loading" :data="videoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="视频" align="center" prop="url">
       <template slot-scope="scope">
         <video  controls id="video-class":src="scope.row.url"></video>
       </template>
       //例如：https:localhost:8080/加你本地配置的路径

export default {
  name: "TestTwo",
  data() {
    return {
    videoList: []
    };
  },
  methods: {
    /** 查询视频播放列表 */
    getList() {
      this.loading = true;
      listVideo(this.queryParams).then(response => {
        this.videoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },