mpvue 如何使用腾讯视频插件的方法


Posted in Javascript onJuly 16, 2018

1.在小程序微信开放平台:设置 --- 第三方服务里,申请腾讯视频插件

mpvue 如何使用腾讯视频插件的方法

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"
  }

mpvue 如何使用腾讯视频插件的方法

3.在index.vue 文件

template中写入以下代码 打开微信开发者工具发现视频已经开始播放了

<txv-video vid="m0026z2kibn" playerid="txv1" :autoplay="true"></txv-video>

vid是腾讯视频的vid, 打开腾讯视频网站,打开任意视频,右键 -- 视频信息,就可以看到vid , 右键-- 复制调试信息,就可以把vid在内的视频信息复制出来。

mpvue 如何使用腾讯视频插件的方法

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);
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
js正确获取元素样式详解
Aug 07 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
Vue实现自定义下拉菜单功能
Jul 16 #Javascript
vue实现城市列表选择功能
Jul 16 #Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 #Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 #Javascript
JS在if中的强制类型转换方式
Jul 15 #Javascript
微信小程序form表单组件示例代码
Jul 15 #Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 #Javascript
You might like
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
js 上传图片预览问题
2010/12/06 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
用python写asp详细讲解
2013/12/16 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
关于工资低的辞职信
2014/01/14 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
留学生求职信
2014/06/03 职场文书
生物工程专业求职信
2014/09/03 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
优秀班组事迹材料
2014/12/24 职场文书
论文答谢词
2015/01/20 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
公开致歉信
2019/06/24 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL