微信小程序中關於騰訊視頻的使用與踩坑

在開發一個小程序項目時,需要在頁面中觀看視頻,就需要使用到微信小程序的騰訊視頻插件,這樣就可以在頁面中引用騰訊視頻,而無需使用自己的服務器進行視頻的播放,節約了很大的服務器開支。但是微信小程序插件的文檔寫的很不清楚,因此將我的解決方法寫在這裡。

微信小程序中關於騰訊視頻的使用與踩坑

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

進入微信公眾平臺,在設置中找到第三方服務,在插件管理中添加插件。搜索到騰訊視頻,點擊添加,同時打開騰訊視頻的詳情,在裡面找到該插件的appid與版本號。

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

"plugins": {

"tencentVideo": {

"version": "1.1.1",

"provider": "wxa75efa648b60994b"

}

其中version是版本號,provider是appid。

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

官方文檔並沒有關於該方法的具體說明,所以會導致出現無法找到對應playerid的txv-video的問題

打開想要使用插件頁面的json文件,在裡面添加

"usingComponents": {

"txv-video": "plugin://tencentVideo/video"

}

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

三、在頁面中使用組件

進入wxml文件,在裡面添加

這一步很簡單,vid是騰訊視頻的vid,playerid是該txv-video唯一識別碼,這個組件不能通過css進行樣式修改

四、在js中進行引入

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

const TxvContext = requirePlugin("tencentVideo");

let txvContext = TxvContext.getTxvContext('txv1');

txvContext.play(); //播放


這就是我成功引用騰訊視頻插件的全部過程了,希望能夠幫助到一樣使用這個插件遇到問題的人。

鏈接:https://juejin.im/post/5b42b22b518825210575c569


分享到:


相關文章: