摘要
由于小程序中不能跳转第三方播放源,这时候可以使用引入腾讯视频插件实现视频播放,本篇文章带大家实现微信小程序视频播放功能,有需要的伙伴可以参考借鉴一下。
步骤
第一步:登录微信小程序后台,设置–>第三方设置–>插件管理–>添加插件–>搜索“腾讯视频”–>添加
第二步:下载腾讯视频客户端–>点击创作者中心–>上传需要播放的视频–>等待审核通过
第三步:使用微信开发者工具创建视频播放player文件夹
player.js文件:
注意:onLoad是初始化函数,这里是动态获取数据赋值给vid、playerid
Page({
data: {
vid:'',
playerid:''
},
onLoad: function (options) {
var json = "";
var that = this;
var jsonStr= options.playerStr;
jsonStr = jsonStr.replace(" ","");
console.log("jsonStr",jsonStr);
if(typeof jsonStr!= 'object'){
jsonStr= jsonStr.replace(/\ufeff/g,"");//重点
json = JSON.parse(jsonStr);
console.log("json对象",json);
}
if(json.vid!="" && json.vid!=null){
this.setData({
vid:json.vid,
playerid:json.infoId
})
}
}
})
附上面vid值的获取(腾讯视频播放是根据vid的值来进行播放,所以必须在腾讯视频服务器找到上传的视频的vid):
登录腾讯视频客户端–>创作者中心–>稿件管理–>播放视频–>详情–>右键查看网页信息
player.json文件:
{
"usingComponents": {
"txv-video": "plugin://tencentvideo/video"
}
}
player.wxml文件:
注意:页面vid、playerid值的获取使用vid="{{vid}}、playerid="{{playerid}}",一定记得在前面加上wx:if="{{vid}}"防止vid没有值时报错处理
<txv-video
wx:if="{{vid}}" vid="{{vid}}"
playerid="{{playerid}}"
width="100%"
height="{{'auto'}}"
autoplay="{{true}}">
</txv-video>
player…wxss文件:
//添加自己所需的样式
第四步:在app.json文件中添加插件引入plugin
引入plugin:
"plugins": {
"tencentvideo": {
"version": "1.2.4",//版本号
"provider": "wxa75efa648b60994b" //腾讯视频插件appid
}
}
注意:这里的版本号不是最新的就是最好,我这里使用的是1.2.4版本,我测试过如果填写最新版的1.3.17的话android只有声音没有画面,iOS什么都没有,所以需要自己选择都兼容可以播放的版本。
演示效果
欢迎小伙伴留言评论,需要完整代码的加我QQ:450938667