播放器
<p>[TOC]</p>
<h4>示例</h4>
<pre><code class="language-html"><player
:appId="roomInfo.app_id"
:roomId="roomInfo.room_id"
:nickName="userInfo.nickname"
:accountId="roomInfo.third_party_user_id"
:token="roomInfo.paas_access_token"
type="live"
:vodOption="vodOption"
:showBarrage="true"
:liveOption="{
type: 'flv',
defaultDefinition: 'same'
}">
</player></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">accountId</td>
<td style="text-align: left;">用户 ID</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">appId</td>
<td style="text-align: left;">应用 ID</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间 ID</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">nickName</td>
<td style="text-align: left;">昵称</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">token</td>
<td style="text-align: left;">passToken</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">type</td>
<td style="text-align: left;">直播类型</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">live，vod</td>
<td style="text-align: left;">live</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">liveOption</td>
<td style="text-align: left;">直播时需要传递的参数，默认为 false,直播时需传值。type 为直播流类型，可选值有 hls ,flv；defaultDefinition 为默认清晰度，非必填，默认 480p,支持 same, 720p,480p,360p,a。</td>
<td style="text-align: left;">boolean,object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">vodOption</td>
<td style="text-align: left;">回放时需要传递的参数,默认为 false,回放时需传值。recordId 为回放 ID,defaultDefinition 为默认清晰度，非必填，默认 480p,支持 same, 720p,480p,360p,a</td>
<td style="text-align: left;">boolean,object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">openPlayerUI</td>
<td style="text-align: left;">开启播放器自带 UI</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">openScrollText</td>
<td style="text-align: left;">是否开启跑马灯</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">showBarrage</td>
<td style="text-align: left;">是否显示弹幕</td>
<td style="text-align: left;">object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">playerParams</td>
<td style="text-align: left;">传递给初始化播放器实例的参数，和默认参数合并</td>
<td style="text-align: left;">object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>methods</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">方法名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">openBarrage</td>
<td style="text-align: left;">开启弹幕</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">closeBarrage</td>
<td style="text-align: left;">关闭弹幕</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">addBarrage</td>
<td style="text-align: left;">发送弹幕</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">openControls</td>
<td style="text-align: left;">开启/关闭浏览器播放器 UI ，默认关闭</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">openUI</td>
<td style="text-align: left;">开启/关闭 sdk 播放器自带 UI，默认开启</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
</tr>
</tbody>
</table>
<h4>events</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">事件名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">component_playerSDK_ready</td>
<td style="text-align: left;">播放器实例初始化完成事件</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_barrage_change</td>
<td style="text-align: left;">弹幕开启关闭事件</td>
<td style="text-align: left;">boolean，是否开启弹幕</td>
</tr>
<tr>
<td style="text-align: left;">component_speed_change</td>
<td style="text-align: left;">切换倍速事件</td>
<td style="text-align: left;">number ，当前倍速</td>
</tr>
<tr>
<td style="text-align: left;">component_quality_change</td>
<td style="text-align: left;">切换清晰度事件</td>
<td style="text-align: left;">string，当前清晰度</td>
</tr>
</tbody>
</table>