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

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

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

(0)

相关推荐

  • 在小程序中使用腾讯视频插件播放教程视频的方法

    在我们开发的一个小程序里面,为了给客户了解一些教程内容,我们需要增加一个在线播放视频的模块,考虑过直接使用视频组件播放服务器上的视频不成功,因此使用腾讯视频插件来播放最终测试成功.本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式,并重点介绍视频插件方式的处理过程. 1.使用视频组件播放视频 由于是我们自己录制的视频内容,本来想直接通过视频组件来播放自己服务器上的视频,理想很丰满,现实很骨感,不知道是视频内部比较大的原因还是腾讯禁止,虽然在开发工具上测试的时候可以播放,不过最终发

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

    首先我们有一个接口可以获取动态的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&q

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

    1.背景 因为当时需要做视频播放,后台存放视频文件又不现实.所以,做了一个能解析腾讯视频地址的并播放视频的小程序. 2.介绍 小程序里的解析腾讯视频地址的代码是参考了一个开源项目you-get写的,把里面的腾讯视频下载的python代码写成了JS代码. 3.腾讯视频ID从哪获取 1.一般播放一个腾讯视频的时候播放地址为https://v.qq.com/x/page/w0647n5294g.html. .html到最后一个/之间的字符串即为腾讯视频id.如https://v.qq.com/x/pa

  • 微信小程序中限制激励式视频广告位显示次数的实现思路

    微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢? 实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明. 第一步:在小程序的 onLaunch 里获取本地存储的上一次观看激励视频广告保存的时间,并获取本地存储观看广告位的次数,如果上一次观看

  • 微信小程序停止其他视频播放当前视频的实例代码

    微信小程序停止其他视频播放当前视频,代码如下所示: <view class="content"> <!--首页--> <scroll-view class='nav-page'> <view class="item-box " wx:for="{{videelsi}}" wx:key="item"> <!-- 标题层 --> <!-- 视频图片层 -->

  • 微信小程序中限制激励式视频广告位显示次数(实现思路)

    微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢? 实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明. 第一步:在小程序的 onLaunch 里获取本地存储的上一次观看激励视频广告保存的时间,并获取本地存储观看广告位的次数,如果上一次观看

  • 微信小程序仿抖音短视频切换效果的实例代码

    一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的. 还是先看效果 体验路径 自定义组件系列>>仿抖音短视频切换 代码逻辑 直接调用自定义的swiper组件就好 调用代码 js const videoList = [] Page({ data: { videoList, activeId:2, isPlaying:true }, onLoad() { var that = this wx.getSys

  • 微信小程序实现播放音频

    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 wxml: <!-- 语音 --> <view wx:if="{{content.mp3.length > 0 }}">   <view class='audio' bindtap='musicStart'>     <view class='audio_btn'>       <image src='/img/btn_play3.png' cla

  • 微信小程序实现播放音频功能

    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止. HTML: <view class="musicd">     <image src="/resource/images/mic1.png" wx:if="{{isPlay}}" bindtap="audioPause"></imag

  • 微信小程序音乐播放器开发

    前言  这篇文章上一版本是用audio组件开发的播放器,随后反应音频加载速度慢的问题 又用小程序内置的背景音乐播放的方法写了一遍,逻辑是一样的逻辑,希望对大家有所帮助! <view class='audiosBox'> <view class="audioOpen" bindtap="listenerButtonPlay" wx:if="{{!isOpen}}"> <image class='image2' src=

  • 微信小程序 接入腾讯地图的两种写法

    最近在写微信小程序,遇到了一些坑,在网上也查了好多,感觉都没有我想要的答案, 刚处理了这个地图的问题,在这里总结下,希望可以帮助大家. 在微信小程序中,腾讯地图的接入其实是有两种方式的,第一种调用腾讯本身的地图,第二种是使用插件 ma-route 一.调用腾讯本身的地图 实现结果如下图: 这个非常简单,而且用的人也很多, 只需要调用两个地图的api. 就是上边的两个.当然调用openLocation的时候你首先要调用getLocation授权 需要你在app.json里配置信息,如下: 在你需要

随机推荐