今天给大家介绍一下电商小程序商品加视频的解决方案

样例小程序:

各种好处:

1. 空间节约:5G时代来临,视频播放为基本要求,还在为视频的存储空间发愁么,用腾讯视频插件,视频直接上传到腾讯服务器,无任何服务器空间消耗.
2. 带宽节约:空间不是问题的话,如何保证视频的播放流畅度?用腾讯视频插件播放,不占用自己服务器带宽,还省了CDN的钱,至于速度,你觉得腾讯视频的服务器会卡么?
3. 技术成本:视频的增删改查,代码都不用写,视频文件的地址直接用VID不到20个字符代替,开发方便,维护简单
4. 资质问题:用原生video标签,视频多了,上线审核的时候会要求文娱资质,有官方正面回答用腾讯视频播放,无需资质
5. 
6. 
   
7. 视频审核:视频上传腾讯服务器的时候,腾讯自己就会审核好视频合法性
8. 
   

好处多多,我们来看下实现方法

一 添加插件:

进入小程序后台:设置->第三方设置->添加插件

    输入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得钱,根本不算什么