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

前几天在捣鼓完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）就可以了，

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

预览：

vue3-video-play 一个更好的适合vue3的视频插件相关推荐

Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶（简易版）】
Vue3.x 项目实战(一) 内容参考链接 Vue2.x全家桶 Vue2.x 全家桶参考链接 Vue2.x项目(一) Vue2.x 实现一个任务清单 Vue2.x项目(二) Vue2.x 实现Git ...
我看Next.js：一个更现代的海王
Next.js是一个用于生产环境的React 应用框架(官方介绍:The React Framework for Production),使用它可以快速上手开发 React 应用( enables y ...
python创建一个json_如何为Python选择一个更快的JSON库
使用JSON越多, 你就越有可能遇到JSON编码或解码瓶颈.Python的内置库也不错, 但是还有多个更快的JSON库可用: 如何选择使用哪一个呢? 事实是,没有一个正确的答案,没有一个最快的JSON ...
跑步听歌用哪种耳机更合适、适合跑步专业的耳机推荐
运动训练是一件非常单调的事情,尤其是你从事的运动节奏感比较强,在这种强节奏的运动下,往往人是很难达到一致的,这时就是音乐的最大好处的凸显地方,音乐能够很快让自身集中注意力,达到运动与音乐合一的作用,运 ...
《Vue3+TS》开发一个自己的起始页（二）chrome插件化
前言各位小伙伴们大家好,求关注,求收藏,求点赞: 另外为自己拉一波票:https://bbs.csdn.net/topics/603955887?spm=1001.2014.3001.6953,诚实 ...
跑步听歌用哪种耳机更合适，适合跑步听歌的耳机推荐
众所周知,运动和音乐可以称得上是一体,在运动的过程中音乐是必不可缺的,带着运动耳机边跑步边听音乐,将原本需要两个小时才能完成的事直接一小时就能完成,体验双倍快乐,不过挑选运动耳机可是有讲究的,没有个一 ...
Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
独立站打造一个更好的品牌形象
当你决定做DTC独立站的时候,因为一切都是从0开始,用户的信任也需要一点点建立.这就涉及到一个老生常谈的问题:如何为你的DTC独立站打造一个更好的品牌形象? 无论你的产品是大众款还是小众商品,品牌所体 ...
leetcode--下一个更大元素II--python
文章目录题目题目详情示例解题思路思路代码运行结果最佳方案题目题目详情给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素.数字 x 的下一 ...

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

第一步就是先npm安装

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

vue3-video-play 一个更好的适合vue3的视频插件相关推荐

最新文章

热门文章