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 相关文章推荐
jQuery学习基础知识小结
Nov 25 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php实现简单的上传进度条
2015/11/17 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JS模板实现方法
2013/04/03 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python中操作MySQL入门实例
2015/02/08 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
python实现报表自动化详解
2017/11/16 Python
Python timeit模块的使用实践
2020/01/13 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
领导视察欢迎词
2014/01/15 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
python内置进制转换函数的操作
2021/06/02 Python
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL