前言
在微信小程序中，主流的視頻播放方式有兩種，video組件和騰訊視頻第三方插件txv-video。
從代碼簡(jiǎn)潔性、使用便捷性、穩(wěn)定性以及小程序?qū)徍说纫蛩乜紤]，使用騰訊視頻插件較好，劣勢(shì)是原創(chuàng)視頻需要全部移至騰訊視頻平臺(tái)，并且所有視頻有至少5秒的廣告。
個(gè)人更傾向于騰訊視頻插件。
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">發(fā)送彈幕</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中的鏈接必須使用視頻源地址（平臺(tái)中的地址都進(jìn)行過(guò)加密），否則無(wú)法正常播放，并且視頻播放窗口的大小、空間等調(diào)整都相當(dāng)麻煩。
騰訊視頻源地址獲取方法
- 獲得騰訊視頻vid：平臺(tái)播放地址中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":"標(biāo)清;(270P)","br":29,"profile":2,"drm":0,"video":1,"audio":1,"fs":2011377,"super":0,"hdr10enh":0,"sname":"標(biāo)清","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":"尤克里里指彈演奏《動(dòng)物森友會(huì)》背景音樂(lè)，清新的感覺(jué)","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報(bào)文
建議使用JSON在線解析之類的在線工具格式化json，便于查看
- 找到j(luò)son報(bào)文中的關(guān)鍵字，拼接出視頻源地址，拼接后的地址就可以直接播放了
拼接規(guī)則：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'] - 如有高清（可根據(jù)之前報(bào)文中[fi][cname]判斷），可通過(guò)以下接口獲取高清視頻信息報(bào)文
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來(lái)構(gòu)造
拼接規(guī)則：url + filename + '?vkey=' + key
url: 與getinfo接口相同
filename: getkey['filename']
key: getkey['key']
視頻源地址獲取完成
注意：
- fvkey和key都是實(shí)時(shí)變化的，有效時(shí)間很短，因此在小程序中必須實(shí)時(shí)獲取新的json報(bào)文
- 這樣的視頻是沒(méi)有廣告的，是否可以通過(guò)發(fā)布時(shí)的審核有待考證
txv-video騰訊視頻插件
1. 添加第三方插件
-
設(shè)置->第三方設(shè)置->插件管理->添加插件
微信小程序平臺(tái) -
查找“騰訊視頻”并添加
微信小程序平臺(tái) - 申請(qǐng)?zhí)砑雍?，后臺(tái)會(huì)進(jìn)行審批，通過(guò)后即可使用
- 點(diǎn)擊“詳情”可查看開(kāi)發(fā)文檔
- 在page的wxml中插入視頻元素（playerid必須是全局唯一，可以設(shè)置為vid）
<txv-video vid="t0944z1gg0b" playerid="txv1"></txv-video>
- 在page的json中插入以下代碼
"usingComponents": {
"txv-video": "plugin://tencentvideo/video"
}
- 在app.json中引入插件，注意插件版本號(hào)填最新的版本號(hào)
"plugins": {
"tencentvideo": {
"version": "1.2.4",
"provider": "wxa75efa648b60994b"
}
}
2. 注意事項(xiàng)
- 個(gè)人開(kāi)發(fā)者無(wú)法添加
- 視頻中有5秒廣告，開(kāi)發(fā)文檔中聲明付費(fèi)可以去廣告
- 默認(rèn)視頻播放器的寬度為100%，可直接使用view進(jìn)行調(diào)整
- 自主上傳視頻可完整播放，平臺(tái)收費(fèi)視頻僅可播放片段
注：
本文緣于搜了一整天的資料，沒(méi)找到一篇完整的關(guān)于微信小程序引用視頻播放的文章，不是只寫(xiě)了video的就是只寫(xiě)了騰訊視頻插件的，也沒(méi)說(shuō)明白各種緣由，特此撰文記錄一整天的研究成果
參考文檔：微信小程序官方文檔、獲取騰訊視頻真實(shí)地址（涉及清晰度選擇）
