前几天在捣鼓完vue-video-player这个插件后，在博客里发现了一个位大佬的vue3-video-play视频插件非常好用。

插件github地址 vue-video-player，星星我已给上。

文档很详细，所以安装配置都非常快

第一步就是先npm安装

npm i vue3-video-play -S

第二步，引入，可以选择全局引入或者局部引入

这里就演示局部引入

import "vue3-video-play/dist/style.css";
import  vue3VideoPlay from "vue3-video-play";
import { reactive } from "vue";

完整代码示例

<template>
<div>
    <vue3VideoPlay v-bind="options" :poster="poster />
</div>
</template>

<script>

import "vue3-video-play/dist/style.css";
import  vue3VideoPlay from "vue3-video-play";
import { reactive, toRefs } from "vue";


export default {
  components: {
    vue3VideoPlay,
  },
  props:['video_url','poster'],
  setup(props){
  let data = reactive({
    options:{
      width: "800px", //播放器高度
      height: "450px", //播放器高度
      color: "#409eff", //主题色
      title: "", //视频名称
      src: props.video_url, //视频源
      muted: false, //静音
      webFullScreen: false,
      speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
      autoPlay: false, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      ligthOff: true, //关灯模式
      volume: 0.3, //默认音量大小
      control: true, //是否显示控制
      controlBtns: [
        "audioTrack",
        "quality",
        "speedRate",
        "volume",
        "setting",
        "pip",
        "pageFullScreen",
        "fullScreen",
      ], //显示所有按钮,
    },
    poster:props.poster
});

    return {
      ...toRefs(data)
    }
  }
};

</script>

这里封装成组件，只要传入视频源地址（video_url）以及视频封面（poster）就可以了，

视频测试地址 复制一个测试地址去感受下这个插件吧，功能相对来说还是很齐全的。

预览：