在我們開發的一個小程式裡面，為了給客戶瞭解一些教程內容，我們需要增加一個線上播放視訊的模組，考慮過直接使用視訊元件播放伺服器上的視訊不成功，因此使用騰訊視訊外掛來播放最終測試成功。本篇隨筆介紹微信小程式使用視訊元件和騰訊視訊外掛兩種方式的解決方式，並重點介紹視訊外掛方式的處理過程。

1、使用視訊元件播放視訊

由於是我們自己錄製的視訊內容，本來想直接通過視訊元件來播放自己伺服器上的視訊，理想很豐滿，現實很骨感，不知道是視訊內部比較大的原因還是騰訊禁止，雖然在開發工具上測試的時候可以播放，不過最終釋出測試的時候不能播放視訊，不過這裡也順帶介紹一下基於視訊元件的播放處理方式吧。

最簡單的程式碼應該如下所示。

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

為了實現動態的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
    });

然後在介面上定義好視訊元件即可。

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

這樣我們可以在開發工具上看到視訊的展示了，而且也可以播放，不過悲劇的是無法釋出在手機上看到視訊，這個也是介紹使用騰訊視訊播放外掛的原因。 

2、使用騰訊視訊外掛播放視訊

既然我們無法直接播放自己伺服器上的視訊，那麼我們把它上傳到騰訊視訊伺服器上試試，並且使用騰訊視訊的小程式外掛來處理。

註冊一個騰訊視訊的賬號，然後在客戶端上上傳自己的視訊內容。

上傳成功視訊後，我們開啟視訊播放，在右側的視訊資訊裡面找到如下選單

然後檢視網頁資訊，可以看到視訊的vid引數了。

騰訊視訊外掛就是使用這個vid引數進行播放的。

在使用視訊外掛之前，我們先來介紹如何獲得這個外掛，小程式外掛需要開發者同意才能獲得使用權，我們可以在小程式的【設定 -> 第三方服務】裡面看到對應的入口。

新增相應的外掛，這裡是騰訊視訊，如下所示。

新增視訊後，可以獲得視訊的APPID進行使用，如下是這個外掛的資訊。

官方的介紹和使用頁面程式碼如下

不過使用這個小程式的外掛還是需要遵循小程式使用外掛的幾個步驟，詳細說明如下所示。

首先需要在app.json裡面加入外掛的宣告，如下所示。

在頁面JS程式碼裡面加入外掛物件的定義，如果沒有在腳本里面使用視訊外掛，那麼也可以不用這行程式碼

const txvContext = requirePlugin("tencentvideo");

在頁面裡面加入如下程式碼

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

最後注意專案的除錯基礎類庫，選擇比較新的，否則有時候太低版本估計開發工具都無法測試通過，我就是忘記修改這裡的基礎庫，導致一直出錯還是沒有找到原因。

最終手機上測試的效果如下所示，唯一遺憾的就是每個視訊都要播放一段廣告，鬱悶。 

總的來說，使用小程式外掛還是非常方便簡潔的，不過第一次使用總是多少碰到一些問題，慢慢習慣就好了。

還有騰訊視訊放在騰訊伺服器，也可以減輕自己伺服器的訪問壓力，還可以分享給其他朋友，也是很好的。

最後放上小程式碼，大家可以掃碼體驗下功能。