Vue3VideoPlay+vue3+ts封装一个视频播放组件

vue3+ts封装一个视频播放组件

基于Vue3VideoPlay 做了常用的配置，复制即用！
官方文档https://codelife.cc/vue3-video-play/

安装

npm安装：

npm i vue3-video-play --save

yarn安装：

yarn add vue3-video-play --save

安装完成后自定义一个组件

在components中新建一个VideoPlay.vue页面，里面代码如下：

<template>
  <a-modal
    v-model:visible="visible"
    width="90%"
    wrapClassName="full-modal"
    :title="options.title"
    ok-text="确认"
    cancel-text="取消"
    @ok="close"
    @cancel="close"
  >
    <videoPlay v-bind="options" :playsinline="true" />
  </a-modal>
</template>

<script lang="ts" setup>
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import { onMounted, defineExpose, ref, reactive } from "vue";
import { SetUp } from "@element-plus/icons-vue";

const visible = ref(false);
const loading = ref(true);
const vedioSrc = ref(null);
const vedioTitle = ref("");

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

const close = (): void => {
  visible.value = false;
};

const openVideo = (src: string = "", title: string = ""): void => {
  visible.value = true;
  options.title = title;
  options.src = src;
};

defineExpose({
  openVideo,
});
</script>

<style scope>
.container {
  width: 100%;
  height: 100%;
}
.video {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 992px) {
  .containervide {
    padding-top: 70px;
  }
}
</style>

在页面中使用

<template>
  <div class="dxmcontent">
    <VideoPlay ref="videoPlay"></VideoPlay>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { ref, reactive } from "@vue/reactivity";
import VideoPlay from "@/components/VideoPlay.vue";

const videoPlay: any = ref(); //videoPlay必须和一致

onMounted((): void => {
  videoPlay.value.openVideo("这里放置你的视频url地址");
});
</script>
<style scoped></style>

大功告成

注意：视频如果设置打开页面自动播放，那么声音会自动变为静音，把自动播放设置为false即可。

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！