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

 更新时间:2019年09月20日 14:42:50   作者:popper小P  
这篇文章主要介绍了微信小程序如何播放腾讯视频的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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中动态向表格添加数据

    JavaScript中动态向表格添加数据

    本文给大家分享使用原生javascript实现动态向表格中添加数据的方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-01-01
  • webpack打包中path.resolve(__dirname, 'dist')的含义解析

    webpack打包中path.resolve(__dirname, 'dist')的含义解

    这篇文章主要介绍了webpack打包中path.resolve(__dirname, 'dist')的含义解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夹上拼接了一个文件夹,在打包时,直接生成,本文给大家讲解的非常详细,需要的朋友可以参考下
    2023-05-05
  • javascript自适应宽度的瀑布流实现思路

    javascript自适应宽度的瀑布流实现思路

    这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动加载更多内容的时候用到的,感兴趣的你可以参考下哦
    2013-02-02
  • 小程序实现图片移动缩放效果

    小程序实现图片移动缩放效果

    这篇文章主要为大家详细介绍了小程序实现图片移动缩放效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js实现图片放大展示效果

    js实现图片放大展示效果

    这篇文章主要介绍了js实现图片放大展示效果,点击图片可查看放大效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 微信小程序五星评分效果实现代码

    微信小程序五星评分效果实现代码

    这篇文章主要介绍了微信小程序五星评分效果实现代码的相关资料,需要的朋友可以参考下
    2017-04-04
  • uniapp实现微信一键登录按钮样式(胶囊按钮的样式)

    uniapp实现微信一键登录按钮样式(胶囊按钮的样式)

    这篇文章主要介绍了uniapp实现微信一键登录按钮样式,如何开发胶囊按钮的样式,需要的朋友可以参考下
    2024-07-07
  • 详解JavaScript中Promise的原理与应用

    详解JavaScript中Promise的原理与应用

    Promise是JavaScript中的一个重要概念,也是现代JavaScript开发中必不可少的一部分,本文主要介绍了Promise的实现原理、使用方法及常见应用场景,需要的可以收藏一下
    2023-06-06
  • javascript下载文件5种方式实例详解

    javascript下载文件5种方式实例详解

    在Web开发中文件下载功能是一个非常常见的功能,这篇文章主要给大家介绍了关于javascript下载文件5种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • js中常见的6种继承方式总结

    js中常见的6种继承方式总结

    js中的继承与其说是对象的继承,但更像是让函数的功能和用法的复用,下面这篇文章主要给大家介绍了关于js中常见的6种继承方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01

最新评论