1. 程式人生 > >微信小程式video元件呼叫騰訊視訊的解決方案

微信小程式video元件呼叫騰訊視訊的解決方案

最近在折騰微信小程式,需要引用一些騰訊視訊網站上的視訊去播放,很多地方都是教人用F12抓一個mp4地址,這根本不行,因為那個地址是動態的,大概一兩個小時就失效了。

翻了微信小程式的官方社群這方面的問題只有人提問,沒有人有正確的回答(包括官方人員也都不懂),那就只能自己研究了。還好不是很難,折騰了一晚上終於搞定了。

1、首先我們從騰訊視訊網站上找到一個視訊網頁的連線,格式是這樣的

https://v.qq.com/x/page/b0136et5ztz.html

上面我標紅色的是視訊的vid

2、我們把vid放到介面地址上變成 

http://vv.video.qq.com/getinfo?vids=b0136et5ztz&platform=101001&charge=0&otype=json

3、直接訪問返回的是

QZOutputJson={"dltype":1,"exem":0,"fl":{"cnt":2,"fi":[{"id":100701,"name":"msd","lmt":0,"sb":1,"cname":"流暢;(180P)","br":29,"drm":0,"video":1,"fs":35776912,"sl":1},{"id":2,"name":"mp4","lmt":0,"sb":1,"cname":"高清;(480P)","br":34,"drm":0,"video":1,"fs":74129447,"sl":0}]},"hs":0,"ip":"119.137.195.73","ls":0,"preview":1186,"s":"o","sfl":{"cnt":0},"tm":1503504934,"vl":{"cnt":1,"vi":[{"br":29,"ch":0,"cl":{"fc":0,"keyid":"b0136et5ztz.100701"},"ct":21600,"drm":0,"dsb":0,"fmd5":"87d7d2ef15f55a456bcdb359dd580795","fn":"b0136et5ztz.m701.mp4

","fs":35776912,"fst":5,"fvkey":"EBB1F5C7B5100A3DA80802119E3FF9D0AAE3DA6670594D507B02AD489CF21D2868B0803B76F7434CE51B5C70D75554D68ED24A49EE3DE4791E0BA58444A77756FA7CBC6FB1B3E579F44F87AFB1CB79E8522A48576A4949037A5EDC1C842A9EF7536E090EBD018BB2","head":0,"hevc":0,"iflag":0,"level":0,"lnk":"b0136et5ztz","logo":1,"mst":8,"pl":null,"share":1,"sp":0,"st":2,"tail":0,"td":"1186.92","ti":"解密潮汕多神信仰","type":3,"ul":{"ui":[{"url":"http://113.105.167.156/vhot2.qqvideo.tc.qq.com/AuRJoSSIabzpOb1RsXSviFl-nYwRDSZoFU5OpwBhfrAk/
","vt":200,"dtc":0,"dt":2},{"url":"http://113.105.167.155/vhot2.qqvideo.tc.qq.com/AuRJoSSIabzpOb1RsXSviFl-nYwRDSZoFU5OpwBhfrAk/","vt":200,"dtc":0,"dt":2},{"url":"http://113.105.167.154/vhot2.qqvideo.tc.qq.com/AuRJoSSIabzpOb1RsXSviFl-nYwRDSZoFU5OpwBhfrAk/","vt":200,"dtc":0,"dt":2},{"url":"http://video.dispatch.tc.qq.com/62098754/","vt":0,"dtc":0,"dt":2}]},"vh":272,"vid":"b0136et5ztz","videotype":27,"vr":0,"vst":2,"vw":480,"wh":1.7647059,"wl":{"wi":[]}}]}}; 

4、我們把前面的QZOutputJson=跟最後的 ; 過濾掉,得到一個json字串了。解析它變成json物件,然後把標紅的三個部分組合一下,順序是 

url + fn + '?vkey=' + fvkey 

例如上面這串,組合下來就是 

http://113.105.167.156/vhot2.qqvideo.tc.qq.com/AuRJoSSIabzpOb1RsXSviFl-nYwRDSZoFU5OpwBhfrAk/b0136et5ztz.m701.mp4?vkey=EBB1F5C7B5100A3DA80802119E3FF9D0AAE3DA6670594D507B02AD489CF21D2868B0803B76F7434CE51B5C70D75554D68ED24A49EE3DE4791E0BA58444A77756FA7CBC6FB1B3E579F44F87AFB1CB79E8522A48576A4949037A5EDC1C842A9EF7536E090EBD018BB2

這個地址就可以直接放在小程式的video元件裡面播放了。

注意:由於騰訊視訊的地址vkey是定時變化的,所以肯定是不能寫死在程式裡面的。必須走後端照著上面寫的方式抓取介面,過濾掉無用字串,解析json,組合地址,通過介面返回給小程式video元件的src即可正常播放。

當然如果你的後端解析json比較麻煩的(例如古老的asp ^_^),可以把第2步最後的json去掉或者改成xml,直接解析xml也一樣。

相關推薦

程式video元件呼叫視訊解決方案

最近在折騰微信小程式,需要引用一些騰訊視訊網站上的視訊去播放,很多地方都是教人用F12抓一個mp4地址,這根本不行,因為那個地址是動態的,大概一兩個小時就失效了。翻了微信小程式的官方社群這方面的問題只有人提問,沒有人有正確的回答(包括官方人員也都不懂),那就只能自己研究了。還

uni-app程式開發之引入視訊程式播放外掛

登入微信小程式管理後臺新增騰訊視訊播放外掛:   正式開始使用騰訊視訊小程式外掛之前需先在微信公眾平臺 -> 第三方設定 -> 外掛管理處新增外掛,如下圖所示:  在uni-app中引入外掛程式碼:   注意在使用uni-app開發微信小程式時與直接會用微信網頁開發工具開發微信小程式

程式開發系列——3. 雲伺服器配置

摘要:本文說明了在騰訊雲伺服器上通過“微信小程式專用解決方案”搭建、部署後端伺服器及基礎服務的過程。 瞭解了基本的開發工具以後,我們開始配置伺服器相關的資訊,要完成後端伺服器的配置,整體流程是這樣的: 騰訊雲針對上述痛點,為開發者們提供了一個微信小程式的

程式埋點之移動分析使用

1.註冊完成以後會生成應用程式註冊和應用金鑰妥善保管3.下載SDK檔案可以NPM直接引入也可以官網手動下載(手動下載)以後需將將檔案放置於專案檔案的根目錄)![這裡寫圖片描述](https://img-blog.csdn.net/2018081411165622

程式swiper元件滑動卡死現象解決

專案中用swiper作為滑動展示展品頁面,swiper-item高達49個 在使用過程中出現了滑動卡死的現象,解決方案如下 在swiper裡面監聽bindanimationfinish事件 bindanimationfinish在swiper卡死的時候也會觸發(神奇)

程式程式碼最大限制2M的解決方案

瞭解小程式有最大程式碼量限制之前需要先了解微信小程式的本質:前端近幾年都處於技術爆炸時期, react 最早的是facebook開源的開發框架----react,支援移動網頁和原生app的開發(react native),提倡一次學習,全渠道開發。目的是讓產品研發更聚焦更敏捷,它有三個重要特

程式——父子元件傳參以及方法的呼叫

父元件向子元件傳參 A元件為父元件,B元件為子元件,以下是A元件向B元件傳參 在A元件中引入B元件(父元件引入子元件) 在A元件的json中寫入(父元件): { "component": true, "usingComponents": { "com

程式video原生元件層級過高解決方案

成品:   可以看到成品其實不是完全解決了問題,如果有更好的方法可以告知一下我,謝謝。 思路很簡單,讓video元件在不播放的時候隱藏,讓替代品view呈現,當點選view時,讓video顯示出來。 我寫了一個小元件供大家參考: wxml <view cla

程式地圖元件呼叫實踐與說明

style="width: 100%; height: 100vh;" 微信小程式中,手機螢幕寬度是100vm,高度是100vh,一半的話,就是50vm,50vh唄,測試的時候,width識別100%,但height不識別100%,換成100vh就好了。

程式 基礎元件

基礎元件 框架為開發者提供了一系列基礎元件,開發者可以通過組合這些基礎元件進行快速開發。 什麼是元件: 元件是檢視層的基本組成單元。 元件自帶一些功能與微信風格的樣式。 一個元件通常包括開始標籤和結束標籤,屬性用來修飾這個元件,內容在兩個標籤之內。<tagname

程式 picker元件運用物件陣列

官方文件 https://developers.weixin.qq.com/miniprogram/dev/component/picker.html wxml: <view class='input-box flexac'> <text>積分抵扣

Wuss Weapp 一款高質量,元件齊全,高自定義的程式 UI 元件

Wuss Weapp 一款高質量,元件齊全,高自定義的微信小程式 UI 元件庫 文件 https://phonycode.github.io/wuss-weapp 掃碼體驗 使用微信掃一掃體驗小程式元件示例 演示圖片 快速上手 在開始使用 Wuss We

程式——switch元件設定大小

附上switch元件的文件地址 https://developers.weixin.qq.com/miniprogram/dev/component/switch.html 如上圖,官方文件沒有給出如何修改switch元件大小的值,只給出修改顏色的值,接下來就讓我們來解決修改

程式textarea元件

textarea 多行輸入框。該元件是原生元件,使用時請注意相關限制。 屬性名 型別 預設值 說明 最低版本 value String   輸入框

程式picker元件

picker 從底部彈起的滾動選擇器,現支援五種選擇器,通過mode來區分,分別是普通選擇器,多列選擇器,時間選擇器,日期選擇器,省市區選擇器,預設是普通選擇器。 普通選擇器:mode = selector 屬性名 型別 預設值

程式(3)函式呼叫,引數傳遞

<view class="m-view-cell" bindtap="bindStatus" data-type="全部">全部</view> <view class="m-view-cell" bindtap="bindStatus" data-type="待受理

程式元件之頁面佈局

小程式的flex佈局 小程式建議使用flex佈局進行排版 flex就是一個盒裝彈性佈局 flex是一個容器,所有子元素都是它的成員。 定義佈局:display:flex flex 容器的屬性: 1、屬性flex-direction: 排列方向。有下面

5個最優秀的程式UI元件

開發微信小程式的過程中,選擇一款好用的元件庫,可以達到事半功倍的效果。自從微信小程式面世以來,不斷有一些開源元件庫出來,下面5款就是排名比較靠前,使用者使用量與關注度比較高的小程式UI元件庫。還沒用到它們的你,可以關注和了解一下哦! WeUI WXSS WeUI WXSS是騰訊官方UI元件庫

開發者工具--開啟程式weui元件示例

瀏覽器搜尋 :https://github.com/Tencent/weui-wxss/ 1.下載為小程式設計的weui元件, 2.在開發者工具中開啟dist目錄,而不是整個目錄, 在開發者工具中就可以預覽weui元件的示例了。   如果想在自己專案中引用weui元件,需要

程式內容元件圖示 icon,打勾

    <view class="group">       <block wx:for="{{iconSize}}">         <icon type="success"