「腾讯视频」微信小程序插件介绍
上期,我们在《从原理到应用,一文带你了解小程序插件能力》一文中介绍了小程序插件的意义、作用以及应用。今天开始,我们会每期与大家分享一款优秀的小程序插件,从使用场景到使用方法,都将作出详细的介绍。
第一期与大家分享的小程序插件,是「腾讯视频」插件。
「腾讯视频」插件能做什么?
如果你有一个电商小程序,想在其中增加商品介绍视频,少不了会担心搭建视频服务开发成本太大的问题;
如果你有一个餐饮类小程序,想在其中增加菜品介绍视频,少不了会担心带宽成本太高的问题;
如果你有一个门票预订小程序,想在其中增加景点介绍视频,少不了会担心视频资质申请流程太长的问题;
……
而有了「腾讯视频」插件,这些问题将被完美解决,因为「腾讯视频」插件提供的完整视频播放能力,大大方便开发者去给用户提供更好的视频体验。
插件基于腾讯视频的 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. 配置 ...
随机推荐
- Windows11中如何使用旧版本IE浏览器打开网页
Windows11删除了旧版本IE浏览器,完全采用了Edge,但是我们进行网站测试时有时仍会用到IE浏览器,那么可以按照以下步骤启用: 1.进入Edge浏览器中,打开设置,进入默认浏览器选项下: 修改 ...
- IntelliJ:自动生成JavaBean的读写方法
1.定义好一个class,其中写好private属性. 2.右键点击该class,在generate中选择自动根据模板生成的读写方法.
- PhpStudy代码执行后门
0x00 概述 只需要两个参数 Accept-Encoding: gzip,deflate Accept-Charset: Base64编码(PHP代码) 0x01 利用代码 加群可以下载:87369 ...
- C语言刷二叉树(一)基础部分
二叉树基础部分 144. 二叉树的前序遍历 方法一:递归 /** * Definition for a binary tree node. * struct TreeNode { * int val; ...
- Appium+ios环境搭建
appium 环境搭建 安装homebrew(Mac OSX上的软件包管理工具) $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuse ...
- Windows下Apache服务多个端口反向代理配置
修改\Apache24\conf\httpd.conf: 1.修改安装包地址: Define SRVROOT "/Apache24" 修改为: Define SRVROOT &qu ...
- Kubernetes系列(四) StatefulSet
作者: LemonNan 原文地址: https://juejin.im/post/6870071267438329869 Kubernetes系列(四) StatefulSet Kubernetes ...
- mysql数据库-8.0安装及环境搭建
1.MySQL8.0 For Windows zip包下载地址 https://dev.mysql.com/downloads/file/?id=476233,进入页面后点击底部&quo ...
- 部署 Nginx +uwsgi+centos7+django+supervisor 项目
部署CRM项目 前言 使用软件 nginx 使用nginx是为了它的反向代理功能,项目会通过Django+uWSGI+Nginx进行服务器线上部署. uWSGI python web服务器开发使用WS ...
- http请求中的三种参数类型
1.URL参数:实际就是querry string的方式,参数拼接在url之后以?隔开,参数之间以&连接. 优点:简单,页面跳转比较快. 缺点:1.基于浏览器对urk长度有限制,不能超过204 ...