今天给大家介绍一下电商小程序商品加视频的解决方案
样例小程序:
各种好处:
- 空间节约:5G时代来临,视频播放为基本要求,还在为视频的存储空间发愁么,用腾讯视频插件,视频直接上传到腾讯服务器,无任何服务器空间消耗.
- 带宽节约:空间不是问题的话,如何保证视频的播放流畅度?用腾讯视频插件播放,不占用自己服务器带宽,还省了CDN的钱,至于速度,你觉得腾讯视频的服务器会卡么?
- 技术成本:视频的增删改查,代码都不用写,视频文件的地址直接用VID不到20个字符代替,开发方便,维护简单
- 资质问题:用原生video标签,视频多了,上线审核的时候会要求文娱资质,有官方正面回答用腾讯视频播放,无需资质
- 视频审核:视频上传腾讯服务器的时候,腾讯自己就会审核好视频合法性
好处多多,我们来看下实现方法
一 添加插件:
进入小程序后台:设置->第三方设置->添加插件
输入APPID: wxa75efa648b60994b
腾讯视频插件官网地址:https://developers.weixin.qq.com/community/servicemarket/detail/00066e5ce0ce503bd9d837c1456415
二 小程序代码:
在app.json中加入代码,引用插件,版本号如果不是最新,开发工具上会有提示最新版版本号
"plugins": {
"tencentvideo": {
"version": "1.3.7",
"provider": "wxa75efa648b60994b"
}
}
在需要播放视频的小程序页面的json中加入代码:
{
"navigationBarTitleText": "商品详情",
"usingComponents": {
"txv-video": "plugin://tencentvideo/video"
}
}
需要播放视频页面的wxml中加入代码:
<!-- 商品轮播图开始 -->
<swiper autoplay="{{autoplay}}" indicator-dots='{{indicator}}' indicator-active-color='#f54000' class='swiper'>
<swiper-item wx:if="{{good.video}}">
<txv-video vid="{{good.video}}" playerid="txv1" width="750rpx" height="720rpx" bindplay="videoplay" bindpause='videopause' bindpause='videoended' isHiddenStop="true"></txv-video>
</swiper-item>
<block wx:for="{{good.img}}" wx:key=''>
<swiper-item>
<image src="{{item}}" class='swiperimg' bindtap='previewImage' data-current='{{item}}'/>
</swiper-item>
</block>
</swiper>
<!-- 商品轮播图结束 -->
我这里是放到轮播图的第一张,做了判断 如果该商品无视频则不显示
讨论几个问题,视频播放的时候轮播图自动滚动了,页面下滑,视频继续播放,影响用户体验
所以增加三个方法和一个设置
视频播放时,设置轮播图为不自动轮播,消除轮播图位置点
binplay:视频播放时触发,设置轮播图为不自动播放,不显示位置点
//视频播放方法
videoplay:function(){
this.setData({
autoplay:false,
indicator: false,
})
},
bindpause:视频暂停时触发,设置轮播图为自动播放,显示位置点
//视频暂停方法
videopause:function(){
this.setData({
autoplay: true,
indicator: true,
})
},
bindended:视频播放结束时触发,设置轮播图为自动播放,显示位置点
//视频播放结束方法
videoended:function(){
this.setData({
autoplay: true,
indicator: true,
})
},
设置页面滑动,使视频不在可见范围时自动停止播放视频,isHiddenStop:ture
样例如图:
三 后台代码:
前端用VID播放了,可是后台客户怎么在后台网页上预览他上传的视频呢?------引用腾讯视频H5播放器插件
<div id="txvideo"></div>
<input id="vid" name="video" class="inputl" placeholder="请输入腾讯视频vid" value='{$vid}'/>
<script type="text/javascript" src="//vm.gtimg.cn/tencentvideo/txp/js/iframe/api.js"></script>
<script>
// 点播
var vid = document.getElementById("vid").value//获取输入框元素
var player = new Txp.Player({
containerId: 'txvideo',
vid: vid
});
</script>
效果如图:
四 获取腾讯视频vid方法:
进入腾讯视频.找到要播放的视频 ,鼠标放到分享那里,点击复制通用代码
复制出来的代码如下:
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=y3033v5o6ru" allowFullScreen="true"></iframe>
其中的vid=y3033v5o6ru 就是该视频的vid码
五 通过腾讯视频地址,盗播获取真实播放地址对比
用腾讯视频插件播放视频,是有前置广告的,可以花钱去广告,具体费用看该网站:https://v.qq.com/open
网上也有通过腾讯的视频地址盗播获取该视频真实播放地址的方法,将地址直接写到video标签就行.而且播放时没有广告,怎么说这种方法试过,毕竟上面的Q&A截图里人家说了,这种方法弊端,毕竟违规.仁者见仁吧
我没用这个方法主要是这个方法是有时效的,腾讯视频的地址是动态生成的,等token有效期一过,你的盗播地址就要跟着换,视频少还好,我这个是给电商加的视频播放,那么多商品,得换死...
六 槽点
1.视频广告,哎,不多说了
2.本来我得视频占比是750rpx:750rpx 结果这样得话下面得播放控制条显示不全,所以成了750x720
3.放到轮播图里广告结束时,跳过广告那个按钮会显示到其他轮播图上
七 建议
这个插件是真的好,算是官方得良心产品了,建议是开放视频上传接口,你说说这么好用得东西,唯一让客户不买单的就是我上传个视频还要到腾讯视频里上传.毕竟你有上传接口,共享出来,资质得话可以和小程序得APPID绑定啊 用token验证,毕竟能上线小程序得都能通过实名认证么 ,如果开放了上传接口,基本以后小程序根本不需要为播放视频开发任何东西了,你可以广告收费啊,毕竟现在也是收费去广告,大不了多收点,这点钱比起我们开发代码,买服务器空间,增加带宽,增加CDN得钱,根本不算什么
