flow-263-player
v0.2.27
Published
一个基于Alipayer和owt 开发并封装成vue组件的集成播放器.可播放,m3u8,mp4....视频.支持直播流与点播的基础功能外,视频的加密播放、清晰度切换、直播时移、连麦等业务场景
Downloads
12
Readme
vue-263-player
1.安装使用! 下载安装 npm 包
npm i vue-263-player --save
or
yarn add vue-263-player全局注册 main.js
import Vue263player from 'vue-263-player';
Vue.use(Vue263player);
//可选全局配置
//Vue.use(VueAliplayerV2,{
// cssLink: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css',
// scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'
//});局部注册 App.vue
import Vue263player from 'vue-263-player';
components: {
Vue263player;
}
//或者
components: {
Vue263player: Vue263player.Player;
}import 'vue-263-player/lib/vue-263-player.css';2.组件中使用
组件模板使用,下面的视频连接仅供演示测试.
<template>
<div id="app">
<template>
<Vue263player
:source="source"
ref="VueAliplayerV2"
:options="options"
@micStatusChange="micStatusChange"
@audioStatusChange="audioStatusChange"
@baberrageStatusChange="baberrageStatusChange"
@error="playerError"
style="position: relative;height:300px"
>
<div class="Vue263playerSlot">用来显示其他内容，在播放器内</div>
</Vue263player>
</template>
<div class="player-btns">
<template v-if="show">
<span @click="changePlay('liveAV')">切换播放音视频</span>
<span @click="changePlay('liveA')">切换播放纯音频</span>
<span @click="changePlay('playBack')">切换播放回放</span>
<p></p>
<span @click="play()">播放</span>
<span @click="pause()">暂停</span>
<span @click="replay()">重播</span>
<span @click="lianmai()">连麦</span>
<span @click="addBarrage()">添加弹幕</span>
<span @click="disconnectMic()">下麦</span>
<span @click="getCurrentTime()">播放时刻</span>
<span @click="getStatus()">获取播放器状态</span>
<span @click="mute">静音</span>
<span @click="unmute">取消静音</span>
</template>
<span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: {
isLive: !false, //切换为直播流的时候必填
autoplay: true, //根据浏览器和移动端
playsinline: true,
preload: true,
useH5Prism: true,
mediaType: 'video',
extraInfo: {
//移动端添加。
'x5-video-player-type': 'h5' /*启用H5播放器,是wechat安卓版特性*/,
},
},
roomOptions: {
themeColor: '#2081eb', // 主题色 默认: '#2081eb'
bgUrl: '', //播放器背景url
},
source: JSON.stringify({
LD: 'http://xiaogan.live.cjyun.org/video/s10139-xg.flv',
SD: 'http://xiaogan.live.cjyun.org/video/s10139-xg.flv',
}),
audioVideosource: JSON.stringify({
LD: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
SD: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
}),
audioSource: 'http://xiaogan.live.cjyun.org/video/s10139-xg.flv',
playBackSource: JSON.stringify({
LD: 'http://player.alicdn.com/video/1.mp4',
SD: 'http://player.alicdn.com/video/1.mp4',
}),
// source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
//http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
// artc://testplayrts.gensee.net/live/test
// http://119.61.7.138:10002/live/test0_customud.m3u8
show: true,
curPlayerStatus: 'liveAV',
};
},
methods: {
// liveAV liveA playBack
changePlay(status) {
if (status == 'liveAV') {
this.source = this.audioVideosource;
this.options.isLive = true;
this.options.mediaType = 'video';
} else if (status == 'liveA') {
this.source = this.audioSource;
this.options.isLive = true;
this.options.mediaType = 'audio';
} else {
this.source = this.playBackSource;
this.options.isLive = false;
this.options.mediaType = 'video';
}
},
play() {
this.$refs.VueAliplayerV2.play();
},
pause() {
this.$refs.VueAliplayerV2.pause();
},
lianmai() {
this.$refs.VueAliplayerV2.connectMic(
{ roomId: '4052971391', userName: 'dyy3', run: 'dev' },
{ uid, cid, sid }
);
},
replay() {
this.$refs.VueAliplayerV2.replay();
},
getCurrentTime() {
this.$refs.VueAliplayerV2.getCurrentTime();
},
getStatus() {
const status = this.$refs.VueAliplayerV2.getStatus();
console.log(`getStatus:`, status);
},
mute() {
this.$refs.VueAliplayerV2.mute();
},
unmute() {
this.$refs.VueAliplayerV2.unMute();
},
// 连麦状态发生改变触发
//连麦状态： 0->未连麦 1->正在连麦中 2->已连麦 3->被下麦 4->主动下麦成功 5->连麦失败
micStatusChange(micStatus) {
console.log(micStatus);
},
// 连麦麦克风状态发生改变：例如被主持人静音/解除静音
// audioStatus "inactive" or "active" 静音/解除静音
audioStatusChange(audioStatus) {
console.log(audioStatus);
},
// 主动下麦
disconnectMic() {
this.$refs.VueAliplayerV2.disconnectMic();
},
/***
* 直播模式添加弹幕
*/
addBarrage() {
let BarrageContent = {
msg: '11111[1F6001]14667[133][1F6003]111[1F6003]我是为',
style: {
fontSize: 15,
color: 'red',
},
};
this.$refs.VueAliplayerV2.addBarrage(BarrageContent);
},
/***
*
* 弹幕开关状态发生改变
*/
baberrageStatusChange(value) {
console.log(value);
},
/***
* 播放错误
*/
playerError(err) {
console.log(err);
},
},
};
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
.remove-text {
text-align: center;
padding: 20px;
font-size: 24px;
}
.Vue263playerSlot {
position: absolute;
z-index: 1111111;
color: red;
}
.show-multiple {
display: flex;
.multiple-player {
width: calc(100% / 4);
margin: 20px;
}
}
.player-btns {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
span {
margin: 0 auto;
display: inline-block;
padding: 5px 10px;
width: 150px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 5px;
cursor: pointer;
}
}
.source-box {
padding: 5px 10px;
margin-bottom: 10px;
.source-label {
margin-right: 20px;
font-size: 16px;
display: block;
}
#source {
margin-top: 10px;
}
.source-input {
margin-top: 10px;
padding: 5px 10px;
width: 80%;
border: 1px solid #ccc;
}
}
</style>3.1 配置项 options 属性
可以参考 属性和接口说明
| 名称 | 类型 | 说明 | | :----------------------- | :-----------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | source | String | 视频播放地址 url：单独 url。默认状态，表示使用 vid+playauth。source 播放方式优先级最高。source 支持多清晰度设置：source:’{“HD”:”address1”,”SD”:”address2”’，详情参见多清晰度播放。如果没有 source,直接将 source 为 null | | vid | String | 媒体转码服务的媒体 Id。 | | playauth | String | 播放权证，如何得到参见获取 playauth。 | | height | String | 播放器高度，可形如‘100%’或者‘100px’,chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | width | String | 播放器宽度，可形如‘100%’或者‘100px’,chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | videoWidth | String | 视频宽度，仅 h5 支持。详情参见旋转和镜像。 | | videoHeight | String | 视频高度，仅 h5 支持。详情参见旋转和镜像。 | | preload | Boolean | 播放器自动加载，目前仅 h5 可用。 | | cover | String | 播放器默认封面图片，请填写正确的图片 url 地址。需要 autoplay 为’false’时，才生效。Flash 播放器封面也需要开启允许跨域访问。 | | isLive | Boolean | 播放内容是否为直播，直播时会禁止用户拖动进度条。 | | autoplay | Boolean | 播放器是否自动播放，在移动端 autoplay 属性会失效。Safari11 不会自动开启自动播放如何开启。 | | rePlay | Boolean | 播放器自动循环播放。 | | useH5Prism | Boolean | 指定使用 H5 播放器。 | | useFlashPrism | Boolean | 指定使用 Flash 播放器。 | | playsinline | Boolean | H5 是否内置播放，有的 Android 浏览器不起作用。 | | showBuffer | Boolean | 显示播放时缓冲图标，默认 true。 | | skinRes | Url | 说明：皮肤图片，不建议随意修改该字段，如要修改，请参照皮肤定制。 | | skinLayout | Array Boolean | 说明：功能组件布局配置，不传该字段使用默认布局。传 false 隐藏所有功能组件，请参照皮肤定制。 | | controlBarVisibility | String | 控制面板的实现，默认为‘hover’。可选的值为：‘click’、‘hover’、‘always’。 | | showBarTime | String | 控制栏自动隐藏时间（ms）。 | | extraInfo | String | 说明：JSON 串用于定制性接口参数。 | | > | > | 1.“fullTitle”：“测试页面”全屏时显示视频标题（仅 flash 支持）。 | | > | > | 2. “m3u8BufferLength”：“30”播放 m3u8 时加载缓存 ts 文件长度单位（秒）（仅 flash 支持）。 | | > | > | 3. “liveStartTime”：“2016/08/17 12:00:00”,直播开始时间，用于提示直播未开始(仅 flash 支持)。 | | > | > | 4. “liveOverTime”：“2016/08/17 14:00:00”,直播结束时间，用于提示直播结束（仅 flash 支持）。 | | enableSystemMenu | Boolean | 是否允许系统右键菜单显示，默认为 false。 | | format | String | 指定播放地址格式，只有使用 vid 的播放方式时支持,可选值为’mp4’、’m3u8’、’flv’、’mp3’，默认为空，仅 H5 支持。 | | mediaType | String | 指定返回音频还是视频，只有使用 vid 的播放方式时支持。可选值为’video’和’audio’，默认为’video’,‘audio’主要是针对只包含音频的视频格式，比如音频的 mp4，仅 H5 支持。 | | qualitySort | String | 指定排序方式，只有使用 vid + plauth 播放方式时支持。‘desc’表示按倒序排序（即：从大到小排序）,‘asc’表示按正序排序（即：从小到大排序）,默认值：‘asc’，仅 H5 支持。 | | definition | String | 显示视频清晰度，多个用逗号分隔，比如：’FD,LD’，此值是 vid 对应流清晰度的一个子集，取值范围：FD（流畅）LD（标清）SD（高清）HD（超清）OD（原画）2K（2K）4K（4K），仅 H5 支持。 | | defaultDefinition | String | 默认视频清晰度，此值是 vid 对应流的一个清晰度，取值范围：FD（流畅）LD（标清）SD（高清）HD（超清）OD（原画）2K（2K）4K（4K）,仅 H5 支持。 | | x5_type | String | 声明启用同层 H5 播放器，启用时设置的值为‘h5’,详情参见同层播放。 | | x5_fullscreen | Boolean | 声明视频播放时是否进入到 TBS 的全屏模式，默认为 false。当需要把视频做为背景时，设置为 true,详情参见同层播放。 | | x5_video_position | String | 声明视频播在界面上的位置，默认为“center”。可选值为：“top”，“center”,详情参见同层播放。 | | x5_orientation | String | 声明 TBS 播放器支持的方向，可选值：landscape：横屏,portraint：竖屏,详情参见同层播放。 | | x5LandscapeAsFullScreen | String | 声明 TBS 全屏播放是否横屏，默认值为 true。 | | autoPlayDelay | Number | 延迟播放时间，单位为秒。详情参见延迟播放 | | autoPlayDelayDisplayText | String | 延迟播放提示文本，详情参见延迟播放。 | | language | String | 国际化，默认为‘zh-cn’。如果未设置，则采用浏览器语言。可选值为‘zh-cn’、‘en-us’或其它值。 | | languageTexts | JSON | 自定义国际化文本 json 结构，key 的值需要和 language 属性值对应起来。例子：{jp:{Play:”Play”}},自定义值参见 Json 结构。 | | snapshot | Boolean | flash 启用截图功能。 | | snapshotWatermark | Object | H5 设置截图水印。 | | useHlsPluginForSafari | Boolean | Safari 浏览器可以启用 Hls 插件播放，Safari 11 除外。 | | enableStashBufferForFlv | Boolean | H5 播放 flv 时，设置是否启用播放缓存，只在直播下起作用。 | | stashInitialSizeForFlv | Number | H5 播放 flv 时，初始缓存大小，只在直播下起作用。 | | loadDataTimeout | Number | 缓冲多长时间后，提示用户切换低清晰度，默认：20 秒。 | | waitingTimeout | Number | 最大缓冲超时时间，超过这个时间会有错误提示，默认：60 秒。 | | liveStartTime | String | 直播开始时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。 | | liveOverTime | String | 直播结束时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。 | | liveTimeShiftUrl | String | 直播可用时移查询地址，详情参见直播时移。 | | liveShiftSource | String | flv 直播地址播放时，hls 的流地址，详情参见直播时移。 | | recreatePlayer | Function | flv 直播和 hls 时移切换是，重新创建播放器方法，详情参见直播时移。 | | diagnosisButtonVisible | Boolean | 是否显示检测按钮，默认为 true。 | | disableSeek | Boolean | 禁用进度条的 Seek，默认为 false，仅 Flash 支持。 | | encryptType | int | 加密类型，播放点播私有加密视频时，设置值为 1，默认值为 0。 | | progressMarkers | Array | 进度条打点内容数组，详情参见进度条打点。 | | vodRetry | int | 点播失败重试次数，默认 3 次 | | liveRetry | int | 直播播放失败重试次数，默认 5 次 |
3.2 播放器方法
// 暂停播放
this.$refs.VueAliplayerV2.pause();可以参考 阿里云播放器接口方法
| 名称 | 参数 | 说明 | | :--------------------- | :------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | play | - | 播放视频。 | | pause | - | 暂停视频。 | | replay | - | 重播视频。 | | seek | time | 跳转到某个时刻进行播放，time 的单位为秒。 | | getCurrentTime | - | 获取当前的播放时刻，返回的单位为秒。 | | getDuration | - | 获取视频总时长，返回的单位为秒，这个需要在视频加载完成以后才可以获取到，可以在 play 事件后获取。 | | getVolume | - | 获取当前的音量，返回值为 0-1 的实数。ios 和部分 android 会失效。 | | setVolume | - | 设置音量，vol 为 0-1 的实数，ios 和部分 android 会失效。 | | loadByUrl | url，time | 直接播放视频 url，time 为可选值（单位秒）。目前只支持同种格式（mp4/flv/m3u8）之间切换。暂不支持直播 rtmp 流切换。 | | replayByVidAndPlayAuth | vid：视频 id,playauth：播放凭证 | 目前只支持 H5 播放器。暂不支持不同格式视频间的之间切换。暂不支持直播 rtmp 流切换。 | | replayByVidAndAuthInfo | 仅 MPS 用户时使用,参数顺序为：vid、accId、accSecret、stsToken、authInfo、domainRegion | 目前只支持 H5 播放器。暂不支持不同格式视频间的之间切换。暂不支持直播 rtmp 流切换。 | | setPlayerSize | w，h | 设置播放器大小 w，h 可分别为 400px 像素或 60%百分比。chrome 浏览器下 flash 播放器分别不能小于 397x297。 | | setSpeed | speed | 手动设置播放的倍速，倍速播放仅 H5 支持。移动端可能会失效，比如 android 微信。倍速播放 UI 默认是开启的。如果自定义过 skinLaout 属性，需要添加 speedButton 项到数组里： | | > | > | {name：“speedButton”，align：“tr”，x：10，y：23} | | setSanpshotProperties | width：宽度,height：高度,rate：截图质量 | 设置截图参数。 | | requestFullScreen | - | 播放器全屏，仅 H5 支持。 | | cancelFullScreen | - | 播放器退出全屏，iOS 调用无效，仅 H5 支持。 | | getIsFullScreen | - | 获取播放器全屏状态，仅 H5 支持。 | | getStatus | - | 获取播放器状态，包含的值：‘init’,‘ready’,‘loading’,‘play’,‘pause’,‘playing’,‘waiting’,‘error’,‘ended’ | | setLiveTimeRange | 开始时间,结束时间 | 设置直播的开始结束时间，开启直播时移功能时使用。例子：player.liveShiftSerivce.setLiveTimeRange(“”，‘2018/01/04 20:00:00’) | | setRotate | rotate 旋转角度 | 参数为旋转角度， 正数为正时针旋转， 负数为逆时针旋转。例如: setRotate(90)。详情参见旋转和镜像。 | | getRotate | - | 获取旋转角度。详情参见旋转和镜像。 | | setImage | image：镜像类型,可选值为：horizon,vertical | 设置镜像，例如: setImage(‘horizon’)。详情参见旋转和镜像。 | | dispose | - | 播放器销毁 | | setCover | cover 封面地址 | 设置封面 | | setProgressMarkers | markers 打点数据集合 | 设置打点数据 | | setPreviewTime | time 试看时间 | 设置试看时间，单位为秒，详情参见试看 | | getPreviewTime | - | 获取试看时间 | | isPreview | - | 是否试看 | | off | ev:事件名[String],handle,事件回调方法[Function] | 通过播放器实例的 off 方法取消绑定的方法 |
[自定义播放器接口方法] | 名称 | 参数 | 说明 | | connectMic | roomId,userName,dev | 推送、接收 RTC 流,dev 值为 test、pro、dev，默认 test | | disconnectMic | BarrageContent | 取消推送、取消接收 RTC 流 | | addBarrage | roomId,userName | 添加弹幕 | | mute | | 静音 | | unMute | | 解除静音 |
4.播放器事件
<template>
<vue-aliplayer-v2 @ready="handleReady" />
</template>
<script>
export default {
methods: {
/**
* 播放器事件回调
*/
handleReady(e) {
console.log(`ready`, e);
},
},
};
</script>可以参考 播放器事件
| 名称 | 说明 | | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | | ready | 播放器视频初始化按钮渲染完毕。播放器 UI 初始设置需要此事件后触发，避免 UI 被初始化所覆盖。播放器提供的方法需要在此事件发生后才可以调用。 | | play | 视频由暂停恢复为播放时触发。 | | pause | 视频暂停时触发。 | | canplay | 能够开始播放音频/视频时发生，会多次触发，仅 H5 播放器。 | | playing | 播放中，会触发多次。 | | ended | 当前视频播放完毕时触发。 | | liveStreamStop | 直播流中断时触发。m3u8/flv/rtmp 在重试 5 次未成功后触发。提示上层流中断或需要重新加载视频。PS：m3u8 一直自动重试，不需要上层添加重试。 | | onM3u8Retry | m3u8 直播流中断后重试事件，每次断流只触发一次。 | | hideBar | 控制栏自动隐藏事件。 | | showBar | 控制栏自动显示事件。 | | waiting | 数据缓冲事件。 | | timeupdate | 播放位置发生改变时触发，仅 H5 播放器。可通过 getCurrentTime 方法，得到当前播放时间。 | | snapshoted | 截图完成事件。 | | requestFullScreen | 全屏事件，仅 H5 支持。 | | cancelFullScreen | 取消全屏事件，iOS 下不会触发，仅 H5 支持。 | | error | 错误事件。 | | startSeek | 开始拖拽，参数返回拖拽点的时间。 | | completeSeek | 完成拖拽，参数返回拖拽点的时间。 |
[自定义播放器事件] | 名称 | 说明 | | :- | :- | | micStatusChange | 连麦状态发送改变 连麦状态： 0->未连麦 1->正在连麦中 2->已连麦 3->被下麦 4->主动下麦成功 5->连麦失败 | | audioStatusChange | 麦克风状态发生改变 inactive/acitve，连麦状态触发 | | baberrageStatusChange | 弹幕开关状态发生改变 true/false |
5.缺陷 & 后期计划
2021 年 2 月 22 日 更新优化局部引用方式
您有功能建议,或者 bug 反馈请留言.
6.感谢
vue-263-player 的作者,项目地址:https://github.com/duanyuanyuan123/vue-263-player
Alipayer 阿里云的开源播放器 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63
Customize configuration
更新日志
v1.1.0 修复部分已知 bug v1.1.1 修复部分已知 bug v1.1.2 修复部分已知 bug v1.1.7 修复部分已知 bug,新增加载视频 loading，增加部分 ui 修复 v1.1.8 修复部分已知 bug,ui 修复 v1.1.9 新增连麦环境的配置，默认为测试环境，可以配置为开发环境，打包上线后为生产环境 v1.2.3 修复 android flv 播放，修复 flv 流暂停后无法继续播放问题，修改 ui,新增添加弹幕表情 v1.2.9 修改标清，高清，超高清配置 v1.3.0 修改弹幕 bug，修改连麦类型，修改移动端播放 flv bug v1.4.0 新增 asm,wasm 支持 ios 播放 flv v1.4.3 新增 重载方法，新增 asm,wasm 错误提示 v1.4.4 修改销毁后无法重载问题 v1.4.6 新增音视频切换通知 avStatusChange v1.4.8 修复微信浏览器 flv 不能播放问题 v3.2.1 修复3s无数据重新加载问题 v3.2.2 修复3s无数据重新加载问题 v3.2.3 修复3s无数据重新加载问题 v3.2.4 修复3s无数据重新加载问题,新增loading v3.2.5 修复3s无数据重新加载问题,新增loading,加载未完成检测时禁止取消loading v3.2.7 修复播放无url时loading问题 v3.2.8 修复nodeplayer声音问题 v3.2.9 修复全屏通知问题 v3.3.0 修复全屏通知问题 v3.3.1 新增safari浏览器播放，修改bug v3.6.1 新增rtc版本参数，控制rts参数 v3.6.2 修复rts切换分辨率问题 v3.6.3 修复阿里hls和rts切换后，rts流暂停问题 v3.6.4 修改过期重新拉流错误码为4004的问题 v3.6.7 去掉日志 v3.6.8 新增隐藏显示控制栏开关 v3.6.9 修改rts流isLive等于true不能监听到error错误，修改player没有加载完导致的播放失败 v3.7.0 新增rts报错4121时（403）重新拉流 v3.7.1 修改暖场件ios无法播放问题 v3.7.2 修改loabbyurl无法播放问题 v3.7.3 集成zdplayer v3.7.4 修复zdplayer 无分辨率切换问题 v3.7.7 修复火狐浏览器播放按钮问题，修复切换播放器全屏问题，修复暖场件无法销毁问题 v3.7.8 修改socket.io没有导致连麦不可用问题 v3.7.9 修复切换播放器全屏问题 v3.8.0 修复切换播放器全屏问题 v3.8.1 修复切换播放器全屏问题、占东播放器断网暂停 v3.8.2 修复切换播放器全屏问题loading组件销毁导致，移动端node和263使用同一个画布 v3.8.3 修复263player切换分辨率无法自动播放问题 v3.8.4 增加默认分辨率设置，及原画设置 v3.8.5 修改原画不能设置为默认 v3.8.6 新增弹幕表情，修改9：16显示异常，新增zd播放器错误回调 v3.8.7 新增nodeplayer播放回调。 v3.8.8 修复nodeV9 无法播放问题 v3.9.0 修改弹幕图标 v3.9.1 增加移动端全屏切换 v3.9.2 修改node canvas 绘制方式 v3.9.3 修改node play set setView v3.9.4 set node play release v3.9.6 新增pc音量调节 v3.9.7 修改设置音量bug v4.0.0 修改图标及音量bug v4.0.3 （1）新增setDisabledVolume方法，设置禁止设置音量 （2）修改暖场件无法设置音量bug （3）修改扬声器调节音量后，移出调节音量区域无法隐藏bug
v4.0.5 (1) 修改连麦挂断后，扬声器不可点击bug v4.0.6 (1) 修改切出页面在切回来，扬声器自动打开bug v4.0.7 (1) 修改nodeplayerq静音后，切换分辨率静音状态和按钮不一致问题 v4.0.8 (1) 修复连麦用户无法听到插播声音的问题：修改播放器新增连麦参数，可订阅live和common。云播观众端传参为live，默认为common（云视直播中使用）