WebView控制h5视频播放页面

huang_xiao_yu

于 2018-05-28 14:19:44 发布

阅读量7.2k

点赞数 1

分类专栏： Android基础文章标签： webview js h5视频全屏

本文链接：https://blog.youkuaiyun.com/huang_xiao_yu/article/details/80476732

版权

本文介绍了如何在Android WebView中通过JS控制H5视频播放页面的全屏和播放。针对全屏问题，通过开启硬件加速，重写WebChromeClient的方法实现了全屏播放。对于自动播放，避免使用video标签直接控制，而是找到广告暂停的标签来实现连续播放。此外，还展示了如何使用video的JS接口进行快进操作。借助腾讯X5内核，整个过程变得更加顺畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信大家看到这个标题，就已经知道是通过在Webview中写入js，从而控制某个网页页面的播放。具体要如何实现呢？

1. 全屏

这里以爱奇艺的网页为例，当我们拿到它的一个网页url播放链接，用平板运行的时候，播放器不会是全屏状态，当我们点击全屏图标的时候，希望它能像网页那样全屏展示播放，但是实际情况是，你点击全屏，它也根本无动于衷。所以我们应该怎样做，才会自动实现全屏呢？
这里有1个难题要解决：点击网页的全屏图标，为什么不能全屏？只有这个解决了之后，我们才能用js调用这个全屏图标，自己来控制全屏了。之后查找官方文档，发现原来对于这种要做一些特殊处理：
简而言之：(1)要开启硬件加速，（2）需要重写WebChromeClient 中的onShowCustomView(View, WebChromeClient.CustomViewCallback)和onHideCustomView()。

这里写图片描述