上期,我们在《从原理到应用,一文带你了解小程序插件能力》一文中介绍了小程序插件的意义、作用以及应用。今天开始,我们会每期与大家分享一款优秀的小程序插件,从使用场景到使用方法,都将作出详细的介绍。

第一期与大家分享的小程序插件,是「腾讯视频」插件。

「腾讯视频」插件能做什么?

如果你有一个电商小程序,想在其中增加商品介绍视频,少不了会担心搭建视频服务开发成本太大的问题;

如果你有一个餐饮类小程序,想在其中增加菜品介绍视频,少不了会担心带宽成本太高的问题;

如果你有一个门票预订小程序,想在其中增加景点介绍视频,少不了会担心视频资质申请流程太长的问题;

……

而有了「腾讯视频」插件,这些问题将被完美解决,因为「腾讯视频」插件提供的完整视频播放能力,大大方便开发者去给用户提供更好的视频体验。

插件基于腾讯视频的 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....

手机端用户也可以扫码访问

内容来自:微信开放社区《小程序·小故事》栏目
原作者:zombie
任何问题,欢迎前往微信开放社区:https://developers.weixin.qq.com

了解更多小程序开发相关内容,欢迎微信扫描下方二维码关注微信极客WeGeek公众号,共筑微信生态。

「腾讯视频」微信小程序插件介绍的更多相关文章

  1. 微信小程序 插件介绍

    小程序的插件是对一组js接口.自定义组件或页面的封装.插件不能独立运行,必须嵌入在其他小程序中才能被用户使用:而第三方小程序在使用插件时,也无法看到插件的代码.因此,插件适合用来封装自己的功能或服务, ...

  2. 《腾讯游戏人生》微信小程序开发总结

    为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...

  3. 微信小程序插件 - 开发教程

    昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现. 这篇文章,我将会带大家,从0开始,学习如何开发和使用插件. ...

  4. 「小程序JAVA实战」微信小程序简介(一)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-01/ 一直想学习小程序,苦于比较忙,加班比较多没时间,其实这都是理由,很多时候习惯了搬砖,习惯了固 ...

  5. 「小程序JAVA实战」微信小程序工程结构了解(五)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-05/ 微信小程序工程结构 audio,button,canvas,checkbox 都是由4个文件 ...

  6. 腾讯云&搭建微信小程序服务

    准备域名和证书 任务时间:20min ~ 40min 小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书. 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可 ...

  7. 腾讯云开发微信小程序使用体验

    主体内容 代码构成 数据:JSON 配置文件 结构:WXML 模版文件 样式:WXSS 页面样式 交互:JS 脚本逻辑文件 云开发 云数据库 云函数 云存储 WXML 是小程序框架设计的一套标签语言, ...

  8. 什么是微信小程序?简单介绍

    1.微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有色的使用体验. 2.手机端App的另外一种新的展现形式 3.无需下载过多占用手机内存的app,小程序直接打开 ...

  9. 微信小程序 基本介绍及组件

    创建项目 微信开发工具深入介绍 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 基本项目目录 1. 配置 ...

随机推荐

  1. Vue el-date-picker 日期组件的使用

    一:显示年月 <el-date-picker v-model="selectMonth" type="month" placeholder="选 ...

  2. Python 并发编程(上)

    Python 并发编程 参考文献:https://gitee.com/wupeiqi/python_course 并发编程:提升代码执行的效率.原来需要 10 分钟执行,并发处理后可以加快到 1 分钟 ...

  3. tp5 多文件上传

    路由: Route::post('imgs','task/task/uploads'); 控制器代码: // 多文件上传 public function uploads() { //接受参数 $dat ...

  4. phpstrom2019版永久破解

    前言 : 首先进入软件,如果软件需要激活才能进入,可以在idea.medeming.com/jets,中下载激活码,以方便进入 然后按照下面的步骤操作 1.下载补丁 链接:https://pan.ba ...

  5. python检查是否有缺失值(有用)以及list,array合并

    df.isnull().any() 用来判断某列是否有缺失值 df.isnull().all() 用来判断某列是否全部为空值

  6. 2022:checking for Python executable "python2" in the PATH

    目录 一.node报错 说明 1.网上常用方法一(本博主环境无效) 2.网上常用方法二(本博主环境无效) 3.本博主使用方法(当前有效) 1.确保NodeJS环境安装没有问题,如果不会安装,请参考 构 ...

  7. 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 ...

  8. CentOS7.5安装Ansible

    安装ansible: 查看可用的ansible版本: yum list|grep ansible   方法一: 系统可用ansible版本太低,安装epel源: yum install epel-re ...

  9. 5分钟了解Redis的内部实现快速列表(quicklist)

    快速列表简介 在Redis3 .2版本之前,存储列表(list)数据结构使用的是压缩列表(ziplist)和链表(linkedlist),当列表元素个数比较少并且每个元素占用空间比较小的时候,使用压缩 ...

  10. Idea进行spring-boot-devtools热部署以及不生效的问题解决

    实现的方式有两种: spring-boot-devtools spring Loaded 我在此只介绍spring-boot-devtools的使用方法: 1.在pom中直接引入依赖 <depe ...