mpvue 如何使用腾讯视频插件?
1.在小程序微信开放平台:设置 --- 第三方服务里,申请腾讯视频插件
2.申请成功后就可以在项目中使用了
具体使用步骤如下:
1.在项目目录src下的main.js中加入下面代码,这里代码会被编译到app.json中
config: {
// 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
pages: ['^pages/index/main'],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#00B26A',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black',
},
//重点代码
//myPlugin 这个可以随意起,不过要和pages中的对应组件路径保持一致,version是插件版本号 provider是插件appid
"plugins": {
"myPlugin": {
"version": "1.1.1",
"provider": "wxa75efa648b60994b"
}
}
},
2.在项目pages下任意页面 例如index下main.js
config字段中加上以下代码 注意这里的myPlugin字段 和上面的配置路径保持一致
"usingComponents": {
"txv-video": "plugin://myPlugin/video"
}
3.在index.vue 文件
template中写入以下代码 打开微信开发者工具发现视频已经开始播放了
<txv-video vid="m0026z2kibn" playerid="txv1" :autoplay="true"></txv-video>
vid是腾讯视频的vid, 打开腾讯视频网站,打开任意视频,右键 -- 视频信息,就可以看到vid , 右键-- 复制调试信息,就可以把vid在内的视频信息复制出来。
4.视频插件元素支持的属性:
vid 视频id
playerid 播放器标识符
autoplay 是否自动播放
bindtimeupdate 播放进度更新事件,1.1.0后支持
bindstatechange 播放状态变更事件,1.1.0后支持
binderror 错误信息,1.1.0后支持
5.视频插件的更多js方法如下
const txvContext = requirePlugin("myPlugin");
export default {
data() {
return {
txvContext : ""
};
},
onLoad: function (query) {
this.txvContext = txvContext.getTxvContext('txv1');//txv1即播放器组件的playerid值
},
methods:{
//播放
play: function () {
this.txvContext.play();
},
//暂停
pause: function () {
this.txvContext.pause();
},
//进入全屏
requestFullScreen: function () {
this.txvContext.requestFullScreen();
},
//退出全屏
exitFullScreen: function () {
this.txvContext.exitFullScreen();
},
//设置播放速率
playrate: function (e) {
this.txvContext.playbackRate(+e.currentTarget.dataset.rate);
}
}
}mpvue 如何使用腾讯视频插件?的更多相关文章
- uni-app微信小程序开发之引入腾讯视频小程序播放插件
登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...
- 「腾讯视频」微信小程序插件介绍
上期,我们在<从原理到应用,一文带你了解小程序插件能力>一文中介绍了小程序插件的意义.作用以及应用.今天开始,我们会每期与大家分享一款优秀的小程序插件,从使用场景到使用方法,都将作出详细的 ...
- wordpress插入腾讯视频的方法
wordpress插入腾讯视频的方法 最近网站需要插入腾讯视频,但是腾讯视频目前没有分享代码,只有分享到微信,qq,微博等具体选项.百度这个问题,貌似没有很好地解决办法,好像有两个插件可以使用,安装试 ...
- 直播视频插件--sewise player
直播视频插件 -- sewise player 2017-1-9 因为公司要开发一个关于购车直播的新项目,需要在页面引入直播视频,项目组之前都没有做过关于直播类型的项目,所以可以说是真的从各种资源中筛 ...
- Python爬虫实战:爬取腾讯视频的评论
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 易某某 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...
- 20款jQuery 的音频和视频插件
分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...
- 腾讯视频嵌入手机端网站demo - 就像微信文章中一样一样的
页面中的调用如下: <iframe id="video_iframe" class="video_iframe" src="TenVideoPl ...
- 10个最好的 jQuery 视频插件(转)
在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
距离上次发布(android高仿系列)今日头条 --新闻阅读器 (二) 相关的内容已经半个月了,最近利用空闲时间,把今日头条客户端完善了下.完善的功能一个一个全部实现后,就放整个源码.开发的进度就是按 ...
随机推荐
- 在用Scrapy进行爬虫时碰到的错误
1.module() takes at most 2 arguments (3 given) 解决方法:导入Spider类时,是from scrapy import Spider而不是from scr ...
- docker学习笔记(6)——docker场景问题汇总(centos7 由于内核版本低带来的一系列问题,docker彻底卸载,安装、启动日志报错分析)
参考资料: https://nachuan.blog.csdn.net/article/details/96041277 https://www.cnblogs.com/xzkzzz/p/962765 ...
- Java应用层数据链路追踪(附优雅打印日志姿势)
我是3y,一年CRUD经验用十年的markdown程序员常年被誉为优质八股文选手 今天来聊些大家都用得上的东西:数据链路追踪.之前引入了系统的监控来快速定位应用操作系统上的问题,而业务问题呢?在这篇 ...
- 国产化之Arm64 CPU+银河麒麟系统安装.NetCore
背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟,银河麒麟就是一个Linux发行版,数据库使用达梦V8,这个数据库很多概念和Oracle相似,CPU平台的范围:龙芯.飞腾.鲲鹏等. ...
- tp5 单文件上传接口
路由: Route::post('upload','task/task/upload'); 控制器代码: //文件上传接口 public function upload() { $file = req ...
- 分布式 PostgreSQL 集群(Citus)官方示例 - 多租户应用程序实战
如果您正在构建软件即服务 (SaaS) 应用程序,您可能已经在数据模型中内置了租赁的概念. 通常,大多数信息与租户/客户/帐户相关,并且数据库表捕获这种自然关系. 对于 SaaS 应用程序,每个租户的 ...
- tensorflow源码解析之framework-tensor
目录 什么是tensor tensor继承体系 与Eigen3库的关系 什么是tensor_reference tensor_shape tensor_slice 其它结构 关系图 涉及的文件 迭代记 ...
- 微信小程序实现简单的2048
这两天心血来潮,用微信小程序写了一个简单的2048,欢迎各位老铁围观,提出宝贵意见.这里我从0到1赘述一下个人实现流程: 首先去微信公平台(https://mp.weixin.qq.com/)注册一个 ...
- go1.18泛型的简单尝试
今天golang终于发布了1.18版本,这个版本最大的一个改变就是加入了泛型.虽然没有在beta版本的时候尝试泛型,但是由于在其他语言的泛型经验,入手泛型不是件难事~ 官方示例 Tutorial: G ...
- 痞子衡嵌入式:MCUBootUtility v3.5发布,支持串行NOR的ECC及双程序启动
-- 痞子衡维护的 NXP-MCUBootUtility 工具距离上一个大版本(v3.4.0)发布过去半年了,这一次痞子衡为大家带来了版本升级 v3.5.0,这个版本主要有几个非常重要的更新需要跟大家 ...