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


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翻页效果
Jul 23 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
常规表格多表头查询示例
Feb 21 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
浅谈React高阶组件
Mar 28 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
Vue实现表格批量审核功能实例代码
May 28 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
example2.php
2006/10/09 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python机器学习logistic回归代码解析
2018/01/17 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python实现Windows电脑定时关机
2018/06/20 Python
通过代码实例了解Python sys模块
2020/09/14 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
数学系个人求职信范文
2014/01/30 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
音乐教学随笔感言
2014/02/19 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
励志演讲稿200字
2014/08/21 职场文书
民主生活会剖析材料
2014/09/30 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
2015年管理人员工作总结
2015/05/13 职场文书