本文介绍如何通过跨端项目（如 uni-app 项目和 Taro 项目）集成微信小程序以及抖音小程序点播 SDK。
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之后的版本会自动复制）。
wxcomponents 文件夹在项目根目录下。wxcomponents 文件夹在 src 目录下。node_modules/veplayer-mp-douyin 到项目小程序组件存放目录 ttcomponents（0.1.14之后的版本会自动复制）。
ttcomponents 文件夹在 项目根目录下。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.json 的 globalStyle 中配置 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>
以暂停为例，代码示例如下所示。
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-ifwx:for="" wx:key="" 改为 v-for="(item,index) in list"详情请参见小程序转 uni-app 语法差异
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} /> ); };
以暂停为例，代码示例如下所示。
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 组件提供的短剧行业能力，请见接入短剧行业能力。