mmyplayer v1.2.4

mmyplayer Component

Mei Ma Yong Player Component！

mmyplayer 是一个基于HTML5原生 video 魔改后的组件。

Install 安装

更新日志

最新稳定版本：1.2.2

# 最新稳定版
$ npm install mmyplayer | npm i mmyplayer
or
$ cnpm install mmyplayer | cnpm i mmyplayer
or
$ yarn add mmyplayer

快速上手

1.先在终端安装 npm i mmyplayer

2.组件内部使用

<template>
<div style="width: 1024px; height: 576px;">
   <mmy-player :src="src" :type="type">
</div>
</template>

<script>
  import mmyPlayer from 'mmyplayer'
  export default {
    name: 'App',
    components: {
      mmyPlayer
    },
    data(){
      return{
        // 设置你视频的清晰度
        type: ['1080P 高码率', '1080P 高清', '720P 高清'],
        // 设置你视频清晰度相应的 视频地址
        src: ['http://***.mp4', 'https://***.mp4', 'http://***.mp4']
      }
    }
  }
</script>
<style>
</style>

3.在Vue使用时在main.js中全局导入 并且Vue.use(mmyplayer) 或者 or Vue.component("mmyPlayer",mmyPlayer)

import mmyPlayer from 'mmyplayer'
Vue.use(mmyplayer)

或者 or

Vue.component("mmyPlayer",mmyPlayer)

4.导入之后即可 在任意组件中使用它 如下:

<template>
<div style="width: 1024px; height: 576px;">
   <mmy-player :src="src" :type="type">
</div>
</template>

<script>
  export default {
    name: 'App',
    components: {
    },
    data(){
      return{
        // 设置你视频的清晰度
        type: ['1080P 高码率', '1080P 高清', '720P 高清'],
        // 设置你视频清晰度相应的 视频地址
        src: ['http://***.mp4', 'https://***.mp4', 'http://***.mp4']
      }
    }
  }
</script>
<style>
</style>

5.注：在使用播放器之前 建议在外层套一个div 控制视频的大小Size

mmyplayer属性介绍

1.可传入设置的参数

2.传入方式

<template>
<div style="width: 1024px; height: 576px;">
   <mmy-player :src="src" :type="type" :is-controls="true" is-blob="true" is-autoplay="false">
</div>
</template>

或者

<template>
<div style="width: 1024px; height: 576px;">
   <mmy-player src="['htpp://***.mp4']" type="['4K']">
</div>
</template>

3.监听事件

<template>
<div style="width: 1024px; height: 576px;">
   <mmy-player @suspended-play="你的methods方法">
</div>
</template>

版本内容更新

V 1.2.2

修复上一个版本遗落，视频播放更新Bug修复....

V 1.2.1

修复上一个版本，视频播放更新Bug修复....

V 1.2.0

注：千万不要使用该版本
视频播放更新Bug修复....

V 1.1.9

美化调优音量UI...

V 1.1.8

修复弹幕功能小BUG...

V 1.1.7

修复音量按钮无法正常显示...

V 1.1.6 更新MD文档

更新说明文档...

V 1.1.5 改动更新，可能与之前版本有不兼容情况

 修复BUG 弹幕问题，修复完毕...

V 1.1.4 改动更新，可能与之前版本有不兼容情况

 修复BUG 资源无法加载，等诸多小问题，修复完毕...

V 1.1.3 改动更新，可能与之前版本有不兼容情况

 修复BUG 资源无法加载，修复测试...

V 1.1.2 改动更新，可能与之前版本有不兼容情况

 修复BUG 资源无法加载，修复测试...

V 1.1.1 改动更新，可能与之前版本有不兼容情况

 修复BUG 资源无法加载，修复测试...

V 1.1.0 改动更新，可能与之前版本有不兼容情况

新增 播放器控制板 鼠标悬浮显示，移除隐藏，弹幕功能
新增 可监听自定义事件

1 自定义事件： 当用户开始移动/跳跃到音频/视频中的新位置时触发 playJumpEvent(可获取参数一 当前视频进度条时间秒，可获取参数二视频总共时间秒) 方法

2 自定义事件： 暂停播放触发 suspendedPlay(可获取参数一 当前用户观看视频时长 秒)

3 自定义事件： 停止播放触发 stopPlay(可获取参数一 当前用户观看视频时长 秒)

4 可以支撑外部ref调用内部发送弹幕事件： exportSendBarrageMessages(弹幕颜色 弹幕内容 弹幕所在视频时间戳（如果为空则自动获取视频时间戳）是否验证空 返回弹幕对象)

4.1 演示案例：
let mmy =  this.$refs.mmyPlayer.exportSendBarrageMessages('#FFFFFF','弹幕(づ￣3￣)づ╭❤～~~~',3,true)
返回对象内容有如下：
mmy.bg_font_color // 字体颜色（如果传入字体16进制颜色错误会默认使用#FFFFFF）
mmy.bg_barrage_content // 弹幕内容
mmy.bg_barrage_time_stamp // 弹幕视频所在的时间戳

V 1.0.9

新增 isControlsStyle 属性 播放器控制板是否展开 默认false折叠

V 1.0.8

修复已知问题.

V 1.0.7

测试...

V 1.0.6

完善 README & 修复已知问题

V 1.0.5

测试...

V 1.0.4

完善 README & 修复音量显示问题

V 1.0.3

修复相关BUG

V 1.0.2

完善README

V 1.0.1

修复已知BUG，优化代码

V 1.0.0

无...

常见问题说明

• 如在使用本插件过程中如发现有 issues 可以发邮件至 xiangbinxinqing@qq.com Thanks♪(･ω･)ﾉ