JAVA高级面试进阶训练营视频教程

admin

 

最新办法 请移步 http://www.cnblogs.com/luoeeyang/p/7524824.html

 

 

首先你需要知道以下内容：

http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93

这是微信为广告商开放的API，我一直认为只有在微信投广告才能正常使用。

但是就在刚刚我尝试了一下，直接调用也是可以的（而且没有广告，至少目前是这样）

 

我们这里用到了微信提供的视频接口 ：（点击上面的链接，速去查看）

　　　　　　

这样就能解决Android微信 HTML中video会被使用特殊播放器来播放的问题。

因为：

我们直接在HTML中使用video来插入视频，在Android微信下会使用特殊的播放组件来播放，而这个组件是脱离HTML的。（这也是我们头大的地方）

微信给的解释是，因为直接插入的video编码、格式存在多样性，微信为了保证视频的正常播放，而使用了一个专用的万能视频播放器来播放。

 

而本文中的解决办法为什么就不会使用这个播放器来播放呢？

因为上传到腾讯视频的视频都会被腾讯二次编码，这样视频的编码就被统一了，所以微信放心大胆的吧视频交给HTML5的video来播放了。

这样的最大好处就是不会脱离HTML，让我们可以在视频层之上完成我们想要的东西。

 

但是这样虽然解决了播放“层”的问题，不过却有个新“BUG”。就是它：

相信聪明了你已经想到 直接把这个视频DIV的top 给遮住就能解决了。

更聪明的你也会想到，我们原始视频需要把顶部多流出空白，这样才不会遮住logo的时候把我们的视频也给遮住了。

 

当然还有朋友说依然会有控制条，你也可以用同样的方式来处理。

 

到此我们初步解决了微信HTML5播放视频的一个头疼问题。那么剩下五彩缤纷的交互就交给大家去发挥了。

 

 

测试通过环境：

IOS 9.3.3  iPhone 6plus   　　　　wechat 6.3.23

IOS 9.3.4  iPhone 5         　　　　wechat 6.3.23

IOS 8.4.1  iPhone 5　　　　　　　wechat 6.3.23

 

 

Android  6.0.1  xiaomi 4         　　　　wechat 6.3.23
Android  4.3　  sumsung I9300 　　   wechat 6.3.22

 

未通过环境

IOS 　　9.3.4  iPhone 5s　　　　      wechat 6.3.23   (自动系统全屏,这台机器好像一直有问题)

Android 4.4.2  huawei P7-L07　　　 wechat 6.3.22   调用了特殊播放器

Android 4.4.4  xiaomi 3　　　　　　 wechat 6.3.22   自动全屏