vue3-video-play 一个更好的适合vue3的视频插件_vue3-video-player

作者：盐析白兔 | 2024-02-17 23:33:01

踩

vue3-video-player

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

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

第一步就是先npm安装

npm i vue3-video-play -S

   
   
1

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

这里就演示局部引入

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

   
   
1
2
3

完整代码示例


<template>
<div>
    <vue3VideoPlay v-bind="options" :poster="poster />
</div>
</template>
1
2
3
4
5
6

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)
}
1
2
3

}
};

</script>

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

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

预览：在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/102373