vediojs 使用方法及使用中遇到的问题

1、使用步骤

使用npm命令，安装 npm install video.js

首先，在main.js中引入

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

 两种使用方法：

第一种，使用ref

          <!-- 视频使用vediojs vue-video-player是vediojs封装的vue的， -->
          <video ref="videoPlayer" class="video-js" poster="">
            <source src="./cam-01_1_9_2022_10_13_13_55_26_1665640526003203 copy.mp4" />
          </video>

下面是初始化的方法，不是很理解为什么要初始化，貌似是因为一般情况下视频会自动播放，用来解决不想让视频一上来就加载，而是在特定情况下执行时使用 ，（要在元素渲染后初始化）

  mounted() {
    // 播放参数
    let options = {
      controls: false, // 是否显示底部控制栏
      preload: 'auto', // 加载<video>标签后是否加载视频
      autoplay: 'muted', // 静音播放
      // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
      // width: "100%",
      height: '500',
      // loop: "loop",
      controlBar: {
        // 自定义按钮的位置
        children: [
          {
            name: 'playToggle'
          },
          {
            name: 'progressControl'
          },
          {
            name: 'currentTimeDisplay'
          },
          {
            name: 'timeDivider'
          },
          {
            name: 'durationDisplay'
          },

          {
            name: 'volumePanel', // 音量调整方式横线条变为竖线条
            inline: false
          },
          {
            name: 'pictureInPictureToggle' //画中画播放模式
          },
          {
            name: 'fullscreenToggle'
          }
        ]
      }
    }
    this.player = this.$video(this.$refs.videoPlayer, options, function onPlayerReady() {
      console.log('onPlayerReady', this)
    })
  },

 第二种，使用id

<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>

 初始化方法

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"
      });
    })
  }
}

不过我使用初始化时，如果是一个视频，就如上两种方法，都没有问题，但一循环数组，就出问题了，两种方法都拿不到元素，报错：The element or ID supplied is not valid. (videojs)

于是，最终我使用的是没有初始化的，直接使用vedio标签，如下：

其中：loop循环播放、autoplay自动播放、muted静音播放、controls控制条、poster显示缩略图

     <div class="contentListItem" v-for="(item, index) in eventsearchs" :key="index">
        <video
          :id="'myVideo' + index"
          data-setup="{}"
          loop="loop"
          autoplay
          muted
          controls
          poster=""
          style="width: 100%;"
        >
          <source :src="item.video" />
        </video>
    </div>

2、多个视频使用方法

(5条消息) vue页面引入多个视频（video.js）_weixin_43503080的博客-CSDN博客

 

3、遇到问题 The element or ID supplied is not valid. (videojs)

说的是用来绑定vediojs的元素，找不到，我使用单个vedio就没问题，已使用v-for来循环就不行了，很奇怪，不知道是不是我的问题，你们也可以试一下