快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

videos: [
  { id: 0, src: '字典管理模塊介紹.mp4', poster: '字典管理模塊介紹.png', vid:'i0690agm8uf'},
  { id: 1, src: '分頁(yè)控件介紹.mp4', poster: '分頁(yè)控件介紹.png', vid: 'f06919dlvi9'},
  { id: 2, src: '公用類庫(kù)介紹.mp4', poster: '公用類庫(kù)介紹.png', vid: 'p0686rsvwbx'},
  { id: 3, src: '混合框架之WebAPI接入的增量開發(fā)過(guò)程.mp4', poster: '混合框架之WebAPI接入的增量開發(fā)過(guò)程.png', vid: 'd0688o38mkk'},
  { id: 4, src: 'Winform框架增量開發(fā)過(guò)程.mp4', poster: 'Winform框架增量開發(fā)過(guò)程.png', vid: 'f06919dlvi9'},
  { id: 5, src: '混合框架圖片顯示及存儲(chǔ).mp4', poster: '混合框架圖片顯示及存儲(chǔ).png', vid: 'f06919dlvi9'},
  { id: 5, src: '混合框架增量開發(fā)過(guò)程.mp4', poster: '混合框架增量開發(fā)過(guò)程.png', vid: 'e0686jwu3ff'},
 ],

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

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

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

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

Page({

 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 videos:[],
 video_base_url:'',
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 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ā)工具上看到視頻的展示了，而且也可以播放，不過(guò)悲劇的是無(wú)法發(fā)布在手機(jī)上看到視頻，這個(gè)也是介紹使用騰訊視頻播放插件的原因。

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

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

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

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

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

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

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

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

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

官方的介紹和使用頁(yè)面代碼如下

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

首先需要在app.json里面加入插件的聲明，如下所示。

在頁(yè)面JS代碼里面加入插件對(duì)象的定義，如果沒(méi)有在腳本里面使用視頻插件，那么也可以不用這行代碼

const txvContext = requirePlugin("tencentvideo");

在頁(yè)面里面加入如下代碼

<!--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ǔ)類庫(kù)，選擇比較新的，否則有時(shí)候太低版本估計(jì)開發(fā)工具都無(wú)法測(cè)試通過(guò)，我就是忘記修改這里的基礎(chǔ)庫(kù)，導(dǎo)致一直出錯(cuò)還是沒(méi)有找到原因。