在我们开发的一个小程序里面,为了给客户了解一些教程内容,我们需要增加一个在线播放视频的模块,考虑过直接使用视频组件播放服务器上的视频不成功,因此使用腾讯视频插件来播放最终测试成功。本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式,并重点介绍视频插件方式的处理过程。
由于是我们自己录制的视频内容,本来想直接通过视频组件来播放自己服务器上的视频,理想很丰满,现实很骨感,不知道是视频内部比较大的原因还是腾讯禁止,虽然在开发工具上测试的时候可以播放,不过最终发布测试的时候不能播放视频,不过这里也顺带介绍一下基于视频组件的播放处理方式吧。
最简单的代码应该如下所示。
& lt;视频src=" https://www.yisu.com/zixun/{{src}}”控制祝辞& lt;/video>
不过我们一般还可以使用视频组件的其他参数(如果需要的话),详细的说明可以参考地址:https://developers.weixin.qq.com/miniprogram/dev/component/video.html
为了实现动态的URL的数据绑定,我们可以把一些变量放到一个独立的文件中,也可以根据API接口动态获取。
例如我在一个Config.js里面放置一个固定的待播放视频的数组,如下所示
视频:【
{id: 0, src:“字典管理模块介绍。mp4的海报:“字典管理模块介绍。png”,请看:“i0690agm8uf”},
{id: 1、src:“分页控件介绍。mp4的海报:“分页控件介绍。png”,请看:“f06919dlvi9”},
{id: 2, src:“公用类库介绍。mp4的海报:“公用类库介绍。png”,请看:“p0686rsvwbx”},
{id: 3, src:“混合框架之WebAPI接入的增量开发过程。mp4的海报:“混合框架之WebAPI接入的增量开发过程。png”,请看:“d0688o38mkk”},
{id: 4, src:“Winform框架增量开发过程。mp4的海报:“Winform框架增量开发过程。png”,请看:“f06919dlvi9”},
{id: 5, src:“混合框架图片显示及存储。mp4的海报:“混合框架图片显示及存储。png”,请看:“f06919dlvi9”},
{id: 5, src:“混合框架增量开发过程。mp4的海报:“混合框架增量开发过程。png”,请看:“e0686jwu3ff”},
),
然后同时定义一个基础的URL地址,如下所示。
video_base_url: https://www.iqidi.com/doc/Video/
然后在页面的JS文件里面,我们可以引入这个文件,并给页面对象赋值。
//获取配置的地址
常量配置=要求(“. ./. ./跑龙套/config.js”);
页面({/* *
*页面的初始数据
*/数据:{
视频:[],
video_base_url:”,
},/* *
* 生命周期函数--监听页面加载
*/>
& lt; !——网页/视频/index.wxml——比;
& lt; !——1 px=750/320=2.34 rpx;比;
& lt;视图类=叭萜鳌北?
& lt;视图类=癵oods-container”比;
& lt;视图id=" myVideo " class=" goods-box wx:项="{{视频}}"天气:关键="{{指数}}"数据id=" {{item.id}}”在
& lt;视图类=" goods-title "在{{item.src}} & lt;/view>
& lt;视频类=" goods-video " id="{{项目。id}} " src=" https://www.yisu.com/zixun/{{video_base_url}} {{item.src}}”controls> & lt;/video>
& lt;/view>
& lt;/view>
& lt;/view>
这样我们可以在开发工具上看到视频的展示了,而且也可以播放,不过悲剧的是无法发布在手机上看到视频,这个也是介绍使用腾讯视频播放插件的原因。
既然我们无法直接播放自己服务器上的视频,那么我们把它上传到腾讯视频服务器上试试,并且使用腾讯视频的小程序插件来处理。
注册一个腾讯视频的账号,然后在客户端上上传自己的视频内容。
上传成功视频后,我们打开视频播放,在右侧的视频信息里面找到如下菜单
