微信小程序之引入腾讯视频插件播放视频

摘要

由于小程序中不能跳转第三方播放源，这时候可以使用引入腾讯视频插件实现视频播放，本篇文章带大家实现微信小程序视频播放功能，有需要的伙伴可以参考借鉴一下。

步骤

第一步：登录微信小程序后台，设置–>第三方设置–>插件管理–>添加插件–>搜索“腾讯视频”–>添加

第二步：下载腾讯视频客户端–>点击创作者中心–>上传需要播放的视频–>等待审核通过
第三步：使用微信开发者工具创建视频播放player文件夹
player.js文件：
注意：onLoad是初始化函数，这里是动态获取数据赋值给vid、playerid

Page({
  data: {
    vid:'',
    playerid:''
  },
  onLoad: function (options) {
    var json = ""; 
    var that = this;
    var jsonStr= options.playerStr;
    jsonStr = jsonStr.replace(" ","");
    console.log("jsonStr",jsonStr);
    if(typeof jsonStr!= 'object'){
      jsonStr= jsonStr.replace(/\ufeff/g,"");//重点
      json = JSON.parse(jsonStr);
      console.log("json对象",json);
    }
  
    if(json.vid!="" && json.vid!=null){
      this.setData({
        vid:json.vid,
        playerid:json.infoId
      })
    }
    
  }
})

附上面vid值的获取（腾讯视频播放是根据vid的值来进行播放，所以必须在腾讯视频服务器找到上传的视频的vid）：
登录腾讯视频客户端–>创作者中心–>稿件管理–>播放视频–>详情–>右键查看网页信息

player.json文件：

{
  "usingComponents": {
    "txv-video": "plugin://tencentvideo/video"
  }
}

player.wxml文件：
注意：页面vid、playerid值的获取使用vid="{{vid}}、playerid="{{playerid}}"，一定记得在前面加上wx:if="{{vid}}"防止vid没有值时报错处理

<txv-video 
  wx:if="{{vid}}" vid="{{vid}}"
  playerid="{{playerid}}" 
  width="100%"    
  height="{{'auto'}}"
  autoplay="{{true}}">
</txv-video>

player…wxss文件：

//添加自己所需的样式

第四步：在app.json文件中添加插件引入plugin
引入plugin：

"plugins": {
    "tencentvideo": {
      "version": "1.2.4",//版本号
      "provider": "wxa75efa648b60994b"	//腾讯视频插件appid
    }
 }

注意：这里的版本号不是最新的就是最好，我这里使用的是1.2.4版本，我测试过如果填写最新版的1.3.17的话android只有声音没有画面，iOS什么都没有，所以需要自己选择都兼容可以播放的版本。

演示效果

欢迎小伙伴留言评论，需要完整代码的加我QQ：450938667