微信小程序：视频播放 |
您所在的位置：网站首页 › 微信小程序视频怎么全屏播放 › 微信小程序：视频播放 |
|
前言
在微信小程序中，主流的视频播放方式有两种，video组件和腾讯视频第三方插件txv-video。 从代码简洁性、使用便捷性、稳定性以及小程序审核等因素考虑，使用腾讯视频插件较好，劣势是原创视频需要全部移至腾讯视频平台，并且所有视频有至少5秒的广告。 个人更倾向于腾讯视频插件。 video组件 1. 官方文档示例wxml 发送弹幕js function getRandomColor () { let rgb = [] for (let i = 0 ; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } Page({ onReady (res) { this.videoContext = wx.createVideoContext('myVideo') }, inputValue: '', bindInputBlur (e) { this.inputValue = e.detail.value }, bindSendDanmu () { this.videoContext.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } }) 2. 踩坑src中的链接必须使用视频源地址（平台中的地址都进行过加密），否则无法正常播放，并且视频播放窗口的大小、空间等调整都相当麻烦。 腾讯视频源地址获取方法 获得腾讯视频vid：平台播放地址中xxx.html中的xxx部分 例如：https://v.qq.com/x/page/t0944z1gg0b.html中的t0944z1gg0b 使用腾讯视频接口地址，加入vid，获得视频信息json 接口地址：http://vv.video.qq.com/getinfo?&platform=101001&charge=0&otype=json&defn=shd&vids=t0944z1gg0b 获得以下信息 QZOutputJson={"dltype":1,"exem":0,"fl":{"cnt":2,"fi":[{"id":100701,"name":"msd","lmt":0,"sb":1,"cname":"标清;(270P)","br":29,"profile":2,"drm":0,"video":1,"audio":1,"fs":2011377,"super":0,"hdr10enh":0,"sname":"标清","resolution":"270P","recommend":0,"sl":1},{"id":2,"name":"mp4","lmt":0,"sb":1,"cname":"高清;(480P)","br":34,"profile":1,"drm":0,"video":1,"audio":1,"fs":2411991,"super":0,"hdr10enh":0,"sname":"高清","resolution":"480P","recommend":0,"sl":0}]},"hs":0,"ip":"124.79.153.214","ls":0,"preview":66,"s":"o","sfl":{"cnt":0},"tm":1586402528,"vl":{"cnt":1,"vi":[{"br":29,"ch":0,"cl":{"fc":0,"keyid":"t0944z1gg0b.100701"},"ct":21600,"drm":0,"dsb":0,"fmd5":"a5e201a12650301e018258245b67e500","fn":"t0944z1gg0b.m701.mp4","fs":2011377,"fst":5,"fvkey":"FC476AD022E8F8486344F87B9C214543A94150803BF452DFD8E5C70D14B0D6E9C554E5291EA733660E52992B626CA98E8929A6AF6182F47799F2AAF80B58708CB37728F2B3DDAA30A00312986979A1D13120F873408A047A4A255E3AA660DEF5005431B58A0E3A26E40F81661C2BC5F2","head":0,"hevc":0,"iflag":0,"level":0,"lnk":"t0944z1gg0b","logo":1,"mst":8,"pl":null,"share":1,"sp":0,"st":2,"tail":0,"td":"66.64","ti":"尤克里里指弹演奏《动物森友会》背景音乐，清新的感觉","tie":0,"type":3,"ul":{"ui":[{"url":"http://ugcdx.qq.com/","vt":179,"dtc":0,"dt":2},{"url":"http://vhot2.qqvideo.tc.qq.com/50937840/uwMROfz2r5zEIaQXGdGnC2dfhzkPz8itARfiFgGOU57BRa9q/","vt":200,"dtc":0,"dt":2},{"url":"http://video.dispatch.tc.qq.com/uwMROfz2r5zEIaQXGdGnCGdfhzlpKnAu44-4IiF-AJtuMXos/","vt":0,"dtc":0,"dt":2}]},"vh":270,"vid":"t0944z1gg0b","videotype":22,"vr":0,"vst":2,"vw":480,"wh":1.7777778,"wl":{"wi":[]},"uptime":1585824085,"fvideo":0,"cached":1,"fvpint":0,"swhdcp":0,"sshot":3,"mshot":0}]}};去除QZOutputJson=即json报文 建议使用JSON在线解析之类的在线工具格式化json，便于查看 找到json报文中的关键字，拼接出视频源地址，拼接后的地址就可以直接播放了 拼接规则：url + fn + '?vkey=' + fvkey url: getinfo['vl']['vi'][0]['ul']['ui'][0]['url'] fn: getinfo['vl']['vi'][0]['fn'] fvkey: getinfo['vl']['vi'][0]['fvkey'] 如有高清（可根据之前报文中[fi][cname]判断），可通过以下接口获取高清视频信息报文 http://vv.video.qq.com/getkey?format=2 &otype=json&vt=150&vid=t0944z1gg0b&ran=0%2E9477521511726081\&charge=0&filename=t0944z1gg0b.mp4&platform=11 vid及filename都使用vid来构造 拼接规则：url + filename + '?vkey=' + key url: 与getinfo接口相同 filename: getkey['filename'] key: getkey['key']视频源地址获取完成 注意： fvkey和key都是实时变化的，有效时间很短，因此在小程序中必须实时获取新的json报文 这样的视频是没有广告的，是否可以通过发布时的审核有待考证 txv-video腾讯视频插件 1. 添加第三方插件设置->第三方设置->插件管理->添加插件 微信小程序平台查找“腾讯视频”并添加 微信小程序平台 申请添加后，后台会进行审批，通过后即可使用 点击“详情”可查看开发文档 在page的wxml中插入视频元素（playerid必须是全局唯一，可以设置为vid） 在page的json中插入以下代码 "usingComponents": { "txv-video": "plugin://tencentvideo/video" } 在app.json中引入插件，注意插件版本号填最新的版本号 "plugins": { "tencentvideo": { "version": "1.2.4", "provider": "wxa75efa648b60994b" } } 2. 注意事项 个人开发者无法添加 视频中有5秒广告，开发文档中声明付费可以去广告 默认视频播放器的宽度为100%，可直接使用view进行调整 自主上传视频可完整播放，平台收费视频仅可播放片段注： 本文缘于搜了一整天的资料，没找到一篇完整的关于微信小程序引用视频播放的文章，不是只写了video的就是只写了腾讯视频插件的，也没说明白各种缘由，特此撰文记录一整天的研究成果 参考文档：微信小程序官方文档、获取腾讯视频真实地址（涉及清晰度选择） |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |