商城系統(tǒng) 注冊(cè)

微信小程序騰訊視頻插件的使用實(shí)例

2020-09-27|HiShop
導(dǎo)讀:在開(kāi)發(fā)一個(gè) 小程序 項(xiàng)目時(shí),需要在頁(yè)面中觀看視頻,就需要使用到微信小程序的騰訊視頻插件,這樣就可以在頁(yè)面中引用騰訊視頻,而無(wú)需使用自己的服務(wù)器進(jìn)行視頻的播放...

在開(kāi)發(fā)一個(gè)小程序項(xiàng)目時(shí),需要在頁(yè)面中觀看視頻,就需要使用到微信小程序的騰訊視頻插件,這樣就可以在頁(yè)面中引用騰訊視頻,而無(wú)需使用自己的服務(wù)器進(jìn)行視頻的播放,節(jié)約了很大的服務(wù)器開(kāi)支。但是微信小程序插件的文檔寫(xiě)的很不清楚,因此將我的解決方法寫(xiě)在這里。

微信小程序騰訊視頻插件的使用實(shí)例

一、在小程序中引入插件。

進(jìn)入微信公眾平臺(tái),在設(shè)置中找到第三方服務(wù),在插件管理中添加插件。搜索到騰訊視頻,點(diǎn)擊添加,同時(shí)打開(kāi)騰訊視頻的詳情,在里面找到該插件的appid與版本號(hào)。

接著是代碼部分,在app.json中添加

  "plugins": {
    "tencentVideo": {
      "version": "1.1.1",
      "provider": "wxa75efa648b60994b"
    }

其中version是版本號(hào),provider是appid。

二、在需要使用的頁(yè)面中引用該插件的組件

官方文檔并沒(méi)有關(guān)于該方法的具體說(shuō)明,所以會(huì)導(dǎo)致出現(xiàn)無(wú)法找到對(duì)應(yīng)playerid的txv-video的問(wèn)題

打開(kāi)想要使用插件頁(yè)面的json文件,在里面添加

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

這就代表著可以在頁(yè)面中使用txv-video組件啦

三、在頁(yè)面中使用組件

進(jìn)入wxml文件,在里面添加

<txv-video vid="vid" playerid="txv1"></txv-video>

這一步很簡(jiǎn)單,vid是騰訊視頻的vid,playerid是該txv-video唯一識(shí)別碼,這個(gè)組件不能通過(guò)css進(jìn)行樣式修改

四、在js中進(jìn)行引入

如果你不想在js中對(duì)該插件進(jìn)行控制的話,可以不引入。

    const TxvContext = requirePlugin("tencentVideo");
    let txvContext = TxvContext.getTxvContext('txv1');
    txvContext.play(); //播放

這就是引用騰訊視頻插件的全部過(guò)程了,希望能夠幫助到一樣使用這個(gè)插件遇到問(wèn)題的人。

z

微信小程序騰訊視頻插件的使用實(shí)例

HiShop小程序工具提供多類型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看:小程序商店

電話咨詢 預(yù)約演示 0元開(kāi)店