视频组件（mzsdk.player）

名称	参数	描述
init	[Object]	初始化视频组件
render	-	渲染播放器
dispose	-	销毁播放器

init方法参数说明

名称	类型	描述
domId	String	播放器绑定的domId，最好用div等块级元素。

视频组件的播放相关事件

名称	描述
onReady	播放器控件准备完毕
onPlay	开始播放
onPause	回放时使用，暂停播放事件
onEnd	回放时使用，结束播放事件
onWaiting	播放过程中由于网络或其他原因产生的等待，此时视频播放暂停，等网络恢复后会自动播放
onFirstPlay	第一次播放
onDurationChange	视频总时长发生改变
onFullScreenChange	全屏改变
onLoadedAllData	已加载完毕所有的媒体数据
onLoadedData	已加载完毕当前播放位置的媒体数据，准备播放
onLoadStart	开始请求数据
onLoadedMetaData	获取资源完成
onCanPlayThrough	视频源数据加载完成
onPlaying	视频播放中
onError	视频播放各种错误
onSeeking	视频跳转中
onSeeked	视频跳转结束
onRateChange	播放速率改变
onTimeUpdate	播放时长改变
onVolumeChange	音量改变
onStalled	网速异常
onEnterPictureInPicture	进入画中画
onLeavePictureInPicture	退出画中画
onControlBarChange	控制栏显示状态更改

视频组件的活动相关事件

名称	描述
onOver	主播离开事件
onLiveEnd	直播时使用，直播结束事件
onOnline	上线了一个用户
onOffline	下线了一个用户
onCMD	活动各种cmd事件，包括开始直播，禁言，被踢出，活动各种配置开关等，具体可参考demo

示例

    //创建链接
    mzsdk.connect();

    //初始化播放器
    mzsdk.player.init({
        domId: "mz-video-wrapper",
        // 播放事件
        onReady: function () {
            console.log("播放器控件准备完毕");
        },
        onPlay: function (e) {
            console.log("开始播放", e);
        },
        onPause: function (e) {
            console.log("暂停播放", e);
        },
        onEnd: function (e) {
            console.log("结束播放", e);
        },
        onWaiting: function (e) {
            console.log("播放过程中由于网络或其他原因产生的等待，此时视频播放暂停，等网络恢复后会自动播放", e);
        },
        onFirstPlay: function (e) {
            console.log("第一次播放", e);
        },
        onDurationChange: function (e) {
            console.log("视频总时长发生改变", e);
        },
        onControlBarChange: function (e) {
            console.log("控制栏显示状态更改：", e)
        },
        onFullScreenChange: function (e) {
            if (e.target.player.isFullscreen_ == true) {
                console.log("进入全屏");
            } else {
                console.log("退出全屏，如果需要这里设置自动播放");
                if (document.querySelector("video").paused) {
                    document.querySelector("video").play();
                }
            }
        },
        onLoadedAllData: function (e) {
            console.log("已加载完毕所有的媒体数据", e);
        },
        onLoadedData: function (e) {
            console.log("已加载完毕当前播放位置的媒体数据，准备播放", e);
        },
        onLoadStart: function (e) {
            console.log("开始请求数据", e);
        },
        onLoadedMetaData: function (e) {
            console.log("获取资源完成", e);
        },
        onCanPlayThrough: function (e) {
            console.log("视频源数据加载完成", e);
        },
        onPlaying: function (e) {
            console.log("视频播放中", e);
        },
        onError: function (e) {
            if (e.code == -499) {
                if (_this.state.ticketInfo.status == 0) {
                    console.log("视频加载错误原因为：未开播")
                } else if (_this.state.ticketInfo.status == 3) {
                    console.log("视频加载错误原因为：断流中")
                } else {
                    console.log("视频加载错误原因为：空资源")
                }
            } else {
                console.log("视频异常中断：", e.target.player.error_.message);
                _this.setState({
                    errorContent: '视频异常中断',
                    isShowErrorDisplay: true,
                })
            }
        },
        onSeeking: function (e) {
            console.log("视频跳转中", e);
        },
        onSeeked: function (e) {
            console.log("视频跳转结束", e);
        },
        onRateChange: function (e) {
            console.log("播放速率改变", e);
        },
        onTimeUpdate: function (e) {
            // console.log("播放时长改变", e);
        },
        onVolumeChange: function (e) {
            console.log("音量改变", e);
        },
        onStalled: function (e) {
            console.log("网速异常", e);
        },
        onEnterPictureInPicture: function (e) {
            console.log("进入画中画");
        },
        onLeavePictureInPicture: function (e) {
            console.log("离开画中画， 如果需要这里设置自动播放");
            if (document.querySelector("video").paused) {
                document.querySelector("video").play();
            }
        },

        // 活动事件
        onOver: function () {
            console.log("主播暂时离开");
            _this.setState({
                errorContent: '断流中',
                isShowErrorDisplay: true,
            })
        },
        onLiveEnd: function () {
            console.log("结束直播");
            setTimeout(() => {//1秒后刷新本页面
                location.reload();
            }, 1000);
        },
        onOnline: function (msg) {
            console.log("上线了一个用户:", msg.data);
        },
        onOffline: function (msg) {
            console.log("下线了一个用户:", msg.data);
        },
        onCMD: function (msg) {
            console.log("接收到其他消息：", msg);
            const res = msg;
            switch (res.data.type) {
                case "*channelStart":
                    console.log("*确认：频道有新的直播开始了,判断新开始的直播是否是本直播,可以做一些特殊处理";
                    // if (res.data.ticket_id == ticketId) {

                    // }
                    break;
                case "*publishStart":
                    console.log("*确认：开始直播");
                    localStorage.setItem("ticketId", ticketId)
                    setTimeout(() => {//15秒后刷新本页面
                        location.reload();
                    }, 15000);
                    break;
                case "*disablechat":
                    console.log("*确认：禁言", res.data.user_id)
                    if (res.data.user_id == _this.state.ticketInfo.chat_uid) {
                        Toast.info('您已被禁言', 1.5)
                        _this.setState({
                            isBannedMeTalk: true
                        })
                    }
                    break;
                case "*permitchat":
                    console.log("*确认：解禁", res.data.user_id)
                    if (res.data.user_id == _this.state.ticketInfo.chat_uid) {
                        Toast.info('您已解除禁言', 1.5)
                        _this.setState({
                            isBannedMeTalk: false
                        })
                    }
                    break;
                case "*webinarViewConfigUpdate": //活动配置更改
                    for (const aObject in res.data.webinar_content) {
                        if (res.data.webinar_content.hasOwnProperty(aObject)) {
                            const element = res.data.webinar_content[aObject];
                            switch (element.type) {
                                case "hide_chat_history": //历史记录隐藏的开关
                                    console.log("历史记录隐藏的开关:", element.is_open);
                                    break;
                                case "disable_chat": //全体禁言开关
                                    console.log("全体禁言开关:", element.is_open);
                                    let bannedAll = false;
                                    if (parseInt(element.is_open) == 1) {
                                        bannedAll = true;
                                    }
                                    _this.state.isBannedAll = bannedAll;
                                    break;
                                case "barrage": //弹幕开关
                                    console.log("弹幕开关:", element.is_open);
                                    break;
                                case "record_screen": //防录屏开关
                                    console.log("防录屏开关:", element.is_open);
                                    let isShowRecordScreen = false;
                                    if (parseInt(element.is_open) == 1) {
                                        isShowRecordScreen = true;
                                    }
                                    _this.state.isShowDisableRecordScreen = isShowRecordScreen;
                                    _this.fixDisableScreen();
                                    break;
                                case "vote": //投票开关
                                    console.log("投票开关:", element.is_open);
                                    mzsdk.mzee.emit('marketing-control-config-update', { 'type': 'vote', 'value': element.is_open })
                                    break;
                                case "sign": //签到开关
                                    console.log("签到开关:", element.is_open, '签到关闭是实时的，打开只能重新进入活动');
                                    mzsdk.mzee.emit('marketing-control-config-update', { 'type': 'sign', 'value': 0 })
                                    break;
                                case "documents": //文档开关
                                    console.log("文档开关:", element.is_open);
                                    break;
                                case "prize": //抽奖开关
                                    console.log("抽奖开关:", element.is_open);
                                    break;
                                case "full_screen": //暖场图开关
                                    console.log("暖场图开关:", element.is_open);
                                    break;
                                case "open_like": //点赞视图开关
                                    console.log("点赞视图开关:", element.is_open);
                                    break;
                                case "pay_gift": //礼物视图开关
                                    console.log("礼物视图开关:", element.is_open);
                                    mzsdk.mzee.emit('interaction-control-config-update', { 'type': 'gift', 'value': element.is_open })                                        break;
                                case "times_speed": //倍速视图开关
                                    console.log("倍速视图开关:", element.is_open);
                                    break;
                                default:
                                    console.log("未处理的活动配置开关：", res.data.type);
                                    break;
                            }
                        }
                    }
                break;
                case "*kickout": //收到一条踢出用户的消息
                    console.log("用户 ", res.data.user_id, " 被踢出");
                    if (res.data.user_id == _this.state.ticketInfo.chat_uid) {
                        _this.setState({
                            isShowGetKickoutAlert: true
                        })
                    }
                    break;
                default:
                    console.log("未处理的cmd命令： ", res.data.type);
                    break;
            }
        }
    });
	
    mzsdk.player.render();