vue3视频播放器组件vue-video-player

一、vue3

1、安装

npm i vue3-video-play --save

2、全局注册

import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)

3、使用

<vue3VideoPlay
              width="1210px"
              height="334px"
              :src="park.videoPath"
              :poster="park.imagePath"
              :autoPlay="true"
          />

效果:

二、vue2

1、安装

npm install vue-video-player@5.0.1 -save
npm install videojs-contrib-hls@5.15.0 -save 

2、main.js中引入

import VideoPlayer from 'vue-video-player'
//引入样式
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
//使用组件
Vue.use(VideoPlayer)

3、使用

<template>
  <div class="home">
    <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
  },
  data() {
    return {
      playerOptions: {
        //视频url设置,直播流为例
        sources: [{
          src: 'http://localhost:8081/uploadPath/20240520/d6492864-ce6f-4331-b3a2-d6e31e358fb4.mp4',//视频文件地址
          type: "video/mp4"
        }],
        // 其他设置项
        notSupportedMessage: "此视频暂无法播放，请稍后再试",//提示信息
        autoplay: true,//是否自动播放
        controls: true,// 是否显示控制栏
        // poster: 'http://path/to/poster.jpg',//视频封面
      }
    }
  },
}
</script>

效果：

vue-video-player如何调整video组件的最小高度

.vjs-custom-skin .video-js{
              height: 200px !important;
            }

无视频时样式

修改样式

.video-js .vjs-modal-dialog::before {
                /* 无视频是修改样式 */
                content: "";
              }
              .video-js .vjs-modal-dialog .vjs-modal-dialog-content {
                /* 无视频是修改样式 */
                visibility: hidden;
              }

效果如下：