You need to enable JavaScript to run this app.
导航
uni-app/Taro 集成小程序 SDK
最近更新时间:2024.08.28 16:33:51首次发布时间:2023.06.06 20:20:06

本文介绍如何通过跨端项目(如 uni-app 项目和 Taro 项目)集成微信小程序以及抖音小程序点播 SDK。

使用 uni-app 项目

uni-app 项目支持使用小程序自定义组件,可以按照以下步骤在 uni-app 项目中使用此播放器组件。

安装依赖

在 uni-app 项目中安装依赖,代码示例如下:

# npm
npm i veplayer-mp-wechat
// npm i veplayer-mp-douyin

# yarn
yarn add veplayer-mp-wechat
// yarn add veplayer-mp-douyin

说明

HBuilderX 创建的项目默认没有 package.json 文件,需要通过初始化命令来创建。

npm init -y

复制文件

  • 微信小程序开发时,复制 node_modules/veplayer-mp-wechat 到项目小程序组件存放目录 wxcomponents(0.1.14之后的版本会自动复制)。
    • HBuilderX 建立的工程 wxcomponents 文件夹在项目根目录下。
    • vue-cli 建立的工程 wxcomponents 文件夹在 src 目录下。
  • 抖音小程序开发时,复制 node_modules/veplayer-mp-douyin 到项目小程序组件存放目录 ttcomponents(0.1.14之后的版本会自动复制)。
    • HBuilderX 建立的工程 ttcomponents 文件夹在 项目根目录下。
    • vue-cli 建立的工程 ttcomponents 文件夹在 src 目录下。

配置日志上报

在页面/组件实例化之前,支持配置播放器日志上报,代码示例如下所示。

<!-- 页面模板 (index.vue) -->
<template>
  <view>
    <veplayer
        id="videoContainer"
        :src="src"
        loop
        :logInfo="logInfo"
    />
  </view>
</template> 
<script>
  export default {
    data() {
      return {
        src: 'https://xx.cdn.com/demo.mp4',
        logInfo: {
          appId: xxx,
          tag: 'recommend',
          subtag: 'hot',
        }
      }
    },
  }
</script>

配置组件引入

pages.json 对应页面的 style.usingComponents 中引入组件。可通过 uni-app 提供的条件编译的方式,在不同平台上编译使用不同的 SDK,例如微信对应 veplayer-mp-wechat、抖音对应 veplayer-mp-douyin

说明

如果是在 vue 组件中使用小程序组件时,需要在 pages.jsonglobalStyle 中配置 usingComponents,而不是页面级配置。

引入组件的代码示例如下所示。

{
   "pages": [
      {
         "path": "pages/index/index",
         "style": {
            // #ifdef MP-WEIXIN
            "usingComponents": {
               "veplayer": "/wxcomponents/veplayer-mp-wechat/dist/index"
            },
            // #endif
            // #ifdef MP-TOUTIAO
            "usingComponents": {
               "veplayer": "/ttcomponents/veplayer-mp-douyin/dist/index"
            },
            // #endif
            "navigationBarTitleText": "uni-app"
         }
      }
   ]
}

使用组件

引用组件

在页面中引用自定义组件,vue 模板代码示例如下所示。

<!-- 页面模板 (index.vue) -->
<template>
  <view>
    <!-- 在页面中对自定义组件进行引用 -->
    <veplayer
        id="video"
        :src="src"
        controls="custom"
        @play="onPlay"
        @timeupdate="onTimeupdate"
    />
  </view>
</template>

<script>
  export default {
  data() {
    return {
      src: 'https://xx.cdn.com/demo.mp4'
    }
  },

  methods: {
    onPlay(e) {
      // TODO something
      console.log('play event: ', e);
    },

    onTimeupdate(e) {
      // TODO something
      console.log('timeupdate event', e);
    },
  },
}
</script>

调用 API

以暂停为例,代码示例如下所示。

const component = this.selectComponent('#video');
const player = component.getContext();
if (player) {
  player.pause();
}

监听时间

除了通过 @eventName 方式进行监听外,还可以通过组件的 videoContext以事件订阅的方式动态监听。
代码示例如下所示。

const component = this.selectComponent('#video');
const player = component.getContext();
if (player) {
  player.on('timeupdate', e => {
    const { currentTime, duration } = e.detail;
    console.log('event timeupdate:', currentTime, duration);
  });
}

如果是从 uni-app 的 video 组件迁移到本组件,不作 API 使用的更改,则组件属性里通过 componentId 传入uni.createVideoContext 需要的组件 ID,API 调用同 uni-app 组件说明

注意

通过 createVideoContext 获取的播放器上下文无法使用事件监控。

数据和事件绑定的差异,组件使用时应按照 vue 的方式进行数据和事件绑定:

  • 属性绑定从 attr="",改为 :attr="a";从 src="http://xx.demo.com/1.mp4" 改为 :src="'http://xx.demo.com/' + vid + '.mp4"
  • 事件绑定从 bind:play="onPlay" 改为 @play="onPlay"
  • 阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"
  • wx:if 改为 v-if
  • wx:for="" wx:key="" 改为 v-for="(item,index) in list"

详情请参见小程序转 uni-app 语法差异

使用 Taro 项目

Taro 项目支持使用原生小程序组件,可以按照以下步骤在 Taro 项目中使用此播放器组件。

安装依赖

在 Taro 项目中安装依赖,代码示例如下:

# npm
npm i veplayer-mp-wechat
// npm i veplayer-mp-douyin

# yarn
yarn add veplayer-mp-wechat
// yarn add veplayer-mp-douyin

复制文件

  • 微信小程序开发时,复制 node_modules/veplayer-mp-wechat 到项目小程序组件存放目录 wxcomponents(0.1.14 之后的版本会自动复制)。
  • 抖音小程序开发时,复制 node_modules/veplayer-mp-douyin 到项目小程序组件存放目录 ttcomponents(0.1.14 之后的版本会自动复制)。

配置日志上报

在页面/组件实例化之前,配置日志上报,示例代码如下:

const VideoPlayer = ({
       videoComponentId,
       className,
       videoPlayUrl,
       coverUrl,
       controlShow,
       onTimeUpdate,
       onError,
   }) => {
  const handleTimeupdate = (e) => {
      // 注意原生组件事件的event在taro项目中被劫持包装到了e.mpEvent.detail.e中
    const originEvent = e.mpEvent.detail.e;
    const { currentTime, duration } = originEvent.detail;
    // TODO something
    // ...
    onTimeUpdate(currentTime);
  };

  const handleVideoTap = () => {
      // 点击视频
  };
  
  const logInfo = {
    appId: xxx,
    tag: 'recommend',
    subtag: 'hot',
  }
  
  return (
    <veplayer
      id={videoComponentId}
      // 引用原生组件需要使用 class 传参
      class={className}
      src={videoPlayUrl}
      logInfo={logInfo}
      showPlayBtn
      showBottomProgress={false}
      controls={controlShow}
      // 原生组件需要使用小写 autoplay
      autoplay
      onPlay={onPlay}
      onTimeupdate={handleTimeupdate}
      poster={coverUrl}
      onError={onError}
      onTap={handleVideoTap}
    />
);
};

配置组件引入

在使用到播放器组件所在页面的 index.config.ts 配置中引入组件:

export default definePageConfig({
    navigationBarTitleText: '',
    navigationBarTextStyle: 'black',
    navigationStyle: 'custom',
    disableScroll: true,
    usingComponents: {
        veplayer: '../../wxcomponents/veplayer-mp-wechat/dist/index',
    //  veplayer: '../../ttcomponents/veplayer-mp-douyin/dist/index', // 抖音小程序
    },
});

注意

需要保证组件路径配置正确。

使用组件

引用组件

以 react 语法示例在自定义组件中使用播放器组件为例,代码示例如下:

const VideoPlayer = ({
       videoComponentId,
       className,
       videoPlayUrl,
       coverUrl,
       controlShow,
       onTimeUpdate,
       onError,
   }) => {
  const handleTimeupdate = (e) => {
      // 注意原生组件事件的 event 在 Taro 项目中被劫持包装到了 e.mpEvent.detail.e 中
    const originEvent = e.mpEvent.detail.e;
    const { currentTime, duration } = originEvent.detail;
    // TODO something
    // ...
    onTimeUpdate(currentTime);
  };

  const handleVideoTap = () => {
      // 点击视频
  };
  
  return (
    <veplayer
      id={videoComponentId}
      // 引用原生组件需要使用 class 传参
      class={className}
      src={videoPlayUrl}
      showPlayBtn
      showBottomProgress={false}
      controls={controlShow}
      // 原生组件需要使用小写 autoplay
      autoplay
      onPlay={onPlay}
      onTimeupdate={handleTimeupdate}
      poster={coverUrl}
      onError={onError}
      onTap={handleVideoTap}
    />
);
};

调用 API

以暂停为例,代码示例如下所示。

import Taro from '@tarojs/taro';

const { page } = Taro.getCurrentInstance();
const videoContext = page?.selectComponent(`#${id}`)?.getContext();
videoContext.play();

监听事件

除了通过在 jsx 语法上添加 "on+首字母大写事件名"方式进行监听外,还可以通过组件的 videoContext 以事件订阅的方式动态监听,以监听 timeupdate 事件为例。

import Taro from '@tarojs/taro';

const { page } = Taro.getCurrentInstance();
const videoContext = page?.selectComponent(`#${id}`)?.getContext();
if (player) {
  player.on('timeupdate', (data) => {
    const { currentTime, duration } = data.e.detail;
    console.log('event timeupdate:', currentTime, duration)
  });
}

通过 jsx 语法监听的原生事件 event 在 Taro 项目中被劫持包装到了e.mpEvent.detail.e 中,以监听 timeupdate 事件为例,取数据时的代码示例如下:

const handleTimeupdate = (e) => {
  // 注意原生组件事件的 event 在 taro 项目中被劫持包装到了 e.mpEvent.detail.e 中
  const originEvent = e.mpEvent.detail.e;
  const { currentTime, duration } = originEvent.detail;
  // TODO something
  // ...
};

更多功能

如您是短剧行业,需要接入抖音小程序 video-player 组件提供的短剧行业能力,请见接入短剧行业能力