微信小程序使用视频组件和腾讯视频插件的解决方式

在我们开发的一个小程序中，为了向客户提供一些教程内容，我们需要添加一个视频播放模块。我们认为直接使用视频组件在服务器上播放视频是不成功的，因此我们使用腾讯视频插件成功播放了最终测试。本文介绍了使用视频组件和腾讯视频插件的微信小程序的解决方案，并着重介绍了视频插件方法的处理过程。

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

因为这是我们自己录制的视频内容，所以我们最初想通过视频组件直接在服务器上播放视频。理想非常充实，而现实却很骨感。我不知道这是由于内部视频内容过多还是腾讯禁止。可以在开发工具上进行测试的过程中播放该视频，但是最终发布测试后，则无法播放视频。但是，这也是基于视频组件的回放处理方法的介绍。

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

但是，我们通常可以使用视频组件的其他参数（如有必要）。有关详细说明，请参阅地址：

为了实现动态URL数据绑定，我们可以将一些变量放在单独的文件中，或者根据API接口动态获取它们。

例如，我将固定的视频数组放置在Config.js中播放，如下所示

    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'},
    ],

然后同时定义一个基本URL地址，如下所示。

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

然后在页面的JS文件中，我们可以导入该文件并将值分配给页面对象。

//获取配置的地址
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
    });

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

<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>

通过这种方式，我们可以在开发工具上看到视频的显示，也可以播放它，但是悲剧是视频无法在手机上发布。这也是引入使用腾讯视频播放插件的原因。

2、使用腾讯视频插件播放视频

由于我们无法直接在服务器上播放视频，因此我们将其上传到腾讯视频的服务器上进行尝试，然后使用腾讯视频的小程序插件进行处理。

注册一个腾讯视频帐户，然后在客户端上上传您自己的视频内容。

成功上传视频后，我们打开视频播放，并在右侧的视频信息中找到以下菜单

然后查看网页信息，您可以看到视频的vid参数。

腾讯视频插件使用此vid参数播放。

在使用视频插件之前，我们首先介绍如何获取此插件。小程序插件需要开发人员的同意才能获得使用它的权利。我们可以在小程序的[设置->第三方服务]中看到相应的条目。

添加相应的插件，这里是腾讯视频，如下所示。

添加视频后，您可以获取视频的APPID以供使用。以下是此插件的信息。

官方介绍和使用页面代码如下

但是，要使用此小程序的插件，您仍然需要遵循在小程序中使用插件的步骤。详细说明如下。

首先，您需要在app.json中添加插件声明，如下所示。

在页面JS代码中添加插件对象的定义。如果脚本中未使用视频插件，则不需要此行代码

const txvContext = requirePlugin("tencentvideo");

在页面中添加以下代码

<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>
           <txv-video class="goods-video"  vid="{{item.vid}}" playerid="txv{{item.id}}"  autoplay="{{false}}">txv-video>
        view>
    view>
view>

最后，请注意该项目的基本调试库，并选择一个相对较新的库。否则，有时版本太低，开发工具将无法通过测试。我只是忘了在这里修改基本库，导致不断出现错误或找不到原因。

在手机上进行最终测试的结果如下。唯一的遗憾是每个视频都必须播放一个令人沮丧的广告。

通常，小程序插件的使用非常方便和简洁，但是第一次使用它时，总是会遇到一些问题，因此您可以慢慢地习惯它。

在腾讯服务器上还有腾讯视频，这也可以减轻您自己服务器的访问压力，也可以与其他朋友共享，这也很好。

最后放入小程序代码，您可以扫描代码来体验该功能。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-363401-1.html