微信小程序如何播放腾讯视频的实现


Posted in Javascript onSeptember 20, 2019

1.背景

因为当时需要做视频播放,后台存放视频文件又不现实。所以,做了一个能解析腾讯视频地址的并播放视频的小程序。

2.介绍

小程序里的解析腾讯视频地址的代码是参考了一个开源项目you-get写的,把里面的腾讯视频下载的python代码写成了JS代码。

3.腾讯视频ID从哪获取

1.一般播放一个腾讯视频的时候播放地址为https://v.qq.com/x/page/w0647n5294g.html。
.html到最后一个/之间的字符串即为腾讯视频id。如https://v.qq.com/x/page/w0647n5294g.html的id为w0647n5294g。

4.获取腾讯视频真实播放地址

分为以下两步

1 获取视频信息

把腾讯视频ID传入以下函数

getVideoInfo: function (vid) {
  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 dataJson1 = dataJson.replace(/;qwe/, '');
    var data = JSON.parse(dataJson1);
    var fn_pre = data.vl.vi[0].lnk
    host = data['vl']['vi'][0]['ul']['ui'][0]['url']
    var streams = data['fl']['fi']
    var seg_cnt = data['vl']['vi'][0]['cl']['fc']
    if (parseInt(seg_cnt) == 0) {
     seg_cnt = 1
    }
    var best_quality = streams[streams.length - 1]['name']
    var part_format_id = streams[streams.length - 1]['id']

    for (var i = 1; i < (seg_cnt + 1); i++) {
     var filename = fn_pre + '.p' + (part_format_id % 10000) + '.' + i + '.mp4';
     console.log(filename);
     pageArr.push(i);
     that.requestVideoUrls(part_format_id, vid, filename, 'index' + i);

    }

   }
  })
 },

2 根据视频信息解析视频真正的播放地址

requestVideoUrls: function (part_format_id, vid, fileName, index) {
  var keyApi = "https://vv.video.qq.com/getkey?otype=json&platform=11&format=" + part_format_id + "&vid=" + vid + "&filename=" + fileName + "&appver=3.2.19.333"
  var that = this;
  wx.request({
   url: keyApi,
   success: function (res) {
    var dataJson = res.data.replace(/QZOutputJson=/, '') + "qwe";
    var dataJson1 = dataJson.replace(/;qwe/, '');
    var data = JSON.parse(dataJson1);
    if (data.key != undefined) {
     var vkey = data['key']
     var url = host + fileName + '?vkey=' + vkey;
     part_urls[index] = String(url)
     that.setData({
      videoUrl: part_urls.index1
     });
    }
   }
  })
 },

该函数里面的part_urls.index1,即为腾讯视频的真实地址。把这个地址放到小程序的video组件的src中,即可播放腾讯上的视频。

最后放上demo:weChatVideoPlay

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

Javascript 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 #Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 #Javascript
微信用户访问小程序的登录过程详解
Sep 20 #Javascript
解决layUI的页面显示不全的问题
Sep 20 #Javascript
小程序如何获取多个formId实现详解
Sep 20 #Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 #Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python简单贪吃蛇开发
2019/01/28 Python
Django Rest framework权限的详细用法
2019/07/25 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
医院院务公开实施方案
2014/05/03 职场文书
员工试用期自我评价
2014/09/18 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python