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


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 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
原生JS实现烟花效果
Mar 10 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 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
PHP生成RSS文件类实例
2014/12/05 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python的requests网络编程包使用教程
2016/07/11 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Python多线程原理与用法详解
2018/08/20 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Django如何实现上传图片功能
2019/08/16 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
人事主管岗位职责
2015/02/04 职场文书
大学生个人总结范文
2015/02/15 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript