0.5.0 • Published 4 years ago

vue-rtmp-player v0.5.0

Weekly downloads
20
License
-
Repository
-
Last release
4 years ago

vue-rtmp-player组件使用说明

安装
npm install vue-rtmp-player -save
npm install video.js@6.6.0 --save
npm install videojs-flash@2.1.0 --save

使用

在引入页面中输入以下代码

import 'vue-rtmp-player/packages/src/css/custom-theme.css'
import vueRtmpPlayer from 'vue-rtmp-player/packages/index.js'
Vue.use(vueRtmpPlayer);

引入中文语音

在引入页面中输入以下代码

import videojs from 'video.js'
import 'video.js/dist/lang/zh-CN'

还要在vue.config.js中增加以下配置

configureWebpack: {
    plugins: [
        new webpack.ProvidePlugin({
            'videojs': 'video.js'
        })
    ]
}
Attributes
参数说明类型默认值示例
playsinline移动端是否全屏Booleanfalse
height播放器高度String/Number360
fluid播放器是否按比例缩放以适应其容器,为true时,height不起作用Booleanfalse
aspectRatio播放器宽高比,设置时,height不起作用String16:9
language设置播放器语音tringzh-CN
autoplay是否自动播放Booleantrue
muted是否静音Booleanfalse
controls是否显示控制栏Booleantrue
src地址Stringrtmp://58.200.131.2:1935/livetv/hunantv
notSupportedMessage无法播放媒体源时显示的默认信息String此视频暂无法播放,请稍后再试
poster播放器封面String
方法
方法名说明参数
play播放
pause暂停
setHeight设置播放器高德例如:300
setVolume设置音量0到1的值
setSrc设置播放地址
reset重置播放器
dispose销毁播放器回调函数callback
Events
事件名称说明回调参数
loadeddata播放player 播放器实例
play播放player 播放器实例
pause暂停player 播放器实例
waiting等待player 播放器实例
playing播放中player 播放器实例
error播放出错player 播放器实例
timeupdate当前时间time
ready播放器就绪player 播放器实例
statechanged播放器状态改变状态