微信小程序(或uniapp)引入腾讯视频插件播放视频

1.申请插件

注意:个人开发者无法使用
登录微信公众平台,在你的小程序后台的设置-第三方服务—插件管理,搜索插件并点击添加。
在这里插入图片描述
添加成功之后,点击详情,查看该插件的具体信息。

在这里插入图片描述
拿到该插件的appid以及版本号。
github地址:https://github.com/tvfe/txv-miniprogram-plugin

2.使用步骤

微信小程序:
小程序的app.json里声明使用插件

 "plugins": {
   "tencentvideo": {
         "version": "2.0.5",
          "provider": "wxa75efa648b60994b"
        }
  }

在使用插件的页面的js文件里

const txvContext = requirePlugin("tencentvideo");

使用插件的自定义组件,在json中定义需要引入的自定义组件。使用plugin://协议

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

页面中使用

<txv-video vid="xxxxxxxx" playerid="txv1"></txv-video>

暂停方法:

this.txvContext = txvContext.getTxvContext('txv1');
this.txvContext.pause()

uniapp:
manifest.json添加:

"mp-weixin" : {
      "appid" : "",
       "setting" : {
           "urlCheck" : false
       },
       "usingComponents" : true,
       "plugins": {
           "tencentvideo": {
             "version": "2.0.5",
             "provider": "wxa75efa648b60994b"
           }
         }
   },

在page.json中的对应页面的 style中添加

"usingComponents": {
	// #ifdef  MP-WEIXIN 
	 "txv-video": "plugin://tencentvideo/video"
	// #endif
}

页面实现:

<txv-video vid="xxxxxx" playerid="txv1"></txv-video>

3.如何获取vid

在这里插入图片描述

https://v.qq.com/x/page/n0041aa087e.html

n0041aa087e即为vid。

  • 6
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
以下是一个简单的腾讯视频微信小程序的代码示例,供你参考: ``` <!--index.wxml--> <view> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{bannerList}}"> <swiper-item> <image src="{{item.imgUrl}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> <view wx:for="{{videoList}}" wx:key="{{item.id}}"> <navigator url="/pages/detail/detail?id={{item.id}}"> <image src="{{item.cover}}" mode="aspectFill"></image> <view>{{item.title}}</view> </navigator> </view> </view> //index.js Page({ data: { indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, bannerList: [ {id: 1, imgUrl: 'http://example.com/banner1.jpg'}, {id: 2, imgUrl: 'http://example.com/banner2.jpg'}, {id: 3, imgUrl: 'http://example.com/banner3.jpg'} ], videoList: [ {id: 1, title: '视频1', cover: 'http://example.com/video1.jpg'}, {id: 2, title: '视频2', cover: 'http://example.com/video2.jpg'}, {id: 3, title: '视频3', cover: 'http://example.com/video3.jpg'} ] } }) //app.json { "pages": [ "pages/index/index", "pages/detail/detail" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "腾讯视频", "navigationBarTextStyle": "black" } } //detail.js Page({ onLoad: function(options) { console.log('视频ID:', options.id) } }) //detail.wxml <view> <video src="{{videoUrl}}" controls></video> </view> //detail.json { "navigationStyle": "custom", "usingComponents": { "video": "../../components/video/video" } } ``` 这是一个简单的腾讯视频小程序,包括首页轮播图和视频列表,以及视频详情页。你可以根据自己的需求进行修改和完善。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值