「腾讯视频」微信小程序插件介绍
上期,我们在《从原理到应用,一文带你了解小程序插件能力》一文中介绍了小程序插件的意义、作用以及应用。今天开始,我们会每期与大家分享一款优秀的小程序插件,从使用场景到使用方法,都将作出详细的介绍。
第一期与大家分享的小程序插件,是「腾讯视频」插件。
「腾讯视频」插件能做什么?
如果你有一个电商小程序,想在其中增加商品介绍视频,少不了会担心搭建视频服务开发成本太大的问题;
如果你有一个餐饮类小程序,想在其中增加菜品介绍视频,少不了会担心带宽成本太高的问题;
如果你有一个门票预订小程序,想在其中增加景点介绍视频,少不了会担心视频资质申请流程太长的问题;
……
而有了「腾讯视频」插件,这些问题将被完美解决,因为「腾讯视频」插件提供的完整视频播放能力,大大方便开发者去给用户提供更好的视频体验。
插件基于腾讯视频的 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
视频 idplayerid
播放器标识符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....
手机端用户也可以扫码访问
内容来自:微信开放社区《小程序·小故事》栏目
原作者:zombie
任何问题,欢迎前往微信开放社区:https://developers.weixin.qq.com
了解更多小程序开发相关内容,欢迎微信扫描下方二维码关注微信极客WeGeek公众号,共筑微信生态。
「腾讯视频」微信小程序插件介绍的更多相关文章
- 微信小程序 插件介绍
小程序的插件是对一组js接口.自定义组件或页面的封装.插件不能独立运行,必须嵌入在其他小程序中才能被用户使用:而第三方小程序在使用插件时,也无法看到插件的代码.因此,插件适合用来封装自己的功能或服务, ...
- 《腾讯游戏人生》微信小程序开发总结
为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...
- 微信小程序插件 - 开发教程
昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现. 这篇文章,我将会带大家,从0开始,学习如何开发和使用插件. ...
- 「小程序JAVA实战」微信小程序简介(一)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-01/ 一直想学习小程序,苦于比较忙,加班比较多没时间,其实这都是理由,很多时候习惯了搬砖,习惯了固 ...
- 「小程序JAVA实战」微信小程序工程结构了解(五)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-05/ 微信小程序工程结构 audio,button,canvas,checkbox 都是由4个文件 ...
- 腾讯云&搭建微信小程序服务
准备域名和证书 任务时间:20min ~ 40min 小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书. 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可 ...
- 腾讯云开发微信小程序使用体验
主体内容 代码构成 数据:JSON 配置文件 结构:WXML 模版文件 样式:WXSS 页面样式 交互:JS 脚本逻辑文件 云开发 云数据库 云函数 云存储 WXML 是小程序框架设计的一套标签语言, ...
- 什么是微信小程序?简单介绍
1.微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有色的使用体验. 2.手机端App的另外一种新的展现形式 3.无需下载过多占用手机内存的app,小程序直接打开 ...
- 微信小程序 基本介绍及组件
创建项目 微信开发工具深入介绍 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 基本项目目录 1. 配置 ...
随机推荐
- Vue el-date-picker 日期组件的使用
一:显示年月 <el-date-picker v-model="selectMonth" type="month" placeholder="选 ...
- Python 并发编程(上)
Python 并发编程 参考文献:https://gitee.com/wupeiqi/python_course 并发编程:提升代码执行的效率.原来需要 10 分钟执行,并发处理后可以加快到 1 分钟 ...
- tp5 多文件上传
路由: Route::post('imgs','task/task/uploads'); 控制器代码: // 多文件上传 public function uploads() { //接受参数 $dat ...
- phpstrom2019版永久破解
前言 : 首先进入软件,如果软件需要激活才能进入,可以在idea.medeming.com/jets,中下载激活码,以方便进入 然后按照下面的步骤操作 1.下载补丁 链接:https://pan.ba ...
- python检查是否有缺失值(有用)以及list,array合并
df.isnull().any() 用来判断某列是否有缺失值 df.isnull().all() 用来判断某列是否全部为空值
- 2022:checking for Python executable "python2" in the PATH
目录 一.node报错 说明 1.网上常用方法一(本博主环境无效) 2.网上常用方法二(本博主环境无效) 3.本博主使用方法(当前有效) 1.确保NodeJS环境安装没有问题,如果不会安装,请参考 构 ...
- info sharp Are you trying to install as a root or sudo user? Try again with the --unsafe-perm flag
执行 npm install 编译出错,提示 ERR! sharp EACCES: permission denied, mkdir '/root/.npm' info sharp Are you t ...
- CentOS7.5安装Ansible
安装ansible: 查看可用的ansible版本: yum list|grep ansible 方法一: 系统可用ansible版本太低,安装epel源: yum install epel-re ...
- 5分钟了解Redis的内部实现快速列表(quicklist)
快速列表简介 在Redis3 .2版本之前,存储列表(list)数据结构使用的是压缩列表(ziplist)和链表(linkedlist),当列表元素个数比较少并且每个元素占用空间比较小的时候,使用压缩 ...
- Idea进行spring-boot-devtools热部署以及不生效的问题解决
实现的方式有两种: spring-boot-devtools spring Loaded 我在此只介绍spring-boot-devtools的使用方法: 1.在pom中直接引入依赖 <depe ...