npm install vue-rtmp-player -save
npm install [email protected] --save
npm install [email protected] --save
在引入页面中输入以下代码
import 'vue-rtmp-player/packages/src/css/custom-theme.css'
import vueRtmpPlayer from 'vue-rtmp-player/packages/index.js'
Vue.use(vueRtmpPlayer);
模板中这样引用
<vueRtmpPlayer></vueRtmpPlayer>
在引入页面中输入以下代码
import videojs from 'video.js'
import 'video.js/dist/lang/zh-CN'
还要在vue.config.js中增加以下配置
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
'videojs': 'video.js'
})
]
}
参数 | 说明 | 类型 | 默认值 | 示例 |
---|---|---|---|---|
playsinline | 移动端是否全屏 | Boolean | false | |
height | 播放器高度 | String/Number | 360 | |
fluid | 播放器是否按比例缩放以适应其容器,为true时,height不起作用 | Boolean | false | |
aspectRatio | 播放器宽高比,设置时,height不起作用 | String | 16:9 | |
language | 设置播放器语音 | tring | zh-CN | |
autoplay | 是否自动播放 | Boolean | true | |
muted | 是否静音 | Boolean | false | |
controls | 是否显示控制栏 | Boolean | true | |
src | 地址 | String | rtmp://58.200.131.2:1935/livetv/hunantv | |
notSupportedMessage | 无法播放媒体源时显示的默认信息 | String | 此视频暂无法播放,请稍后再试 | |
poster | 播放器封面 | String |
方法名 | 说明 | 参数 |
---|---|---|
play | 播放 | |
pause | 暂停 | |
setHeight | 设置播放器高德 | 例如:300 |
setVolume | 设置音量 | 0到1的值 |
setSrc | 设置播放地址 | |
reset | 重置播放器 | |
dispose | 销毁播放器 | 回调函数callback |
事件名称 | 说明 | 回调参数 |
---|---|---|
loadeddata | 播放 | player 播放器实例 |
play | 播放 | player 播放器实例 |
pause | 暂停 | player 播放器实例 |
waiting | 等待 | player 播放器实例 |
playing | 播放中 | player 播放器实例 |
error | 播放出错 | player 播放器实例 |
timeupdate | 当前时间 | time |
ready | 播放器就绪 | player 播放器实例 |
statechanged | 播放器状态改变 | 状态 |