微信小程序嵌入腾讯视频源过程详解


Posted in Javascript onAugust 08, 2019

首先我们有一个接口可以获取动态的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":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":[]}}]}};

需要的视频播放地址的格式是这样的

url + fn + '?vkey=' + fvkey

我需要的是用户可以在后台发布时候只需要复制视频链接填入即可

vedio 是腾讯播放地址例如:https://v.qq.com/x/page/c0799d0jruj.html  所以稍加改造后,代码如下

function getVideoInfo(vedio) {
 if (!vedio) return
 var vid = vedio.substring(vedio.lastIndexOf('/') + 1, vedio.lastIndexOf('html') - 1);
 var that = this;
 var urlString = 'https://vv.video.qq.com/getinfo?otype=json&appver=3.2.19.333&platform=11&defnpayver=1&vid=' + vid;
 wx.request({
  url: urlString,
  success: function (res) {
  var dataJson = res.data.replace(/QZOutputJson=/, '') + "qwe";
  var data = JSON.parse(dataJson);
  var fileName = data['vl']['vi'][0]['fn'];
  var fvkey = data['vl']['vi'][0]['fvkey'];
  var host = data['vl']['vi'][0]['ul']['ui'][2]['url']
  that.setData({
   videoUrl: host + fileName + '?vkey=' + fvkey
  });
  }
 })
 }

生成的videoUrl即是我需要的最终可以直接插入播放的视频

最后写入wxml

<view class='video'>
 <video src='{{videoUrl}}' bindplay='playVideo' id="myVideo"></video>
 <view class='tips'>建议WIFI环境下播放</view>
</view>

在小程序中使用发现 需要绑定授权域名https://vv.video.qq.com 我们无法上传验证文件所以无法绑定,因为后面我在小程序接口中使用PHP方法获取视频地址

//腾讯视频获取实际播放放地址
function getVideoInfo($video){
 $vid = "";
 //正则表达式截取vid
 preg_match_all("/(?:\/page\/)(.*)(?:\.html)/i",$video, $vid);
 $vid = $vid[1][0];
 $urlString = 'https://vv.video.qq.com/getinfo?otype=json&appver=3.2.19.333&platform=11&defnpayver=1&vid='.$vid;
 $res = fopen_url($urlString);
 //字符串截取json
 $json = str_replace("QZOutputJson=","",$res);
 $json = str_replace("}}]}};","}}]}}",$json);
 //json转换为数组
 $json = json_decode($json,true);
 $fileName = $json['vl']['vi'][0]['fn'];
 $fvkey = $json['vl']['vi'][0]['fvkey'];
 $host = $json['vl']['vi'][0]['ul']['ui'][2]['url'];
 $url = $host.$fileName.'?vkey='.$fvkey;
 return $url;
}
/**
 获取远程文件内容
 @param $url 文件http地址
*/
function fopen_url($url)
{
 if (function_exists('file_get_contents')) {
  $file_content = @file_get_contents($url);
 } elseif (ini_get('allow_url_fopen') && ($file = @fopen($url, 'rb'))){
  $i = 0;
  while (!feof($file) && $i++ < 1000) {
   $file_content .= strtolower(fread($file, 4096));
  }
  fclose($file);
 } elseif (function_exists('curl_init')) {
  $curl_handle = curl_init();
  curl_setopt($curl_handle, CURLOPT_URL, $url);
  curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT,2);
  curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER,1);
  curl_setopt($curl_handle, CURLOPT_FAILONERROR,1);
  curl_setopt($curl_handle, CURLOPT_USERAGENT, 'Trackback Spam Check'); //引用垃圾邮件检查
  $file_content = curl_exec($curl_handle);
  curl_close($curl_handle);
 } else {
  $file_content = '';
 }
 return $file_content;
}

因此在小程序接口上我们使用getVideoInfo()方法来转换视频地址就行了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 #Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 #Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 #Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 #Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 #Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 #Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 #Javascript
You might like
投票管理程序
2006/10/09 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python实现根据文件格式分类
2019/10/31 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
UNIX特点都有哪些
2016/04/05 面试题
自我鉴定书范文
2013/10/02 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
竞聘演讲稿
2014/04/24 职场文书
无房证明范本
2014/09/17 职场文书
先进工作者个人总结
2015/02/15 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android