关于小程序video组件视频url获取方法

小程序真是一步一坑,最近在做一个视频播放组件,需要一些视频的url地址,结果发现直接拿腾讯视频中url根本不行,在网上看了好多帖子说的也不是特别详细,结果自己用了一天时间研究整理了一下,写了一个获取可用url的方法。希望能帮助到大家

先看效果

第一步 :

我们从腾讯视频网站上找到一个视频网页的连接,具体步骤就是打开视频点击分享,那个分享的链接就是我们要的

两个都可以复制下来  复制下来后是这样子 我们只需要src里的这段:

<embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=h056607xye8&auto=0" allowFullScreen = "true" quality = "high" width = "480" height = "400" align = "middle" allowScriptAccess = "always" type = "application/x-shockwave-flash" > </embed> 

第二步 :

我们把上面链接的vid放到以下接口地址上 

http://vv.video.qq.com/getinfo?vid=h056607xye8&platform=101001&charge=0&otype=json

直接访问返回的是

QZOutputJson={"dltype":1,"exem":0,"fl":{"cnt":2,"fi":[{"id":100701,"name":"msd","lmt":0,"sb":1,"cname":"标清;(270P)","br":28,"profile":2,"drm":0,"video":1,"audio":1,"fs":5323273,"sl":1},{"id":2,"name":"mp4","lmt":0,"sb":1,"cname":"高清;(480P)","br":33,"profile":1,"drm":0,"video":1,"audio":1,"fs":4350801,"sl":0}]},"hs":0,"ip":"120.84.169.234","ls":0,"preview":179,"s":"o","sfl":{"cnt":0},"tm":1534563720,"vl":{"cnt":1,"vi":[{"br":28,"ch":0,"cl":{"fc":0,"keyid":"h056607xye8.100701"},"ct":21600,"drm":0,"dsb":0,"fmd5":"48ffbd2a6a51b5123ab39562d52ff4a3","fn":"h056607xye8.m701.mp4","fs":5323273,"fst":5,"fvkey":"602E36F78C39F1BDAD437852D1AD4761454FB879425EA85B20D91AB87F2FEA02216FA619E5F6017F83EAF28C9DDD9C1DB46E5122A42AB9E21B632BF21D6A9150DE28464DAB71EF2BA8B6C63A795E7BB69027B1BB2EA66C76B9080AD6F4923C9ADF08616E6CC3F36B","head":0,"hevc":0,"iflag":0,"level":0,"lnk":"h056607xye8","logo":1,"mst":8,"pl":null,"share":1,"sp":0,"st":2,"tail":0,"td":"179.797","ti":"微信小程序是什么 微信小程序宣传片","tie":0,"type":3,"ul":{"ui":[{"url":"http://ugcbsy.qq.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/","vt":136,"dtc":0,"dt":2},{"url":"http://157.255.154.155/vhot2.qqvideo.tc.qq.com/Ax3eEHRro27R5XwVX92V7HgB5BpHLShvfK_u4luWUVLI/","vt":200,"dtc":0,"dt":2},{"url":"http://ugcsjy.qq.com/uwMRJfz-r5jAYaQXGdGnAWU8PgBpGqZogfytEoZCSHk/","vt":176,"dtc":0,"dt":2},{"url":"http://video.dispatch.tc.qq.com/","vt":0,"dtc":0,"dt":2}]},"vh":272,"vid":"h056607xye8","videotype":0,"vr":0,"vst":2,"vw":480,"wh":1.7647059,"wl":{"wi":[{"id":19,"x":14,"y":14,"w":85,"h":27,"a":100,"md5":"dcc9dc5c478c4100ea2817c5e6020f26","url":"http://puui.qpic.cn/vcolumn_pic/0/logo_qing_xi_color_336_108.png/0","surl":"https://puui.qpic.cn/vcolumn_pic/0/logo_qing_xi_color_336_108.png/0"}]},"uptime":1509094808,"fvideo":0,"fvpint":0}]}};

第三步:

 我们把前面的QZOutputJson=跟最后的 ; 过滤掉,得到一个json字符串了。解析它变成json对象,然后把标红的三个部分组合一下,顺序是 

url + fn + '?vkey=' + fvkey 

例如上面这串,组合下来就是 

https://ugcydzd.qq.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/h056607xye8.m701.mp4?vkey=21BBAAD6135B6FE0353345BECC2CB66CA1395F25DC3D3D395BB2901BAA23DEB402854625B18E37A8D980AD0E7794472608E6537F82D0346BCD8D996D62B2504BD72B30F14A4DFFDCEC0094D575B8550E6D2FA4B0E38994275751FBA27AD481100F1E837199DC1B69

这个地址就可以直接放在小程序的video组件里面播放了。

 具体过滤方法请往下看

<video src="{{url}}" style='width:100%'></video>
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url:''//video组件可用的url链接
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var _this = this
      var url = '这里就是你通过分享链接拿到的腾讯视频url'
      //通过正则表达式拿到分享地址中vid的值
      if (url.includes("vid=")) {
          var vid = takeParam(url, "vid");

      }
      //此函数为获取url中指定参数的函数
      function takeParam(url, key) {

          var a = url;
          var b = key;
          try {
              var reg = new RegExp(b + "=[0-9a-zA-z-_]{0,}");
              return reg.exec(a).toString().split("=")[1];
          } catch (e) {
              console.log(e);
              console.log("正则表达式取参数值错误" + key);
          }
          return "";
      }

      //通过以下接口拿到视频的详细参数 通过正则拼装成一个可以在小程序中使用的URl
      wx.request({
          url: "https://vv.video.qq.com/getinfo?vid=" + vid + "&platform=101001&charge=0&otype=json",
          method: 'get',
          header: {
              'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: function (res) {

              var dataJson = res.data.replace(/QZOutputJson=/, '') + "qwe";
              var dataJson1 = dataJson.replace(/;qwe/, '');
              var data = JSON.parse(dataJson1);
              var url = data.vl.vi[0].ul.ui[0].url
              var url2 = url.replace(/http/, "https"); //把'http'替换为https
              var fu = data.vl.vi[0].fn
              var fvkey = data.vl.vi[0].fvkey
              var a = url2 + fu + '?vkey=' + fvkey
              _this.setData({
                  url: a
              })
              console.log(a)
          }
      })
  },



})

 这里要说明一点 如果把我上面这个获取详细url参数的接口写在小程序中就必须要把他配置为合法域名 不然会导致已上线的小程序视频无法正常播放 不上线的话只做本地测试可以忽略 具体操作如下:

登录你的微信公众平台 看下图

好了以上就是获取小程序video 组件 url链接的详细步骤,有不懂的 或者更好的方法欢迎小伙伴留言

### 微信小程序视频资源URL获取方法 对于微信小程序而言,加载视频资源主要分为两种情况:本地视频文件和网络视频。如果是本地视频文件,则可以直接放置于项目目录并通过API接口调用来实现加载;而针对网络视频,其核心在于正确设定视频URL地址以完成加载过程[^1]。 当涉及到具体获取可播放的在线视频URL时,“虾米音乐”的MV链接被证实能够满足需求,在微信小程序环境中既支持视频也兼容音频部分的正常播放[^2]。然而需要注意的是,并非所有的平台都提供适合用于此目的的公开访问链接,例如某些情况下从其他站点(如B站)获得的链接可能仅能呈现部分内容或存在音画分离的现象。 为了在页面上展示并控制这些来自互联网上的多媒体内容,开发者可以在WXML模板里定义`<video>`组件标签,并利用数据绑定的方式动态指定`src`属性值为期望播放媒体的实际路径。下面给出一段简单的代码片段作为示范: ```html <view> <!-- 使用双大括号语法绑定变量到元素 --> <video class="videos" src="{{videoSrc}}" autoplay loop controls></video> </view> ``` 此外,还可以借助JavaScript逻辑层进一步增强用户体验,比如全屏切换功能可通过如下所示的方法实现: ```javascript // 假设当前环境已经初始化好了一个名为this.data.videoId 的ID字符串 const videoContext = wx.createVideoContext(this.data.videoId); videoContext.requestFullScreen(); ``` 上述操作允许用户点击按钮或其他交互事件触发后进入沉浸式的观看模式[^3]。 最后值得注意的一点是在实际开发过程中应当确保所使用的外部资源遵循相应的版权法规以及服务条款,避免不必要的法律风险。
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值