基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 今日正式发布

开发 前端
今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!

前言

今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!

线上地址体验

基于vue3.0和vue-vam-video,我开发了一款在线视频播放器。

网址:

https://www.maomin.club/site/videoplayer/

源代码:

https://github.com/maomincoding/videoplayer

插件一览


  1. 界面简约
  2. 可配置
  3. 流畅播放
  4. 支持Vue2和Vue3
  5. 支持m3u8格式
  6. 支持多种事件

NPM地址


https://www.npmjs.com/package/vue-vam-video

安装

键入命令,即可安装。

  1. npm install vue-vam-video 

源码地址

欢迎star!

https://github.com/maomincoding/vue-vam-video

配置参数

  • properties: 视频属性
  • videoStyle: 视频样式
  • controlsConfig: 视频控制设置

事件

案例

  1. <template> 
  2.   <div id="app"
  3.     <vam-video 
  4.       :properties="videoOption.properties" 
  5.       :videoStyle="videoOption.videoStyle" 
  6.       :controlsConfig="videoOption.controlsConfig" 
  7.       @play="playVideo" 
  8.       @canplay="canplayVideo" 
  9.       @pause="pauseVideo" 
  10.     ></vam-video> 
  11.   </div> 
  12. </template> 
  13.  
  14. <script> 
  15. import VamVideo from "vue-vam-video"
  16. export default { 
  17.   name"App"
  18.   components: { 
  19.     VamVideo 
  20.   }, 
  21.   data: () => ({ 
  22.     videoOption: { 
  23.       properties: { 
  24.         poster: require("./assets/logo.png"), 
  25.         src: 
  26.           // "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/2A1343EFA/v3/6CC21C811065945606293295744/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4"
  27.           "https://tv.youkutv.cc/2019/11/12/mjkHyHycfh0LyS4r/playlist.m3u8"
  28.         preload: "auto"
  29.         // loop: "loop"
  30.         // autoplay:"autoplay"
  31.         // muted:true 
  32.       }, 
  33.       videoStyle: { 
  34.         // width: "1200px"
  35.         // height: "600px"
  36.       }, 
  37.       controlsConfig: { 
  38.         fullScreenTit:"全屏"
  39.         EscfullScreenTit:"退出全屏"
  40.         speedTit:"倍速"
  41.         yinliangTit:"音量"
  42.         jingyinTit:"静音"
  43.         playTit:"播放"
  44.         pauseTit:"暂停"
  45.         fullScreen:true
  46.         speed:true
  47.         listen:true 
  48.       } 
  49.     }, 
  50.   }), 
  51.   methods:{ 
  52.     playVideo(){ 
  53.       console.log("play"); 
  54.     }, 
  55.     pauseVideo(){ 
  56.       console.log("pause"); 
  57.     }, 
  58.     canplayVideo(){ 
  59.       console.log("canplay"); 
  60.     } 
  61.   } 
  62. }; 
  63. </script> 

 

责任编辑:姜华 来源: 前端历劫之路
相关推荐

2020-12-29 05:26:27

视频播放器Vuevideo

2017-07-04 17:55:37

Vue.js插件开发

2015-05-21 15:25:42

VLC播放器

2023-04-27 08:23:38

JavaScriptVue.jsMVVC

2022-01-19 22:18:56

Vue.jsVue SPA开发

2022-08-16 17:37:06

视频播放器鸿蒙

2018-04-04 10:32:13

前端JavascriptVue.js

2016-11-04 19:58:39

vue.js

2012-05-03 09:51:09

HTML5

2017-08-30 17:10:43

前端JavascriptVue.js

2020-09-16 06:12:30

Vue.js 3.0Suspense组件前端

2022-04-04 16:53:56

Vue.js设计框架

2018-07-10 15:35:33

Vue前端架构

2021-01-22 11:47:27

Vue.js响应式代码

2016-11-01 19:10:33

vue.js前端前端框架

2017-07-14 10:10:08

Vue.jsMixin

2020-09-07 14:40:20

Vue.js构建工具前端

2017-07-20 11:18:22

Vue.jsMVVMMVC

2024-05-13 08:04:26

Vue.jsWeb应用程序

2017-07-11 18:00:21

vue.js数据组件
点赞
收藏

51CTO技术栈公众号