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

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 播放视频的问题(不显示控制条,可交互)的更多相关文章

  1. (ios)MPMoviePlayerController首次播放视频的时候,没有控制条

    问题: 在视频播放时,现在控制条采用磨砂的效果,会遮罩部分视频 解决思路 1 播放器直接设置不带控制条,在app在 Foreground状态,默认播放器暂停,这样需要在获得Foreground事件,进 ...

  2. Android WebView 总结 —— 使用HTML5播放视频及全屏方案

    在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频. 1.让视频在各个Android版本能够正常播放 在AndroidManif ...

  3. 尚硅谷《全套Java、Android、HTML5前端视频》

    尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...

  4. Windows及Android倍速播放视频软件下载

    目录 1. 更多推荐 2. 关键字 3. 按 4. 软件下载 4.1. IOS应用商店 4.2. 网盘下载 5. 软件介绍 5.1. PotPlayer(Windows) 5.2. MoboPlaye ...

  5. Android使用TextureView播放视频

    1.引言 如果你想显示一段在线视频或者任意的数据流比如视频或者OpenGL 场景,你可以用android中的TextureView做到. 1).TextureView的兄弟SurfaceView 应用 ...

  6. HTML5播放视频,并使用ffmpeg对视频转编码

    网页加入视频可以用h5自带的video标签,这里用一个jQuery封装优化好的video视频组件videojs. videojs官方网站:https://docs.videojs.com/index. ...

  7. android SurfaceView中播放视频 按视频的原始比例播放

    OnPreparedListener mediaPlayerOnPreparedListener = new OnPreparedListener() { @Override public void ...

  8. Android三种播放视频的方式

    在Android中,我们有三种方式来实现视频的播放: 1.使用其自带的播放器.指定Action为ACTION_VIEW,Data为Uri,Type为其MIME类型. 2.使用VideoView来播放. ...

  9. Android VideoView简单播放视频

    给Android VideoView一个文件目录,就可以直接播放智能设备中的视频文件,现在以播放事先用手机拍好并重命名的视频文件test.mp4为例.(1) 需要在布局文件中写一个ViedoView: ...

随机推荐

  1. Computop支付网关(一) credit Card

    1.界面没有中文,只能选择英文 sp – Spanish; en – English; ca – Catalan; fr – French; de – German; du – Dutch; it – ...

  2. linux下flash的安装

    linux的初学者可能会遇到各种各样的问题,其中的问题就有一个,linux下的flash插件怎么安装呢? 首先前往flash官网下载好对应的文件,然后提取里面的一个叫做 libflashplayer. ...

  3. 索尼Sony ATI显卡驱动 Win7 Win8 Win8.1 视频黑屏 解决方法

    索尼ATI显卡驱动 Win7  Win8  Win8.1 视频 黑屏 完美解决方法: 下载这个补丁 安装 即可 解决  ! baidu pan:  http://pan.baidu.com/s/1gd ...

  4. 约在CBD,吃饭

    午饭当然是外卖. CBD上班的同仁们不用约,都去了一间叫“大食堂”的餐厅. 它在商业街繁华地段的二楼,有1000平米.你不知道么,餐馆们都躲到找不着的角落,变成了厨房,这里的租金便宜得很.但它不做饭, ...

  5. matlab GUI界面编程总结

    去年做了一些关于Matlab GUI的程序,现在又要做相关的东西,回想起来,当时很多经验没有记录下来,现在回顾起来始终觉得不爽,所以从现在开始,一定要勤写记录. 从简单的例子说起吧. 创建Matlab ...

  6. C#动态生成html页

    Html生成模块:WriteHtml.cs using System.Collections.Generic; using System.IO; using System.Text; namespac ...

  7. 1002 Phone Numbers 解题报告

    1002. Phone Numbers Time limit: 2.0 secondMemory limit: 64 MB In the present world you frequently me ...

  8. HttpEntity转换Inputstream(红色)加XmlPull解析

    package com.bawei.xml; import java.io.IOException; import java.io.InputStream; import java.util.Arra ...

  9. 报表控件NCreport教程:报表高级设计

    本次文章中将讲解NCreport一些高级功能的应用,我们会先定义一个组,接下来会添加summary变量到示例报表中. 一.对summary添加变量 对于提供的数量和总量来说,变量是特殊的数值项,它们每 ...

  10. linux 使用 rz 和 sz 命令

    linux系统 root权限 lrzsz安装包 ①. 安装 编译安装 root 账号登陆后,依次执行以下命令: tar zxvf lrzsz-.tar.gz cd lrzsz- ./configure ...