微信小程序video组件调用腾讯视频的解决方案

最近在开发中碰到了微信小程序video组件调用腾讯视频的问题，就趁机来总结一下。

对方只给了我一个腾讯视频的网页链接，然后需要放置到小程序里面，大概开发前景是这样的。

对方提供的视频链接： https://v.qq.com/x/page/s054310niqf.html

解决方案：通过腾讯视频小程序播放插件解决。官方文档

代码示例说明：

备注： vid是从腾讯视频网页链接中获取的，
例如我的案例中，视频链接为：https://v.qq.com/x/page/s054310niqf.html ，则，s054310niqf为vid，以此方式查找就可以。

vid获取方式示例图：

最终效果图：

wxml示例代码：

<txv-video vid="s054310niqf" playerid="txv1" class="video"></txv-video>
<text>厦门城市宣传片——《We are 厦门》</text><txv-video vid="i0031cajh5q" playerid="txv1" class="video"></txv-video>
<text>泉州城市宣传片——《半城烟火半城仙》</text><txv-video vid="n0770gwvdkq" playerid="txv1" class="video"></txv-video>
<text>漳州城市宣传片——《花样漳州》</text><txv-video vid="l03535remuo" playerid="txv1" class="video"></txv-video>
<text>龙岩城市宣传片——《龙岩映像》</text><txv-video vid="p3001chc4vf" playerid="txv1" class="video"></txv-video>
<text>三明城市宣传片——《一首歌一座城》</text>

当前页面的json文件，我的目录是video，所以我放在的位置是video.json文件当中：

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

app.json文件添加：

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

app.json添加plugins的位置：

这样就可以啦~~

微信小程序video组件调用腾讯视频的解决方案相关推荐

微信小程序video组件调用腾讯视频的解析
1.首先我们从腾讯视频网站上找到一个视频网页的连接,格式是这样的 https://v.qq.com/x/page/b0136et5ztz.html 上面我加粗的是视频的vid 2.我们把vid放到接口 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序 - video组件poster无效 / 视频播放列表
在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...
微信小程序云开发调用腾讯云AI 图像标签
本白菜在开发微信小程序调用腾讯云AI图像标签产品时,遇到了问题,自己琢磨了三天,搜遍了能搜的东西,还是没有解决.下边记录一下调用过程 1.首先进入https://cloud.tencent.com/ ...
微信小程序video组件/腾讯视频插件，禁止拖动进度条，使用遮罩层的方式实现
话不多说,直接上代码 wxml文件这里是原生video组件的方式 <video enable-progress-gesture="false" ><cover- ...
微信小程序video组件播放不了
最近使用小程序的video组件,视频无法播放,报错The elemen has no support sources: 原因video组件只支持视频源的文件,必须是.mp4或者其他指向视频源的链接,如 ...
微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo
效果图实现思路在video标签中添加view或cover-view标签,封面图可直接设置video组件的poster属性,自定义按钮和封面图文字包在view中设置定位即可,给自定义按钮绑定点击事件 ...
微信小程序子组件调用父组件方法
原文连接 ---> https://blog.csdn.net/qq_40190624/article/details/87972265 组件 js: var value = 123; ...
原生微信小程序父组件调用子组件中的方法
假设子组件中写有方法getData() // 返回数据 getData() {let flag = this.onStartValidate();if (!flag) return falselet ...

微信小程序video组件调用腾讯视频的解决方案

微信小程序video组件调用腾讯视频的解决方案相关推荐

最新文章

热门文章