前言
在微信小程序中，主流的视频播放方式有两种，video组件和腾讯视频第三方插件txv-video。
从代码简洁性、使用便捷性、稳定性以及小程序审核等因素考虑，使用腾讯视频插件较好，劣势是原创视频需要全部移至腾讯视频平台，并且所有视频有至少5秒的广告。
个人更倾向于腾讯视频插件。
video组件
1. 官方文档示例
wxml
<view class="section tc">
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
</view>
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）
<txv-video vid="t0944z1gg0b" playerid="txv1"></txv-video>
- 在page的json中插入以下代码
"usingComponents": {
"txv-video": "plugin://tencentvideo/video"
}
- 在app.json中引入插件，注意插件版本号填最新的版本号
"plugins": {
"tencentvideo": {
"version": "1.2.4",
"provider": "wxa75efa648b60994b"
}
}
2. 注意事项
- 个人开发者无法添加
- 视频中有5秒广告，开发文档中声明付费可以去广告
- 默认视频播放器的宽度为100%，可直接使用view进行调整
- 自主上传视频可完整播放，平台收费视频仅可播放片段
注：
本文缘于搜了一整天的资料，没找到一篇完整的关于微信小程序引用视频播放的文章，不是只写了video的就是只写了腾讯视频插件的，也没说明白各种缘由，特此撰文记录一整天的研究成果
参考文档：微信小程序官方文档、获取腾讯视频真实地址（涉及清晰度选择）
