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);
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用Vue.js开发微信小程序开源框架mpvue解析
前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮
-
mpvue中配置vuex并持久化到本地Storage图文教程解析
# 配置vuex和在vue中相同,只是mpvue有一个坑,就是不能直接在new Vue的时候传入store. 步骤: 1.在src目录下新建一个store目录,结构如下(官方推荐: vuex.vuejs.org/zh-cn/struc-) 2. 在main.js中引入你的store, 并绑定到Vue构造函数的原型上,这样在每个.vue的组件都可以通过this.$store访问store对象. 3. ok,可以使用了.我说一下vuex官方推荐的使用方案(可适应大型应用). 首先在mutation
-
基于mpvue的小程序项目搭建的步骤
前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast
-
浅谈使用mpvue开发小程序需要注意和了解的知识点
一.实例生命周期 除了Vue本身的生命周期处,mpvue还兼容了小程序的生命周期,这部分生命周期的钩子来源于微信小程序的Page,除特殊情况外,不建议使用小程序的生命周期钩子. app 部分: onLaunch,初始化 onShow,当小程序启动,或从后台进入前台显示 onHide,当小程序从前台进入后台 page 部分: onLoad,监听页面加载 onShow,监听页面显示 onReady,监听页面初次渲染完成 onHide,监听页面隐藏 onUnload,监听页面卸载 onPullDown
-
详解基于mpvue的小程序markdown适配解决方案
美团点评近日开源了 mpvue ,这是一个使用 Vue.js 开发小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. mpvue 的核心目标是提高开发效率,增强开发体验.使用该框架,开发者只需初步了解小程序开发规范.熟悉 Vue.js 基本语法即可上手.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js
-
mpvue构建小程序的方法(步骤+地址)
mpvue是一个使用Vue.js开发小程序的前端框架(美团的开源项目).框架基于Vue.js核心,mpvue修改了Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验. mpvue你可以使用你熟悉的vue框架语法,双向绑定让你不用再使用wx的this.setData了,你可以使用npm方便的引入第三方了,真的是贫穷限制了我的想象力啊.个人感觉mpvue比wepy更加简单,上手更加方便,mpuve五分钟教程快速构建.
-
mpvue 如何使用腾讯视频插件的方法
1.在小程序微信开放平台:设置 --- 第三方服务里,申请腾讯视频插件 2.申请成功后就可以在项目中使用了 具体使用步骤如下: 1.在项目目录src下的main.js中加入下面代码,这里代码会被编译到app.json中 config: { // 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去 pages: ['^pages/index/main'], window: { backgroundTextStyle: 'ligh
-
在小程序中使用腾讯视频插件播放教程视频的方法
在我们开发的一个小程序里面,为了给客户了解一些教程内容,我们需要增加一个在线播放视频的模块,考虑过直接使用视频组件播放服务器上的视频不成功,因此使用腾讯视频插件来播放最终测试成功.本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式,并重点介绍视频插件方式的处理过程. 1.使用视频组件播放视频 由于是我们自己录制的视频内容,本来想直接通过视频组件来播放自己服务器上的视频,理想很丰满,现实很骨感,不知道是视频内部比较大的原因还是腾讯禁止,虽然在开发工具上测试的时候可以播放,不过最终发
-
js获取腾讯视频ID的方法
本文实例讲述了js获取腾讯视频ID的方法.分享给大家供大家参考,具体如下: 使用js截取腾讯视频的ID需要知道地址规则,只有知道了规则才可以获得到了. 做项目时候遇到添加视频的问题,比如用户复制腾讯视频的链接,以这个为例(http://v.qq.com/x/cover/ypdy6korrry8w5a/u0332wyg5oa.html) 现在需要截取.html前面以及最后一个斜杠后面的内容(u0332wyg5oa);腾讯视频点击下面分享时会出现这样一段代码: 复制代码 代码如下: <iframe
-
Python爬取腾讯视频评论的思路详解
一.前提条件 安装了Fiddler了(用于抓包分析) 谷歌或火狐浏览器 如果是谷歌浏览器,还需要给谷歌浏览器安装一个SwitchyOmega插件,用于代理服务器 有Python的编译环境,一般选择Python3.0及以上 声明:本次爬取腾讯视频里 <最美公里>纪录片的评论.本次爬取使用的浏览器是谷歌浏览器 二.分析思路 1.分析评论页面 根据上图,我们可以知道:评论使用了Ajax异步刷新技术.这样就不能使用以前分析当前页面找出规律的手段了.因为展示的页面只有部分评论,还有大量的评论没有被刷新出
-
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
本文实例讲述了PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法.分享给大家供大家参考,具体如下: 很多用户不知道如何复制flash地址,只能在程序中帮他们替换了: <?php /** * 支持优酷.土豆.腾讯视频html到swf转换 */ function convert_html_to_swf($url = '') { if(!is_string($url) || empty($url)) return ; if(strpos($url, 'swf')) return
-
jQuery实现仿腾讯视频列表分页效果的方法
本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法.分享给大家供大家参考.具体如下: 这里使用jQuery仿腾讯视频列表分页效果,无刷新分页特效,点击分页按钮,无刷新进入下一页内容列表. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q
-
推荐10个2014年最佳的jQuery视频插件
在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个jQuery插件能够,让你很方便将视频作为网站的背景. 它可以默默地播放一个视频,或用一个列表让用户选择他们喜欢的进行播放. 这个插件基于Video.js构建.此外如果有些设备不支持自动播放支持显示成图片. 2. jPlayer jPlayer是一个可定制和更换皮肤的开源JQuery的播放器,允许在网页中播放音频
-
使用python实现抓取腾讯视频所有电影的爬虫
用python实现的抓取腾讯视频所有电影的爬虫 # -*- coding: utf-8 -*- import re import urllib2 from bs4import BeautifulSoup import string, time import pymongo NUM =0 #全局变量,电影数量 m_type = u'' #全局变量,电影类型 m_site = u'qq' #全局变量,电影网站 #根据指定的URL获取网页内容 def gethtml(url): req = urlli
-
微信小程序嵌入腾讯视频源过程详解
首先我们有一个接口可以获取动态的vkey https://vv.video.qq.com/getinfo?otype=json&appver=3.2.19.333&platform=11&defnpayver=1&vid= 获取的数据格式是这样的 QZOutputJson={"dltype":1,"exem":0,"fl":{"cnt":2,"fi":[{"id&q
-
微信小程序如何播放腾讯视频的实现
1.背景 因为当时需要做视频播放,后台存放视频文件又不现实.所以,做了一个能解析腾讯视频地址的并播放视频的小程序. 2.介绍 小程序里的解析腾讯视频地址的代码是参考了一个开源项目you-get写的,把里面的腾讯视频下载的python代码写成了JS代码. 3.腾讯视频ID从哪获取 1.一般播放一个腾讯视频的时候播放地址为https://v.qq.com/x/page/w0647n5294g.html. .html到最后一个/之间的字符串即为腾讯视频id.如https://v.qq.com/x/pa