mpvue云开发小程序之视频插件

首先，你要是个人开发，想要使用小程序视频插件，那么你可以关掉，把你的插件代码删掉了。因为腾大爷不支持个人开发文娱类小程序，而且申请插件时不会提醒你。

以下就开始记录一下云开发-视频插件

添加插件

打开微信公众平台，设置中直接添加

点击查看详情就能看到官方的文档，写的很屎，下面是地址
https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b&token=599835817&lang=zh_CN

引入包代码

1、app.json

// 在app.json里面引入插件，注意插件版本号填最新的版本号
"plugins": {
  "tencentvideo": {
   		version: "1.3.6",
        provider: "wxa75efa648b60994b"
  }
}

2、所用视频插件的页面中

这里会有一个问题，就是mpvue可以在vue页面中使用config，或者在main.js中添加json，结果悲剧的发现不会自主生成对应的json文件，所以需要手动建立一个json文件

// 在你们的json里面插入
"usingComponents": {
  "txv-video": "plugin://tencentvideo/video"
}

tencentvideo这个是自己起的名字，可以随便，但是需要在json中对应，否则不会生效

3、加入视频插件标签

// vid 可使用vid="{{vid}}" wx:if="{{vid}}" 的方式应用data变量,要注意确保vid存在
// playerid必须要全局唯一，可以设置为vid
<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>

• playerid必须要全局唯一，可以设置为vid
• 想实现点击视频任何区域，实现视频全屏，经测试发现ios下，部分机型不能正常捕获到video或者容器的tap事件，推荐视频区域不要用video，假写成一张图片和一个播放按钮，点击的时候全屏播放视频
• const TxvContext = requirePlugin(“tencentvideo”); 可以打印TxvContext，插件暴露的接口都在这里面
• 强烈建议在拿到vid后在渲染视频组件 否则会报错，因为视频组件初始化一定要给vid

4、使用播放器组件

const txvContext = requirePlugin("tencentvideo");
Page({
  	onLoad: function (options) {
  		let txvContext = TxvContext.getTxvContext('txv1') // txv1即播放器组件的playerid值
  		}
  })
/*
	更多方法详情都在文档中可以找到：

	txvContext.play();  // 播放
	txvContext.pause(); // 暂停
	txvContext.requestFullScreen(); // 进入全屏
	txvContext.exitFullScreen();    // 退出全屏
	txvContext.playbackRate(+e.currentTarget.dataset.rate); // 设置播放速率
*/

我是使用mpvue，方法是一样的

const txvContext = requirePlugin("tencentvideo");
export default {
	onLoad(){
    	this.txvContext = txvContext.getTxvContext('txvContext')
    },
}

由于数据都是请求的，肯定不可能直接这样渲染，插件必须是在得到vid之后才可以渲染，所以初始应该先使用v-if，避免报错

// 这里是我的代码
<template>
	<txv-video
       v-if="video.videoSrc"
       :title="video.title"
       :vid="video.videoSrc" 
       :playerid="video.videoSrc"
     ></txv-video>
</template>
<script>
const txvContext = requirePlugin("myPlugin");
export default {
	mounted(){
    	this.getList()
    },
    methods: {
		getList(){
			....
			// 请求得到数据
			this.videos = res.data
			
			res.data.forEach((element,i) => {
                txvContext.getTxvContext(element.videoSrc);
            });
		}
	}
}

可能遇到的问题

1、报错，没有发现txv-video组件
检查json是否填写正确，插件名称有没有问题

2、视频没法播放
检查是否在没有vid之前就已经渲染了txv-video组件

发现一个取巧方案

https://www.jiezhe.net/post/38.html