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


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.js是否已加载的判断代码
May 20 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python yield 使用方法浅析
2017/05/20 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
实践Vim配置python开发环境
2018/07/02 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
自主招生教师推荐信
2014/05/10 职场文书
保护环境建议书300字
2014/05/13 职场文书
群众路线个人整改措施
2014/10/24 职场文书
售后服务承诺函格式
2015/01/21 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
雷峰塔导游词
2015/02/09 职场文书
学校德育工作总结2015
2015/05/11 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
python 网络编程要点总结
2021/06/18 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python
Java版 单机五子棋
2022/05/04 Java/Android