vue3 引入import videojs from “video.js“

一、安装

 $ npm install video.js

二、main.js全局引入

// 引入video.js

import Videojs from 'video.js'（可单页面引入）
 
import 'video.js/dist/video-js.css'（可单页面引入）

Vue.prototype.$video = Videojs（main。js引入）
三、页面中的使用

<div class="video1" >
  <video
                ref="Playe1"
                id="my-video1"
                class="video-js vjs-big-play-centered  vjs-default-skin videotu"
                playsinline="true"
                x-webkit-airplay="allow" >
              </video>
  </div>

四. setup方法

onMounted(() => {
      nextTick(()=>{
        initVideo()
      })
}
  const initVideo = ()=> {
      // if (!props.pull) return
      videojs('my-video1', {
        // bigPlayButton: true, //是否显示播放按钮
        // autoplay:false, // 是否自动播放
        // controls:true,
        // sourceOrder: true,
        // controlBar: false,
        // poster: props.coverImage,
        // fluid: false, // 自适应宽高
        muted: false,
        poster:video1,
        preload: 'auto' ,// 预加载
        controls: true,//视频控件
        autoplay: false,//自动播放
        techOrder:['html5', ], // 兼容顺序 'flash',
        sources: 
          // {
          //   src: ming,//播放视频地址
          //   type: 'application/x-mpegURL',//播放m3u8需要设置的格式
          // }
          {
            src: 'https://qingluan-1301935573.file.myqcloud.com/video/demo_1.mp4',//播放视频地址
            type: 'video/mp4',//播放m3u8需要设置的格式
          }
          
        ,
        controlBar: {
          remainingTimeDisplay: {
            displayNegative: false
          }
        },
        playbackRates: [0.5, 1, 1.5, 2]//设置播放速度
      })
 }

五，css方法

.video1{
    position: relative;
    width: 6.14rem;
    height: 9.44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.1rem;
    .videotu{
      width: 5.5rem;
      height: 7.3rem;
    }
  }