微信小程序如何引入视频插件,解决文娱资质问题(uni-app 同样适用) 解决bindtimeupdate 不生效问题!
如果您已经成功引入视频插件, 想解决bindtimeupdate 不生效问题,请直接跳转到我的另一篇文章,解决bindtimeupdate 不生效问题!
如果你们近期在做微信小程序,可以先浏览一下,避免踩坑.
如果你们的微信小程序,含有视频的话,首先你必须要有文娱资质,如果没有的话,一定要做开关,在审核前打开开关隐藏视频,审核通过后再放开.如果已经晚了的话现在有两种方案,一种是申请文娱资质,然后再提交审核,(这个资质特别难搞).要么就引入微信小程序第三方视频插件,下面我会详细叙述插件如何使用,和注意事项.
第一步
登录微信公众平台,进入微信小程序后台管理,点击设置–>点击第三方设置 -->插件管理–>添加插件,然后搜索腾讯视频,点击添加即可.如下图
第二步
在项目中引入视频播放组件
// 在app.json里面引入插件,注意插件版本号填最新的版本号
"plugins": {"tencentvideo": {"version": "1.4.6", //这块是版本号"provider": "wxa75efa648b60994b" //这块是腾讯视频插件的id 不必修改}
}
微信开发者工具开发:代码所放位置如下图
uni-app开发:代码所放位置如下图
第三步
在需要使用插件的界面配置json(这块的位置就是,你准备在哪个界面使用视频组件,就在哪个界面的json里面进行配置)
配置项:
// 在你们的json里面插入
"usingComponents": {"txv-video": "plugin://tencentvideo/video"
}
微信开发者工具开发:代码所放位置如下图
uni-app开发:代码所放位置如下图
uni-app开发无需在哪个界面使用在哪配置,可以直接全局配置
第四步
在项目中使用
在你需要使用的界面html中 写上以下代码
vid 是你上传腾讯视频后的视频id 等同于 src 的意思.
// 在你们的wxml上这样插入视频元素
<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>
如果你不需要过的的操作,只是让视频播放,那么看到这里就足够使用了.
这个组件的配置项和video差不多,具体的可以看官方文档,我放到下面了
配置项详情:
<txv-video vid="e0354z3cqjp" // 可使用vid="{{vid}}" wx:if="{{vid}}" 的方式应用data变量,要注意确保vid存在,详情可见文档最后面的tipsplayerid="txv1" //playerid必须要全局唯一,可以设置为vidautoplay="{{true}}" // 是否自动播放
></txv-video>
// 支持slot,用于在video上显示UI
<txv-video vid="e0354z3cqjp" // 可使用vid="{{vid}}" wx:if="{{vid}}" 的方式应用data变量,要注意确保vid存在,详情可见文档最后面的tipsplayerid="txv1" width="{{100%}}" //自定义宽度height="{{'auto'}}" // 自定义高度autoplay="{{true}}"> // 是否自动播放<view class='txv-video-slot'>video slot</view>
</txv-video>
组件元素支持的自定义属性:
- vid 视频id
- playerid 播放器标识符,需全局唯一,用于获取Video Context,进而手动控制播放
- width 视频宽度
- height 视频高度
- isHiddenStop 是否在不可见区域自动停止播放,默认false,即滑到不可见区域不停止播放
- isNeedMutex 是否互斥播放,默认true,即播放一个视频另一个播放的视频自动被暂停
组件元素支持的video属性,属性取值与video一致(插件支持小程序video的大部分属性)
- autoplay 是否自动播放
- poster 视频海报,会根据视频vid拿一个默认值
- usePoster 是否使用海报图
- direction 视频全屏时方向
- objectFit 视频填充方式
- controls 视频播放控件
- showCenterPlayBtn 是否显示中间播放按钮
/ V1.2.4 /
- defn 视频清晰度,默认auto,可选值:流畅,标清,高清,超清,蓝光,4K,杜比
/ V1.2.6 /
- title 视频全屏时显示的标题
/ V1.3.3 /
- vslideGesture Boolean,非全屏下,上下滑动调节亮度和音量,默认false
- vslideGestureInFullscreen Boolean,全屏下,上下滑动调节亮度和音量,默认true
- enablePlayGesture Boolean,双击播放或者暂停视频,默认false
- showMuteBtn Boolean,是否显示静音按钮,默认false
- playBtnPosition String,播放按钮位置,默认bottom,可选值center
组件元素抛出的自定义事件
- bindstatechange 播放状态变更事件,包含loading(资源加载中), ready(资源加载完成),
playing(播放中,包含广告和视频), ended(广告和视频都播放完成),
error,回调函数接受两个参数newstate,oldstate
组件抛出了小程序video抛出的所有事件,事件含义与video一致:
bindplay 播放
bindpause 暂停
bindended 播放结束,e.detail.isAd可以用来区分是广告还是视频
bindfullscreenchange 全屏
bindtimeupdate 播放进度更新事件
binderror 视频播放错误信息
插件 js api
const TxvContext = requirePlugin("tencentvideo"); let txvContext = TxvContext.getTxvContext('txv1') // txv1即播放器组件的playerid值//手动操作video
txvContext.play(); // 播放
txvContext.pause(); // 暂停
txvContext.requestFullScreen(); // 进入全屏
txvContext.exitFullScreen(); // 退出全屏
txvContext.playbackRate(+e.currentTarget.dataset.rate); // 设置播放速率
txvContext.seek(time); //快进到某个时间//获取当前播放视频上下文,多个实例时特别有用
var currPlayerId=TxvContext.getLastPlayId(); //获取当前播放视频的playerid
var currPlayerContxt=TxvContext.getTxvContext(currPlayerId) //获取当前播放视频的上下文,可进行play,pause等操作//开启和关闭播放器日志,默认关闭
TxvContext.openLog() //开启
TxvContext.closeLog() //关闭/* V1.2.4 */
* `sendDanmu` 发送弹幕,具体数据格式请看小程序官网video组件
* `hideVideo` 隐藏视频插件里面的播放器
* `showVideo` 显示视频插件里面的播放器
* `showContainer` 显示视频插件里面的最外层容器
* `hideContainer` 隐藏视频插件里面的最外层容器/* V1.2.5 */
* `hideVideoWithVoice` 隐藏视频插件,如果隐藏前正在播放,则隐藏后继续播
* `showVideoWithVoice` 显示视频插件,跟上面的hideVideoWithVoice配合使用/* V1.2.6 */* `replay` 视频播放完成后,调用此方法可进行重播用法:txvContext.replay(vid),接受一个参数,需要重播的vid骚操作,可以通过给vid前面或者后面加空格触发重播而不是调用replay方法,如:vid+=" ";this.setData({vid})
版本功能迭代
V1.2.4及之前版本
- 全局只播放一个视频,并且视频滑出可见区域自动停止播放
- 支持slot
- 支持竖屏,海报
- 支持广告暂停和全屏
V1.2.5
- 支持全屏下设置亮度
- 支持全屏下切换清晰度
V1.3.3
- cover-view改为view
常见问题
- 找不到playerid为txv1的txv-video组件
要注意在小程序根目录app.json里声明对组件的依赖,在页面的json里声明对插件的使用。详见ps://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)与示例项目 - 常见视频播放错误
- 播放器提示是P.0开头表示捕获到video的binderror事件,
可能的原因是MEDIA_ERR_SRC_NOT_SUPPORTED;MEDIA_ERR_DECODE;MEDIA_ERR_NETWORK - 播放器提示是G.开头,是接口错误,后面提示的数字是返回的错误码
- 播放器提示是L开头,大概率是触发了逻辑错误
tips
- playerid必须要全局唯一,可以设置为vid
- 想实现点击视频任何区域,实现视频全屏,经测试发现ios下,部分机型不能正常捕获到video或者容器的tap事件,推荐视频区域不要用video,假写成一张图片和一个播放按钮,点击的时候全屏播放视频
- const TxvContext = requirePlugin(“tencentvideo”);
可以打印TxvContext,插件暴露的接口都在这里面 - 强烈建议在拿到vid后在渲染视频组件 否则会报错,因为视频组件初始化一定要给vid
Q&A
- Q. 谁不能使用这个插件?
- A. 个人开发者不能使用视频插件,即使使用了,按理说提审会被拒绝
- Q. 视频播放资质问题?
- A. 使用视频插件播放不要求小程序主体具有文娱=》视频资质是因为视频插件具有文娱=》视频资质了,如果小程序主体还有用其他方式播放视频,那也需要文娱=》视频资质的。需要注意,如果小程序主体还有其他的需要资质功能,需要自己去办理,详细资质请看
- Q. 视频来源
- A. 禁止盗播腾讯视频版权视频,盗播是不能正常播放的,其他视频可以免费播放
微信小程序如何引入视频插件,解决文娱资质问题(uni-app 同样适用) 解决bindtimeupdate 不生效问题!相关推荐
- PHP使用weui,微信小程序WeUI引入
引入组件 通过 useExtendedLib 扩展库 的方式引入 1.报错Component is not found in path "miniprogram_npm/weui-minip ...
- 微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份 进行了网站维护,维护之后,不能"生成在 ...
- 微信小程序中引入ttf字体
微信小程序中引入ttf字体 解决常规引入ttf不生效问题 第一步:将ttf字体转为base64(转码网址:https://transfonter.org) 第二步:在static文件夹下新增font文 ...
- 在微信小程序中,使用wxParse插件解析HTML/md富文本
1. 在微信小程序中,使用wxParse插件解析HTML富文本 下载文件 GitHub地址:https://github.com/icindy/wxParse 解压文件,在解压后的文件夹里找到wxPa ...
- 微信小程序 RTMP 音视频 通话 ffmpeg_WebRTC与微信小程序音视频互通方案设计与实现...
背景 在之前的WebRTC实时音视频通话之语音通话设计与实践中介绍了58 TEG部门基于 WebRTC 的实时音视频通话解决方案. 考虑到腾讯微信的小程序平台提供了音视频通话与直播的支持,如果能打通基 ...
- 微信小程序使用物流查询插件
微信小程序使用物流查询插件 文章目录 微信小程序使用物流查询插件 添加插件 添加成功 使用方式 声明使用插件 引入插件包 效果图 物流查询插件 添加插件 登录微信公众平台后台->设置->第 ...
- 微信小程序模仿开眼视频app(一)——视频首页、视频详情、分类
可到我的github账号上去copy文件 先展示一下我实现了的功能吧 提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
- 微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
- 使用Filler4提取微信小程序中的视频
因为需要做防范电信网络诈骗的宣传,但是相关视频网站的内容都不适合宣传使用,最后在微信小程序搜索到一些合适的内容,但是微信小程序的视频不能直接下载,就考虑通过获得文件地址直接下载. 1.机器环境 系统: ...
- 视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程 北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
最新文章
- spring AspectJ的Execution详解
- .net core linux安装
- (( 系统的自协调与抽象而成的自动反馈
- qt中颜色对话框弹出时应用程序输出栏出现QWindowsWindow::setGeometry: Unable to set geometry 180x30+345+311 (frame: 202x8
- 案例 月工作列表 c# 1614099857
- 消息称快手已通过港交所聆讯 计划2月第一周上市
- python gzip压缩_Python gzip –压缩解压缩
- 计算机一级多分,多少分能过一级计算机考试
- 真机试用深度linux,推荐使用
- 访问限制:由于对必需的库E:\j2sdk\jre\lib\rt.jar具有一定限制,因此无法访问类型JFrame
- 优达前端课程免费分享
- c盘瘦身。清理四个垃圾文件夹
- 计算机怎么让隐藏的文件夹不能搜索,电脑怎么巧妙隐藏文件夹让人找不到?隐藏电脑文件方法教程...
- 第九批车船税减免名单公示 新能源汽车共计444款
- java写excel
- Spring之配置 multipartResolver 解析器、上传文件、处理文件
- SOC设计之AMBA总线-AHB总线详解
- 2020年09月-电子学会青少年等级考试C语言(二级)真题与解析
- 面试ppt计算机自我介绍,面试中技巧及怎样自我介绍.ppt
- Mac系统好的修图软件,收藏有备无患
热门文章
- 初识智遥工作流软件——表单开发篇2
- 初始智遥工作流软件——流程设置篇
- winxp找不到服务器或 dns 错误,详解网络无法使用DNS错误的修复步骤
- java毕业设计——基于java+AngularJS+jsp的配件营销系统设计与实现(毕业论文+程序源码)——配件营销系统
- 计算机登录账户删除著名恢复,win10系统删除计算机无用账户的恢复步骤
- 看图说话之二叉树的前序,中序,后序,层次遍历方式
- 客户价值度和活跃度建模
- 2020家用千兆路由器哪款好_家用路由器哪个牌子好穿墙2020
- EA开发系列---技术指标的使用
- 小鹿爬虫系列——静态网站页面爬取