直播WEB播放器文档

WARNING

调试pc端仅支持Safari，或使用手机端

# JS引入H5播放器MPlayer

<script src="https://s1.hdslb.com/bfs/static/player/live/libs/jquery-1.11.3.min.js"></script>
<script src="https://activity.hdslb.com/blackboard/static/edfd7948d5ca04de779233922773e479/player-1.6.1.min.js"></script>

<script>
const options = {
    roomId: 23058,
    sendCallback: function (res, txt) { // 弹幕发送回调
        console.log(res, txt);
    }
};

const player = new MPlayer(document.getElementById('player_wrap'), options);

// 订阅
player.on('subscribe', function() {})

// websocket广播消息
player.on('receiveMsg', function(type, data) { })

// 在线人数
player.on('onlineCount', function(type, count) { })

// 显示隐藏相关组件
player.changeUIStatus({
    logo: 0,
    recommend: 0,
    tipsText: '主播已关播'
})
</script>

# MPlayer参数详情

参数 类型 备注
roomId number 房间号 （必传）
type string 目前只有 'room' 与 其他类型。type === 'room'时controlbar与inputbar强制为0 （必传）
controlbar number type非room时可以选择是否隐藏播放器外的底部控制栏
inputbar number type非room时可以选择是否隐藏输入栏。
cover string 表示闲置状态是否有封面图。有则显示关注按钮+封面图；反之为默认闲置图
sendCallback function 发送弹幕结果回调函数，返回请求后的response以及发送的信息txt
roomInitData object room_init接口预渲染数据，没值的情况播放器会自行请求数据
mutePlay number 是否默认静音播放，可选，默认为 0
uiConfig object 初始化ui组件配置，传参见下表

# uiConfig参数

参数 类型 备注
cover number 是否展示封面图 默认为1
coverBlur number 封面图模糊度 不传则默认为2
logo number 是否展示左上角直播Logo 默认为1
controlbar number type为room时可以选择是否展示播放器内底部的控制栏 默认为1
pauseIcon number 是否展示右下角暂停logo 默认为1
danmaku number 是否展示弹幕 默认为1
entrance number 是否展示进入直播间按钮 默认为1
recommend {recommend: number = 1, tipsText: string='直播已关播'} recommend为0时则关播状态居中显示tipsText文案，默认为1

# MPlayer API

// 订阅
player.on('subscribe', function() { // ... })

// websocket广播消息
player.on('receiveMsg', function(type, data) { // ... })

// 在线人数
player.on('onlineCount', function(type, count) { // ... })

// 显示隐藏播放器组件
player.changeUIStatus({
    logo: 0,
    recommend: 0,
    tipsText: '主播已关播'
})

// 销毁播放器
player.destroy()

# 项目内用到的请求接口

  • api.live.bilibili.com/api/player - 获取用户信息
  • api.live.bilibili.com/msg/send - 发弹幕
  • api.live.bilibili.com/room/v1/Room/playUrl - 获取视频地址
  • api.live.bilibili.com/room/v1/RoomStatic/get_room_static_info - 获取房间信息
  • live-trace.bilibili.com/event/playuv - uv埋点

← iframe嵌入h5播放器（废弃） →