★→ASP程序学习群:62655404 微信公众号开发

使用uni-app开始小程序使用腾讯视频插件vid播放视频

 2020/12/27 21:57:47  字体:  浏览 168 我要评论
当前标签
uni-app

登录微信小程序管理后台添加腾讯视频播放插件
在uni-app中引入插件代码
在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码  
在.vue页面中使用腾讯视频播放组件
关于如何获取腾讯视频vid问题



(一)、登录微信小程序管理后台添加腾讯视频播放插件:
正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示:
1. 进入小程序
2. 进入左边的设置中
3. 点击第三方设置----(下拉)---插件管理(添加:腾讯视频)
这个就是对应的腾讯视频插件的开发文档地址:https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wxa75efa648b60994b

(二)、 在uni-app中引入插件代码:
注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的,因为uni-app可开发多平台的原因,因此不同平台的开发相应的配置需要放到指定的位置才能够生效。而uni-app引入腾讯视频小程序有两种方式一种是整个小程序可使用(小程序中所有的分包可以使用),第二种是指定对应的分包可使用。

(三)、指定整个小程序可使用:
使用插件之前需要在manifest.json中的mp-weixin内声明使用的插件,具体配置参照所用插件的开发文档:

{
  "subpackages": [
    {
      "root": "package1",//分包名称
      "pages": [
        "pages/cat",
        "pages/dog"
      ],
      "plugins": {
        "tencentvideo": {
          "version": "1.3.6", //这个地方一定要写最新的插件版本
          "provider": "腾讯视频小程序AppID"
        }
      }
    }
  ]
}  

(四)、在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码: 
,{"path": "pages/show/show","style": {"navigationStyle": "custom","navigationBarTitleText": "详细内容",

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


(五)、在.vue页面中使用腾讯视频播放组件:
<view>
           <!--vid中的腾讯视频id最好为动态的数据,方便管理-->
          <txv-video :vid="VideoId" playerid="txv1"></txv-video>
</view>


<script>
export default {
    data() {
        return {
            VideoId:'c3029q7tdnp'
        };
    }
}
</script>   

(六)、 参考资料:
腾讯视频小程序播放插件开发文档:
https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b&token=&lang=zh_CN

decloud uni-app相关配置:
https://uniapp.dcloud.io/component/mp-weixin-plugin

微信小程序特有配置:
https://uniapp.dcloud.io/collocation/manifest?id=mp-weixin

后一页:没有了
相关阅读
( 2021/1/5 20:10:06 )uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
( 2020/12/16 22:20:58 )微信小程序转uni-app项目
( 2020/12/11 23:20:06 )uni-app浏览历史记录功能实现
( 2020/10/26 13:46:09 )uni-app自定义loading组件
( 2020/9/25 20:52:28 )uni-app判断当前客户端是安卓还是ios还是其它平台
( 2020/9/25 20:44:34 )uni-app基础知识页面事件与web事件的对比
( 2020/9/23 14:18:01 )uni-app设置像页面html或者body的全局背景色
( 2020/9/17 16:11:26 )用uni-app里面的navigator做链接时感觉像有缓存只能点其中一个链接
共有0条关于《使用uni-app开始小程序使用腾讯视频插件vid播放视频》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
微信小程序-接入广告
更多>>最新添加文章
uni-app三目运算class和style
uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
微信小程序开发中链接navigateTo与redirectTo的对比说明
微信小程序-接入广告
uni-app微信小程序获得用户头像与名称
微信公众号生成带参数的二维码asp源码下载
微信小程序转uni-app项目
下载微信小程序
更多>>随机抽取信息
另一个省市二级关联select下拉菜单代码
深山行者旅行社网站管理系统 v1.4
一个美化了的alert效果,非常不错。
flash利用as调用执行外部设置的exe文件
超级强的div+css点击变样式菜单,特别推荐
innerHTML动态改变ID的CSS样式表
asp随机数字,可以当成随机验证码使用
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)