vue页面引入多个视频（video.js）

vue页面引入多个视频（video.js）

1. 安装：npm install video.js

2. 在main.js中引入

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

3. 在某个页面中使用

<template>
  <div>
    <div v-for="(item,index) in videoList" :key="index"  class="test_two_box">
      <video :id="'myVideo' + item.id" class="video-js">
        <source :src="item.src" type="video/mp4" />
      </video>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      videoList: [
        {
          id: 0,
          src: 'http://192.168.234.116:8110/Video/小白菜.mp4',
          cover: 'http://192.168.234.116:8110//Picture/position/banner.jpg'
        },
        {
          id: 1,
          src: 'http://192.168.234.116:8110/Video/小白菜.mp4',
          cover: 'http://192.168.234.116:8110//Picture/position/banner.jpg'
        }
      ]
    }
  },
  mounted() {
    this.videoList.map((item, index) => {
      let myPlayer = this.$video('myVideo' + item.id, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        poster: item.cover,
        //自动播放属性,muted:静音播放
        // autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "300px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "150px"
      });
    })
  }
}
</script>