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

本是古典何须时尚 2021-09-07 06:04 591阅读 0赞

## 前言 ##

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

## 线上地址体验 ##

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

网址：

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

源代码：

https://github.com/maomincoding/videoplayer

## 插件一览 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center]

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

## NPM地址 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center 1]

## 安装 ##

键入命令，即可安装。

npm install vue-vam-video

## 源码地址 ##

欢迎star！

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

## 配置参数 ##

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

## 事件 ##

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

## 案例 ##

<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的金豆之路**
>  *  微信公众号：**前端历劫之路**
> 
> ![Image 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/f9fba300d85f42ed96360f9fbbf30bd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/c1e925868f0c4a35902bca19895c94cf.png
[Image 1]: