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

2020/12/14 23:46:25

摘要

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

步骤

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

第二步:下载腾讯视频客户端–>点击创作者中心–>上传需要播放的视频–>等待审核通过
第三步:使用微信开发者工具创建视频播放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