快捷導(dǎo)航

在小程序中使用騰訊視頻插件播放教程視頻的方法

更新時(shí)間：2018年07月10日 11:27:57 作者：伍華聰

這篇文章主要介紹了在小程序中使用騰訊視頻插件播放教程視頻的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在我們開發(fā)的一個(gè)小程序里面，為了給客戶了解一些教程內(nèi)容，我們需要增加一個(gè)在線播放視頻的模塊，考慮過直接使用視頻組件播放服務(wù)器上的視頻不成功，因此使用騰訊視頻插件來播放最終測試成功。本篇隨筆介紹微信小程序使用視頻組件和騰訊視頻插件兩種方式的解決方式，并重點(diǎn)介紹視頻插件方式的處理過程。

1、使用視頻組件播放視頻

由于是我們自己錄制的視頻內(nèi)容，本來想直接通過視頻組件來播放自己服務(wù)器上的視頻，理想很豐滿，現(xiàn)實(shí)很骨感，不知道是視頻內(nèi)部比較大的原因還是騰訊禁止，雖然在開發(fā)工具上測試的時(shí)候可以播放，不過最終發(fā)布測試的時(shí)候不能播放視頻，不過這里也順帶介紹一下基于視頻組件的播放處理方式吧。

最簡單的代碼應(yīng)該如下所示。

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

不過我們一般還可以使用視頻組件的其他參數(shù)（如果需要的話），詳細(xì)的說明可以參考地址：https://developers.weixin.qq.com/miniprogram/dev/component/video.html

為了實(shí)現(xiàn)動態(tài)的URL的數(shù)據(jù)綁定，我們可以把一些變量放到一個(gè)獨(dú)立的文件中，也可以根據(jù)API接口動態(tài)獲取。

例如我在一個(gè)Config.js里面放置一個(gè)固定的待播放視頻的數(shù)組，如下所示

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接入的增量開發(fā)過程.mp4', poster: '混合框架之WebAPI接入的增量開發(fā)過程.png', vid: 'd0688o38mkk'},
  { id: 4, src: 'Winform框架增量開發(fā)過程.mp4', poster: 'Winform框架增量開發(fā)過程.png', vid: 'f06919dlvi9'},
  { id: 5, src: '混合框架圖片顯示及存儲.mp4', poster: '混合框架圖片顯示及存儲.png', vid: 'f06919dlvi9'},
  { id: 5, src: '混合框架增量開發(fā)過程.mp4', poster: '混合框架增量開發(fā)過程.png', vid: 'e0686jwu3ff'},
 ],

然后同時(shí)定義一個(gè)基礎(chǔ)的URL地址，如下所示。

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

然后在頁面的JS文件里面，我們可以引入這個(gè)文件，并給頁面對象賦值。

//獲取配置的地址
const config = require("../../utils/config.js");

Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 videos:[],
 video_base_url:'',
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 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>

這樣我們可以在開發(fā)工具上看到視頻的展示了，而且也可以播放，不過悲劇的是無法發(fā)布在手機(jī)上看到視頻，這個(gè)也是介紹使用騰訊視頻播放插件的原因。

2、使用騰訊視頻插件播放視頻

既然我們無法直接播放自己服務(wù)器上的視頻，那么我們把它上傳到騰訊視頻服務(wù)器上試試，并且使用騰訊視頻的小程序插件來處理。

注冊一個(gè)騰訊視頻的賬號，然后在客戶端上上傳自己的視頻內(nèi)容。

上傳成功視頻后，我們打開視頻播放，在右側(cè)的視頻信息里面找到如下菜單

然后查看網(wǎng)頁信息，可以看到視頻的vid參數(shù)了。

騰訊視頻插件就是使用這個(gè)vid參數(shù)進(jìn)行播放的。

在使用視頻插件之前，我們先來介紹如何獲得這個(gè)插件，小程序插件需要開發(fā)者同意才能獲得使用權(quán)，我們可以在小程序的【設(shè)置 -> 第三方服務(wù)】里面看到對應(yīng)的入口。

添加相應(yīng)的插件，這里是騰訊視頻，如下所示。

添加視頻后，可以獲得視頻的APPID進(jìn)行使用，如下是這個(gè)插件的信息。

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

不過使用這個(gè)小程序的插件還是需要遵循小程序使用插件的幾個(gè)步驟，詳細(xì)說明如下所示。

首先需要在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>

最后注意項(xiàng)目的調(diào)試基礎(chǔ)類庫，選擇比較新的，否則有時(shí)候太低版本估計(jì)開發(fā)工具都無法測試通過，我就是忘記修改這里的基礎(chǔ)庫，導(dǎo)致一直出錯(cuò)還是沒有找到原因。