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


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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
在Django中创建动态视图的教程
2015/07/15 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python计算IV值的示例讲解
2020/02/28 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python学习笔记之多进程
2020/08/06 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
客服专员岗位职责范本
2013/11/29 职场文书
企业节能减排实施方案
2014/03/19 职场文书
保护动物倡议书
2014/04/15 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书