You need to enable JavaScript to run this app.
导航
功能接入
最近更新时间:2024.03.06 19:52:42首次发布时间:2024.03.06 19:52:42

在接入微信小程序拉流 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

说明

如需开启日志上报,请确认已在微信小程序的 request 合法域名中添加了日志上报域名(https://mcs.zijieapi.com)。

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

    <!-- 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);
    });
  },
});

封面图

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

说明

  • 如需设置封面图,请确认已在微信小程序的 request 合法域名中添加了封面图资源访问域名。
  • 如果设置了忽略封面图插件,如不会展示封面图。
<!-- 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',
  },
});