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 如何使用腾讯视频插件?的更多相关文章

  1. uni-app微信小程序开发之引入腾讯视频小程序播放插件

    登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...

  2. 「腾讯视频」微信小程序插件介绍

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

  3. wordpress插入腾讯视频的方法

    wordpress插入腾讯视频的方法 最近网站需要插入腾讯视频,但是腾讯视频目前没有分享代码,只有分享到微信,qq,微博等具体选项.百度这个问题,貌似没有很好地解决办法,好像有两个插件可以使用,安装试 ...

  4. 直播视频插件--sewise player

    直播视频插件 -- sewise player 2017-1-9 因为公司要开发一个关于购车直播的新项目,需要在页面引入直播视频,项目组之前都没有做过关于直播类型的项目,所以可以说是真的从各种资源中筛 ...

  5. Python爬虫实战:爬取腾讯视频的评论

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 易某某 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  6. 20款jQuery 的音频和视频插件

    分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...

  7. 腾讯视频嵌入手机端网站demo - 就像微信文章中一样一样的

    页面中的调用如下: <iframe id="video_iframe" class="video_iframe" src="TenVideoPl ...

  8. 10个最好的 jQuery 视频插件(转)

    在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...

  9. Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO

    距离上次发布(android高仿系列)今日头条 --新闻阅读器 (二) 相关的内容已经半个月了,最近利用空闲时间,把今日头条客户端完善了下.完善的功能一个一个全部实现后,就放整个源码.开发的进度就是按 ...

随机推荐

  1. JQuery常见方法

    <!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Python字典的创建与复制

    Python 字典练习题 1.字典的创建 1.1 普通创建 d={'name':'Allen','age':21,'gender':'male'} print(d) # {'name': 'Allen ...

  3. 手把手教你使用 Java 在线生成 pdf 文档

    一.介绍 在实际的业务开发的时候,研发人员往往会碰到很多这样的一些场景,需要提供相关的电子凭证信息给用户,例如网银/支付宝/微信购物支付的电子发票.订单的库存打印单.各种电子签署合同等等,以方便用户查 ...

  4. XSS攻击防范

    前端安全系列之XSS攻击防范 1.使用textContent 2.使用HTML转义 把JS中的标签转成字符 3.对于链接跳转 禁止含有'javascript:'开头的字符 4.标签属性中含有恶意执行代 ...

  5. mysql卡顿问题查找和解决方法

    mysql卡顿问题查找和解决方法 版权一.所遇问题        写在前边的废话:今天面试阿里的时候问到过类似问题,以前做调优的时候都是现查现用,缺乏总结,面试时答得也不好,今天趁此机会做一个梳理,知 ...

  6. SQLserver建表规则

    --执行环境:生产环境 / beta环境--备注:文件开头写上描述或者原因.项目USE database --例如 USE LZB GO CREATE TABLE Ymtable1 ( iOrderI ...

  7. Java study 4

    JAVA 学习第四天 今日学习内容 快捷键.复习.注释.字面量 快捷键 学习地址:IJ快捷键 复习 jdk下载.安装.部署环境.第一个Java程序入门学习,环境变量path 注释 注释:顾名思义就是用 ...

  8. CF1485X Codeforces Round #701

    D Multiples and Power Differences (构造) 题目大意:给一个n*m的矩阵a,a[i][j]在1到16之间.现在要构造矩阵b,需要满足如下条件: 1.b[i][j]在1 ...

  9. Makefile学习(一)

       objects = main.o kbd.o command.o display.o \              insert.o search.o files.o utils.o       ...

  10. python 列表推导式,生成器推导式,集合推导式,字典推导式简介

    1.列表推导式multiples = [i for i in range(30) if i % 2 is 0]names = [[],[]]multiples = [name for lst in n ...