不完全解决Android微信HTML5 播放视频的问题(不显示控制条,可交互)
首先你需要知道以下内容:
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 自动全屏
不完全解决Android微信HTML5 播放视频的问题(不显示控制条,可交互)的更多相关文章
- (ios)MPMoviePlayerController首次播放视频的时候,没有控制条
问题: 在视频播放时,现在控制条采用磨砂的效果,会遮罩部分视频 解决思路 1 播放器直接设置不带控制条,在app在 Foreground状态,默认播放器暂停,这样需要在获得Foreground事件,进 ...
- Android WebView 总结 —— 使用HTML5播放视频及全屏方案
在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频. 1.让视频在各个Android版本能够正常播放 在AndroidManif ...
- 尚硅谷《全套Java、Android、HTML5前端视频》
尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...
- Windows及Android倍速播放视频软件下载
目录 1. 更多推荐 2. 关键字 3. 按 4. 软件下载 4.1. IOS应用商店 4.2. 网盘下载 5. 软件介绍 5.1. PotPlayer(Windows) 5.2. MoboPlaye ...
- Android使用TextureView播放视频
1.引言 如果你想显示一段在线视频或者任意的数据流比如视频或者OpenGL 场景,你可以用android中的TextureView做到. 1).TextureView的兄弟SurfaceView 应用 ...
- HTML5播放视频,并使用ffmpeg对视频转编码
网页加入视频可以用h5自带的video标签,这里用一个jQuery封装优化好的video视频组件videojs. videojs官方网站:https://docs.videojs.com/index. ...
- android SurfaceView中播放视频 按视频的原始比例播放
OnPreparedListener mediaPlayerOnPreparedListener = new OnPreparedListener() { @Override public void ...
- Android三种播放视频的方式
在Android中,我们有三种方式来实现视频的播放: 1.使用其自带的播放器.指定Action为ACTION_VIEW,Data为Uri,Type为其MIME类型. 2.使用VideoView来播放. ...
- Android VideoView简单播放视频
给Android VideoView一个文件目录,就可以直接播放智能设备中的视频文件,现在以播放事先用手机拍好并重命名的视频文件test.mp4为例.(1) 需要在布局文件中写一个ViedoView: ...
随机推荐
- MongoDB win安装后无法远程连接访问
mongoDB安装后无法远程连接访问,原因是端口没有开放允许连接的权限 开启允许连接的权限: 管理工具-高级win防火墙
- 论AVL树与红黑树
首先讲解一下AVL树: 例如,我们要输入这样一串数字,10,9,8,7,15,20这样一串数字来建立AVL树 1,首先输入10,得到一个根结点10 2,然后输入9, 得到10这个根结点一个左孩子结点9 ...
- jQuery File Upload done函数没有返回
最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...
- 【MongoDB for Java】Java操作MongoDB
上一篇文章: http://www.cnblogs.com/hoojo/archive/2011/06/01/2066426.html介绍到了在MongoDB的控制台完成MongoDB的数据操作,通过 ...
- MXNet学习~第一个例子~跑MNIST
反正基本上是给自己看的,直接贴写过注释后的代码,可能有的地方理解不对,你多担待,看到了也提出来(基本上对未来的自己说的),三层跑到了97%,毕竟是第一个例子,主要就是用来理解MXNet怎么使用. #导 ...
- AS配置IDE
字体调整 settings->editor->colors&fonts->font,必须save as一个名称,个人选择Courier New字体,大小为14: 快捷键设置 ...
- 在活动中使用Menu
1.在res下创建menu普通文件夹,在menu下创建名为main的Menu资源文件 2.在menu组件下创建item组件:资源id,title标题名称 3.覆盖活动中的onCreateOptions ...
- eclispe或者myeclispe maven jar包不能部署到tomcat下
我们在做web开发是,经常都要在eclipse或者myeclipse中搭建web服务器,并将开发中的web项目部署到web服务器进行调试,在此,我选择的是tomcat服务器.之前部署web项目到tom ...
- sum data
$('.group_header').each(function(){ ; $(this).nextUntil('tr.group_header').find('.num').each(functio ...
- SSO之CAS单点登录实例演示
本文目录: 一.概述 二.演示环境 三.JDK安装配置 四.安全证书配置 五.部署CAS-Server相关的Tomcat 六.部署CAS-Client相关的Tomcat 七. 测试验证SSO 一.概述 ...