在kbone中使用腾讯视频小程序播放插件
发布于 3 年前 作者 sxie 2023 次浏览 来自 分享

需求：在kbone项目中引入腾讯视频小程序播放插件渲染视频

腾讯视频小程序播放插件介绍：github传送门
在代码中需要使用<txv-video>标签进行展示，如下所示：


// 在你们的wxml上这样插入视频元素

<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>

但是kbone框架并不认识<txv-video>标签，因为不是他的内置标签名，直接使用编译完成后会发现被渲染成<view>标签，当然视频也没法正常显示。

这时需要借助kbone官方提供的方法：使用__小程序自定义组件__官方文档传送门，使用自定义组件可以让kbone无法识别的一些标签进行正确解析和渲染。

以kbone框架为例，正确引入步骤如下：

1.建立自定义组件目录

要在 kbone 中使用自定义组件，需要将所有自定义组件和其依赖放到一个固定的目录，这个目录可以自己拟定，假设这个目录为 src/custom-component：
然后建立要创建的自定义组件名文件夹，比如这次要使用的__txv-video__

2.修改webpack插件的配置

在miniprogrom.config.js中的 generate 字段内补充 wxCustomComponent

root 是组件根目录，即上面提到的目录：src/custom-component，
usingComponents 则用来配置要用到的自定义组件。
键为组件名（txv-video），值可以为组件相对 root 字段的路径，也可以是一个配置对象。
本例使用配置对象进行相应配置：

  • path 为组件相对路径
  • props 表示要这个组件会被用到的 properties（txv插件需要的两个必需属性vid、playerid）
  • propsVal 表示对应属性的默认值（本例未用到）
  • events 表示这个组件会被监听到的事件（本例未用到）

3.将自定义组件放入组件根目录

以txv-video组件为例
index.wxml文件：使用<txv-video>标签
注意：需要使用__插值{{}}语法__方式赋值，如果使用v-bind指令(或简写:)并不生效，使用该组件时无法正常获取到对应值

// index.wxml
<txv-video vid="{{vid}}" playerid="{{playerid}}"></txv-video>

index.js文件：声明所需的属性和方法，可以参考官方文档

// index.js
Component({
properties: {
  vid: String,
  playerid: String
},
});

index.json文件：非kbone要求，属于腾讯视频小程序播放插件要求，键值名必须按如下正确书写

// index.json
{
"usingComponents": {
  "txv-video": "plugin://tencentvideo/video"
}
}

4. 在app.json中引入txv-video插件

此步骤属于腾讯视频小程序插件要求配置，在kbone中打开__miniprogrom.config.js__文件，找到__appExtraConfig__字段（kbone中__appExtraConfig__字段对应小程序中的__app.json__配置）
添加如下代码：

 plugins: {
    tencentvideo: {
      version: "1.5.2",
      provider: "wxa75efa648b60994b"
    }
  }

5.使用自定义组件

如下图所示，不需要额外导入可以直接使用该组件。

可以看到<txv-video>标签成功渲染，视频也可以正常显示，如下图所示：

回到顶部