您现在的位置是:首页 > Javascript
当前栏目
基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 今日正式发布
2023-03-14 09:35:06 时间
前言
今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!
线上地址体验
基于vue3.0和vue-vam-video,我开发了一款在线视频播放器。
网址:
https://www.maomin.club/site/videoplayer/
源代码:
https://github.com/maomincoding/videoplayer
插件一览
- 界面简约
- 可配置
- 流畅播放
- 支持Vue2和Vue3
- 支持m3u8格式
- 支持多种事件
NPM地址
https://www.npmjs.com/package/vue-vam-video
安装
键入命令,即可安装。
- npm install vue-vam-video
源码地址
欢迎star!
https://github.com/maomincoding/vue-vam-video
配置参数
- properties: 视频属性
- videoStyle: 视频样式
- controlsConfig: 视频控制设置
事件
案例
- <template>
- <div id="app">
- <vam-video
- :properties="videoOption.properties"
- :videoStyle="videoOption.videoStyle"
- :controlsConfig="videoOption.controlsConfig"
- @play="playVideo"
- @canplay="canplayVideo"
- @pause="pauseVideo"
- ></vam-video>
- </div>
- </template>
- <script>
- import VamVideo from "vue-vam-video";
- export default {
- name: "App",
- components: {
- VamVideo
- },
- data: () => ({
- videoOption: {
- properties: {
- poster: require("./assets/logo.png"),
- src:
- // "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/2A1343EFA/v3/6CC21C811065945606293295744/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4",
- "https://tv.youkutv.cc/2019/11/12/mjkHyHycfh0LyS4r/playlist.m3u8",
- preload: "auto",
- // loop: "loop",
- // autoplay:"autoplay",
- // muted:true
- },
- videoStyle: {
- // width: "1200px",
- // height: "600px",
- },
- controlsConfig: {
- fullScreenTit:"全屏",
- EscfullScreenTit:"退出全屏",
- speedTit:"倍速",
- yinliangTit:"音量",
- jingyinTit:"静音",
- playTit:"播放",
- pauseTit:"暂停",
- fullScreen:true,
- speed:true,
- listen:true
- }
- },
- }),
- methods:{
- playVideo(){
- console.log("play");
- },
- pauseVideo(){
- console.log("pause");
- },
- canplayVideo(){
- console.log("canplay");
- }
- }
- };
- </script>
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?