mmyplayer
v1.2.4
Published
Mei Ma Yong Player Component！
Readme
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.可传入设置的参数
| 属性 | 默认值 | 类型 | 解释 | | ------------------- | ------------------------------------------------------------ | ------- | --------------------------------------------------- | | isControls | true | Boolean | 是否开启控制面板 注: 如果是手机端使用建议关闭它 | | type | ['1080P 高码率', '1080P 高清', '720P 高清'] | 数组 | 视频清晰度 | | src | [''] | 数组 | 视频的url | | isBlob | false | Boolean | 是否加密链接 默认false 弃用不推荐没效果建议后端加密 | | isAutoplay | false | Boolean | 是否自动播放 | | isLoop | false | Boolean | 是否循环播放 | | posterUrl | '' | String | 视频封面 | | isControlsStyle | false | Boolean | 播放器控制板是否展开 默认false折叠 | | isOpenBarrage | true | Boolean | 是否开启弹幕 滚动显示 | | isBarrageInputSends | true | Boolean | 是否开启弹幕输入框 | | barrageGroupData | [ { bg_font_color: '#ffffff', // 字体颜色 bg_barrage_content: '黑手....', // 弹幕内容 bg_barrage_time_stamp: 3, // 弹幕所在时间戳 },] | Array | 弹幕组数据 |
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
修复相关BUGV 1.0.2
完善READMEV 1.0.1
修复已知BUG，优化代码V 1.0.0
无...常见问题说明
- 如在使用本插件过程中如发现有 issues 可以发邮件至 [email protected] Thanks♪(･ω･)ﾉ