webview使用HTML5的video标签播放视频问题总结
本文由 小茗同学 发表于 2016-06-24 浏览(3919)
最后修改 2016-08-04 标签:webview html5 video

问题

先上代码:

<video id="video" src="test.mp4" style="width:100%;" controls autoplay></video>

以下总结全部基于我的LG-G3手机(Android4.4),且不对webview做特殊处理的情形下,问题总结:

  1. autoplay不生效,视频不会自动播放;
  2. 即使是使用video.play()也不能播放,必须在添加了controls属性的情况下、手动点击播放按钮后,video.play()和video.pause才生效;
  3. video标签无论放在哪一层,最终呈现的时候,视频永远在网页的最下面,但是controls标签会受video标签的层级关系影响,所以一般而言,把video标签放在最后面比较合理,既能显示视频,又能是controls标签能够点击;
  4. 默认情况下全屏按钮失效;
  5. 播放限制比较多,比如支持的格式较少,比较常见的格式是H.264+AAC下的MP4格式,其它编码的MP4格式可能无法播放,或者只有声音没有图像,并且不支持rtsp协议的视频;
  6. 如果禁用了webview的硬件加速,可能会导致视频播放只有声音没有图像(至少我手机测试如此),但是如果想让webview背景透明,又必须禁用硬件加速,所以此二者鱼和熊掌只可取其一。