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

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

前言


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


线上地址体验


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


网址:


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


源代码:


https://github.com/maomincoding/videoplayer


插件一览


微信截图_20220506134356.png


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


NPM地址


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


微信截图_20220506134406.png


安装


键入命令,即可安装。


npm install vue-vam-video


源码地址


欢迎star!


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


配置参数


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


事件


事件名称 如何触发
play 媒体收到开始播放的请求
pause 暂停
canplay 播放可以开始
ended 媒体播放过一次就停止了
waiting 暂停播放以下载更多数据
canplaythrough 播放可以继续,不应中断。读取状态为3
error 下载过程中发生网络错误
volumechange volume或muted属性的值已更改
emptied 网络连接中断
ratechange 媒体播放速率更改
empty 发生错误,阻止媒体下载
seeking 播放已移动到新位置
timeupdate 当前时间非常规或意外更改
stalled 浏览器试图下载,但尚未收到数据
abort 下载中断


案例


<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>



相关文章
|
17天前
|
存储 JSON JavaScript
WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
本文介绍了如何使用MxPluginContext动态控制MxCAD项目的UI界面。通过该上下文对象,开发者可以灵活设置UI配置,如控制操作栏显隐、编辑按钮、添加侧边栏等。具体方法包括调用`getUiConfig()`获取并修改`mxUiConfig.json`中的属性,实现界面的定制化。此外,还提供了控制命令行聚焦的功能,解决输入框焦点锁定问题。详细代码示例和效果对比图展示了具体实现步骤,帮助开发者更好地适配项目需求。
|
1月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
99 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
3月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
3月前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
95 1
|
3月前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
3月前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
78 16
|
4月前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
53 6
|
4月前
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。
|
4月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
4月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
75 5

热门文章

最新文章