uni 使用抖音自定义组件

218 阅读1分钟

image.png

detail.vue使用video-player组件

用到的目录如下:

image.png

pages.json

image.png

"usingComponents": {
    "video-player-dy": "/ttcomponents/videoPlayer/index"
 }
detail.vue
<video-player-dy v-if="isShow" :albumId="albumId" :episodeId="episodeId"  :src="" >
</video-player-dy>

ttcomponents

image.png

index.js

Page({
  data: {
    playletshow: false,
    albumId: '',
    episodeId: '',
    cloudType: 1,
    version: 1
  },
  preloadplaylet() {
    tt.preloadResourceVideo({
      albumId: this.data.albumId,
      episodeId: this.data.episodeId,
      cloudType: this.data.cloudType,
      version: this.data.version,
      success: () => {
        tt.showToast({
          title: '短剧预加载成功', // 内容
        });
        this.setData({
          playletshow: true,
        });
      },
      fail: (error) => {
        console.log("短剧预加载失败", error);
        tt.showToast({
          icon: 'fail',
          title: '短剧预加载失败'
        })
        this.setData({
          playletshow: true,
        });
      },
    });
  },
  cptEventAssert (event) {
    console.log("event", event)
  },
});

index.json

{
  "component": true,
  "usingComponents": {
	  "video-player":"ext://industry/video-player"
  }
}

index.ttml

<video-player bind:error="onError" album-id="{{albumId}}" episode-id="{{episodeId}}" cloud-type="{{1}}" version="1" />