前不久的一个微信小程序项目中,需要使用到视频播放的功能。

应该大家都看到了昨天开发者工具又有更新了,点进去看到激动人心的这两行,小程序插件。

在我们开发的一个小程序里面,为了给客户了解一些教程内容,我们需要增加一个在线播放视频的模块,考虑过直接使用视频组件播放服务器上的视频不成功,因此使用腾讯视频插件来播放最终测试成功。本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式,并重点介绍视频插件方式的处理过程。

首先想到的是使用小程序的video组件,但看完文档兴高采烈地在编辑器里面敲好了<video src=""></video>,打开腾讯视频,打算找src的时候发现是我把事情想简单了,腾讯视频的地址并没有那么容易拿到。网上看到有各种破解之法,最后发现腾讯视频开放了小程序插件,只要用视频的vid就可以播放腾讯视频了。这里把使用腾讯视频的过程记录下来,顺便学习一下插件的使用。

图片 1

1、使用视频组件播放视频

第一步,在小程序后台添加插件

登录小程序后台,选择设置->第三方设置->添加插件,在弹出的搜索框中输入,需要用到的插件,勾选插件并点击添加

图片 2image.png

成功添加插件后,我们需要拿到插件的AppId,项目中使用插件的时候会使用到,如下图,点击详情,

图片 3image.png

在插件详情中就能看到AppId 和 版本号列表

图片 4image.png

image.png

由于是我们自己录制的视频内容,本来想直接通过视频组件来播放自己服务器上的视频,理想很丰满,现实很骨感,不知道是视频内部比较大的原因还是腾讯禁止,虽然在开发工具上测试的时候可以播放,不过最终发布测试的时候不能播放视频,不过这里也顺带介绍一下基于视频组件的播放处理方式吧。

第二步,配置app.json

在 app.json 中添加如下代码

"plugins": { "tencentVideo": { "version": "1.2.4", // 这里填写要使用的版本号 "provider": "wxa75efa648b60994b" // 这里填写的就是刚刚的AppId }}

作为一个喝粥吃饭都是靠小程序来养活的代码汪,必须第一时间赶紧去看看。

最简单的代码应该如下所示。

第三步,配置页面的 .json 文件

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

那就说下怎么创建一个插件的项目:

<video src="{{src}}" controls ></video>

第四步,将组件用到页面的 .wxml 文件

<txv-video v player></txv-video>

这里的vid可以在腾讯视频后台获取或者,在视频的web页面,选择分享,点击复制通用代码,在通用代码里面就能得到这个字段。

1、首先,你得先把开发者工具更新到最新的版本(1.02.1803130),然后按照文档来说的,正常创建个空文件夹,选中建立插件模板

图片 5

image.png

不过我们一般还可以使用视频组件的其他参数(如果需要的话),详细的说明可以参考地址:

第五步,修改页面的 .wxss 文件

txv-video { width:750rpx; height:auto;}

运行一下,应该能看到一个带5秒广告的腾讯视频,哈哈

2、建立了快速模板之后,会自动生成一个插件包的~生成的文件结构是下面图的那样,其他都默认行了,你需要修改的是红色框的这一块,直接在模板本身修改就可以。

图片 6

image.png

快速启动模板说明:
1、miniprogram 文件夹是一个普通小程序项目,用来编写小程序插件的使用 Demo,上传插件代码时这个 Demo 会一起上传,并作为小程序插件的发布的审核依据.
2、plugin 文件就是小程序插件项目,用来编写小程序插件的代码。
3、project.config.json 需要关注 compileType 字段,compileType == 'plugin' 时才能正常的使用插件项目。

为了实现动态的URL的数据绑定,我们可以把一些变量放到一个独立的文件中,也可以根据API接口动态获取。

最后要补充的

上面只是一个使用腾讯视频插件的demo,在实际使用过程中,视频的vid一般是通过api请求而来,于是我们可能会这么写

<txv-video v player></txv-video>

这么做的话,我们会得到如下报错信息

图片 7image.png

是不是很失望,不过到这里离成功还差一步,在社区里面看到的解决方案是:

<txv-video wx:if="{{vid}}" v player></txv-video>

我想,这应该算是插件的一个bug,插件在加载的时候,api的结果一般都还没有回到,这时候插件认为你传入了一个非法的vid,直接报错,当你再往里面填充正确的vid时它已经不管了。

好了,今天的分享就到这里,如果对你有帮助的话,顺手点个赞吧

更多知识参见:微信小程序官方文档:插件

3、 components/list/list.wxml,插件的结构可以在这里面写

图片 8

image.png

例如我在一个Config.js里面放置一个固定的待播放视频的数组,如下所示

4、 components/list/list.js,插件的js同样,在这里写

图片 9

image.png

videos: [
  { id: 0, src: '字典管理模块介绍.mp4', poster: '字典管理模块介绍.png', vid:'i0690agm8uf'},
  { id: 1, src: '分页控件介绍.mp4', poster: '分页控件介绍.png', vid: 'f06919dlvi9'},
  { id: 2, src: '公用类库介绍.mp4', poster: '公用类库介绍.png', vid: 'p0686rsvwbx'},
  { id: 3, src: '混合框架之WebAPI接入的增量开发过程.mp4', poster: '混合框架之WebAPI接入的增量开发过程.png', vid: 'd0688o38mkk'},
  { id: 4, src: 'Winform框架增量开发过程.mp4', poster: 'Winform框架增量开发过程.png', vid: 'f06919dlvi9'},
  { id: 5, src: '混合框架图片显示及存储.mp4', poster: '混合框架图片显示及存储.png', vid: 'f06919dlvi9'},
  { id: 5, src: '混合框架增量开发过程.mp4', poster: '混合框架增量开发过程.png', vid: 'e0686jwu3ff'},
 ],
5、插件的配置文件 components/plugin.json
{
  "publicComponents": {
    "list": "components/list/list"
  },
  "main": "index.js"
}

然后同时定义一个基础的URL地址,如下所示。

6、最后是上传

图片 10

image.png

video_base_url:https://www.iqidi.com/doc/Video/,

接下来就是怎么去使用插件

图片 11

1、在小程序后台,在“设置-第三方服务-添加插件”通过appid查找插件去申请使用。

图片 12

image.png

然后在页面的JS文件里面,我们可以引入这个文件,并给页面对象赋值。

2、开发者通过申请之后才可以使用。然后可以在小程序的项目里面app.json里面引用声明需要使用的插件
{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",          //插件版本号
      "provider": "wxc203867c245acd4b"      //插件appid
    }
  }
}
注:多个插件的话,都需要配置版本号和appid
//获取配置的地址
const config = require("../../utils/config.js");

Page({

 /**
 * 页面的初始数据
 */
 data: {
 videos:[],
 video_base_url:'',
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 that.setData({
  videos: config.videos,
  video_base_url: config.video_base_url
 });
3、使用js接口:引用了插件之后,就可以在小程序的页面js中使用插件提供的js 接口。
var plugin = requirePlugin("myPlugin")
plugin.getSystem()          //这里是插件里面exports出来的函数

然后在界面上定义好视频组件即可。

4、使用插件的组件:在页面对应的json文件中定义需要用的组件(和自定义组件的引用方式差不多,使用 plugin:// 协议就可以了)
{
  "usingComponents": {
    "list": "plugin://myPlugin/list"
  }
}

图片 13

image.png

<!--pages/Video/index.wxml-->
<!--1px = 750/320 = 2.34rpx;-->
<view class="container">
 <view class="goods-container">
  <view id="myVideo" class="goods-box" wx:for-items="{{videos}}" wx:key="{{index}}" data-id="{{item.id}}">
   <view class="goods-title">{{item.src}}</view>
   <video class="goods-video" id="{{item.id}}" src="{{video_base_url}}{{item.src}}" controls></video>
  </view>
 </view>
</view>

最后就介样的使用,然后有错的地方麻烦值出来我改哈谢谢

这样我们可以在开发工具上看到视频的展示了,而且也可以播放,不过悲剧的是无法发布在手机上看到视频,这个也是介绍使用腾讯视频播放插件的原因。

发表评论

电子邮件地址不会被公开。 必填项已用*标注