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


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 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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和MySql中计算时间差的方法
2011/04/22 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
教你用Python写安卓游戏外挂
2018/01/11 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python 图像增强算法实现详解
2021/01/24 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
作风转变年心得体会
2014/10/22 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
详解Python函数print用法
2021/06/18 Python