功能接入

在接入微信小程序拉流 SDK 的过程中，您需要根据使用场景配置不同的参数，本文为您介绍部分常见场景的接入示例。

拉流播放

支持使用微信小程序原生组件 live-player 的音视频地址配置功能，代码示例如下所示。

<!-- index.wxml -->
<ve-live-player
  autoplay
  src="https://pull-demo.volcfcdnrd.com/live/st-4536521.flv"
/>

// index.js
Page({});

事件监听

播放器提供两种事件监听方式，一是通过 bind 绑定事件，二是获取到播放器实例后通过 on 监听事件。同时您可以新增自定义事件进行事件触发。

通过 bind 绑定事件实现事件监听的代码示例如下所示。

<!-- index.wxml -->
<ve-live-player
  class="player"
  bindplay="onPlay"
  autoplay
  src="https://pull-demo.volcfcdnrd.com/live/st-4536521.flv"
/>

自定义事件并通过 on 方法监听时间的代码示例如下所示。

// index.js
import { getVeLivePlayer } from 'veplayer-live-mp-wx';

Page({
  onLoad() {
    const veLivePlayer = getVeLivePlayer(this, '.player');
    veLivePlayer.on('ok', () => {
      console.log('ok');
    });
    veLivePlayer.emit('ok');
    veLivePlayer.on('videoResize', detail => {
      console.log('videoResize: ', detail);
    });
  },
  onPlay() {
    console.log('play');
  },
});

报错监听

直播播放器创建成功后，您可监听报错事件，针对不同的错误码区分处理。

通过 bind 绑定错误实现报错监听的代码示例如下所示。

<!-- index.wxml -->
<ve-live-player class="player" binderror="onError" autoplay src="" />

通过 on 方法监听报错的代码示例如下所示。

// index.js
import { getVeLivePlayer } from 'veplayer-live-mp-wx';

Page({
  onLoad() {
    const veLivePlayer = getVeLivePlayer(this, '.player');
    veLivePlayer.on('error', detail => {
      console.log('error: ', detail);
    });
  },
  onError() {
    console.log('error');
  },
});

自适应容器

播放器创建成功后会根据视频的实际大小缩放容器大小。

容器宽度固定，高度根据视频高度进行自适应调整，代码示例如下所示。

<!-- index.wxml -->
<ve-live-player
  autoplay
  src="https://pull-demo.volcfcdnrd.com/live/st-4536521.flv"
  fit-video-size="fixWidth"
  width="100vw"
/>

```javascript
// index.js
Page({});

容器高度固定，宽度根据视频宽度进行自适应调整，代码示例如下所示。

<text>fit height</text>
<ve-live-player
  autoplay
  src="https://pull-demo.volcfcdnrd.com/live/st-4536524.flv"
  fit-video-size="fixHeight"
  height="300px"
/>

// index.js
Page({});

忽略内置插件

您可以设置忽略内置插件，代码示例如下所示。

当前播放器组件支持以下插件：

• ve-loading：视频加载插件，将会在首次播放视频开始播放到播放第一帧之间显示，如果视频播放产生卡顿，也会展示 loading 状态。

• ve-error：视频加载错误插件，将会在视频播放失败，如“找不到服务器，拉流资源解析失败”时展示。

• ve-poster：封面图插件，支持设置封面功能，如果设置忽略将无法展示封面。

<!-- index.wxml -->
<ve-live-player
  autoplay
  ignores="{{ignores}}"
  src="https://pull-demo.volcfcdnrd.com/live/st-4536521.flv"
/>

// index.js
Page({
  data: {
    /**
     * 忽略内置组件
     * 有效值为 've-loading', 've-error', 've-poster'
     */
    ignores: ['ve-loading'],
  },
});

日志上报

播放器默认会进行日志上报，您可以通过设置将其关闭，也可以对其进行基础配置，配置参考LoggerConfig。

• 关闭日志上报，代码示例如下所示。

  <!-- index.wxml -->
  <ve-live-player
    autoplay
    class="player"
    logger="{{logger}}"
    src="https://pull-demo.volcfcdnrd.com/live/st-4536521.flv"
  />
  

  // index.js
  import { getVeLivePlayer } from 'veplayer-live-mp-wx';
  
  Page({
    data: {
      logger: {
        enable: false,
      },
    },
  });
  

• 开启日志上报并配置日志上报基础信息，代码示例如下所示。

  <!-- index.wxml -->
  <ve-live-player
    autoplay
    class="player"
    logger="{{logger}}"
    src="https://pull-demo.volcfcdnrd.com/live/st-4536521.flv"
  />
  

  // index.js
  import { getVeLivePlayer } from 'veplayer-live-mp-wx';
  
  Page({
    data: {
      logger: {
        enable: true,
        appId: '742***2',
        appName: 'app_name',
        userId: 'u_123456',
        deviceId: 'd_123456',
      },
    },
    onLoad() {
      const veLivePlayer = getVeLivePlayer(this, '.player');
    },
  });
  

SEI 监听

在播放器创建完成后，您可以设置 SEI 补充增强信息监听，代码示例如下所示。

<!-- index.wxml -->
<ve-live-player
  id="player"
  autoplay
  src="https://pull-demo.volcfcdnrd.com/live/st-4536521.flv"
/>

// index.js
import { getVeLivePlayer } from 'veplayer-live-mp-wx';

Page({
  onLoad() {
    const veLivePlayer = getVeLivePlayer(this, '#player');
    veLivePlayer.on('sei', e => {
      console.log('sei info: ', e);
    });
  },
});

封面图

支持为播放器设置封面图，代码示例如下所示。

<!-- index.wxml -->
<ve-live-player poster="{{poster}}" id="player" autoplay src="" />

// index.js
import { getVeLivePlayer } from 'veplayer-live-mp-wx';

Page({
  data: {
    poster:
      'https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  },
});