前言

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

线上地址体验

基于vue3.0vue-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

在这里插入图片描述

安装

键入命令,即可安装。

npm install vue-vam-video

源码地址

欢迎star!

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

配置参数

  • properties: 视频属性

  • videoStyle: 视频样式

  • controlsConfig: 视频控制设置

事件

事件名称如何触发
play媒体收到开始播放的请求
pause暂停
canplay播放可以开始
ended媒体播放过一次就停止了
waiting暂停播放以下载更多数据
canplaythrough播放可以继续,不应中断。读取状态为3
error下载过程中发生网络错误
volumechangevolume或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>
  • 欢迎关注我的公众号前端历劫之路

  • 回复关键词电子书,即可获取12本前端热门电子书。

  • 回复关键词红宝书第4版,即可获取最新《JavaScript高级程序设计》(第四版)电子书。

  • 我创建了一个技术交流、文章分享群,群里有很多大厂的前端大佬,关注公众号后,点击下方菜单了解更多即可加我微信,期待你的加入。

  • 作者:Vam的金豆之路

  • 微信公众号:前端历劫之路

Logo

前往低代码交流专区

更多推荐