「腾讯视频」插件能做什么?
如果你有一个电商小程序,想在其中增加商品介绍视频,少不了会担心搭建视频服务开发成本太大的问题;
如果你有一个餐饮类小程序,想在其中增加菜品介绍视频,少不了会担心带宽成本太高的问题;
如果你有一个门票预订小程序,想在其中增加景点介绍视频,少不了会担心视频资质申请流程太长的问题;
……
而有了「腾讯视频」插件,这些问题将被完美解决,因为「腾讯视频」插件提供的完整视频播放能力,大大方便开发者去给用户提供更好的视频体验。
插件基于腾讯视频的 CDN 节点和成熟视频方案,可以做到为不同地点的用户提供更流畅的播放服务,更清晰的视频,更稳定的播放质量。
当你在腾讯视频上传视频后,将得到相应的 vid,只需在 WXML 文件上插入相应的视频元素后,开发者即可直接在小程序内播放腾讯视频上的内容,十分流畅。
// 在你的 wxml 文件上插入下面的视频元素 <tx-video vid="e0354z3cqjp"></tx-video>
「腾讯视频」插件的使用场景
场景一:电商类小程序
除了对商品的语言描述,实惠的价格,精美的图片,也需要生动直观、360 度动态介绍商品,比单一的图片更能引起消费者的好感。
现在,在商品介绍里直接链入相关商品视频。比如,买衣服的电商小程序,可以把电视或电影中明星穿过的同款视频链入,在满足用户感官享受的同时,提升转化率。
场景二:文娱推荐类小程序
不局限于苍白的文字描述,推荐类小程序也可在小程序中添加电影视频、预告片,为用户带来完美的购票、观影体验。开发者无需独立开发视频功能,直接使用「腾讯视频」插件,即可实现视频播放功能。
场景三:资讯类小程序
「腾讯视频」插件还可以是内容创作者的一大利器,以游戏攻略类小程序为例。小程序就可以直接用视频的形式展现,一方面清晰明了地展示攻略流程,同时也增加了用户在小程序内的停留时长,进一步引导用户做更多动作。
或者生活居家小技巧类的小程序,比如想教大家一种打结的方式,纯文字的形式即很难说清楚,又浪费内容运营者的时间,这时候直接使用插件链入视频,就能很快地教会大家,给予用户更好的内容体验。
如何接入「腾讯视频」插件?
「腾讯视频」的功能不少,使用起来却十分简单:
1. 申请使用插件。在「小程序管理后台 – 设置 – 第三方服务 – 插件管理」中查找插件名称「腾讯视频」(appid: wxa75efa648b60994b),并申请使用。
2. 引入插件代码。使用者需要在 app.json 中声明需要使用的插件(目前最新版本:1.1.2,appid:wxa75efa648b60994b):
{ "plugins": { "myPlugin": { "version": "1.1.2", "provider": "wxa75efa648b60994b" } } }
3. 使用播放器组件。在相应的 WXML 文件中添加以下代码即可:
<txv-video vid="e0354z3cqjp" // 可使用vid="{{vid}}"的方式应用data变量 playerid="txv1" autoplay="{{true}}" // 是否自动播放 ></txv-video>
组件元素支持的属性:
-
vid 视频 id
-
playerid 播放器标识符
-
bindtimeupdate 播放进度更新事件,1.1.0 后支持
-
bindstatechange 播放状态变更事件,1.1.0 后支持
-
binderror 错误信息,1.1.0 后支持
-
继承于小程序 video 元素的属性:autoplay objectFit poster initialTime show-fullscreen-btn show-play-btn show-center-play-btn muted loop
4. 最后,按需求调用插件 JS 接口即可。
const TxvContext = requirePlugin("tencentvideo"); let txvContext = TxvContext.getTxvContext('txv1') // txv1即播放器组件的playerid值 txvContext.play(); // 播放 txvContext.pause(); // 暂停 txvContext.requestFullScreen(); // 进入全屏 txvContext.exitFullScreen(); // 退出全屏 txvContext.playbackRate(+e.currentTarget.dataset.rate); // 设置播放速率
如果你想了解更多「腾讯视频」插件详情,欢迎访问开发者社区插件版块相应页面(建议电脑访问):
🔗https://developers.weixin.qq.com/community/develop/doc/0004e863198b08bd52676ddf85140c