天天看点

WebView控制h5视频播放页面

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

1. 全屏

这里以爱奇艺的网页为例,当我们拿到它的一个网页url播放链接,用平板运行的时候,播放器不会是全屏状态,当我们点击全屏图标的时候,希望它能像网页那样全屏展示播放,但是实际情况是,你点击全屏,它也根本无动于衷。所以我们应该怎样做,才会自动实现全屏呢?

这里有1个难题要解决:点击网页的全屏图标,为什么不能全屏?只有这个解决了之后,我们才能用js调用这个全屏图标,自己来控制全屏了。之后查找官方文档,发现原来对于这种要做一些特殊处理:

简而言之:(1)要开启硬件加速,(2)需要重写WebChromeClient 中的onShowCustomView(View, WebChromeClient.CustomViewCallback)和onHideCustomView()。

WebView控制h5视频播放页面

我在网上搜索了几篇类似处理全屏的文章,并按照其中一个提供的方案,确实可以实现全屏,具体可以参考如下:

Android开发如何加载WebView中的H5页面并全屏视频播放

但是这种方案,对于页面加载完毕就要实现全屏的方案来说,并不可行,所以下面介绍第二种方案:借助腾讯X5内核的Webview

(1)集成,参照:http://x5.tencent.com/tbs/guide/sdkInit.html

(2)集成好之后,点击全屏的图标,会惊奇的发现,可以实现全屏了,x5内部应该帮我们做好了全屏。

(3)js控制全屏图标,实现:全屏/非全屏。

a . 找到全屏对应的标签:

WebView控制h5视频播放页面

b. 在onPageFinished中,写下如下代码:

String js ="javascript:document.getElementsByTagName('public-screen')[0].play();void(0);";
 mWebView.loadUrl(js);
           

通过以上2个步骤,可以发现,网页加载完毕之后,可以自动实现全屏了。

2.播放

当爱奇艺的网页链接运行在浏览器中的时候,是自动进行播放的,但是当运行在平板上的时候,视频开始是暂停的状态,如何做到像浏览器一样的效果?

先说一个走过的弯路,爱奇艺播放控件是video标签,所以想通过如下方案实现

String js ="javascript:document.getElementsByTagName('video')[0].play();void(0);"
mWebView.loadUrl(js);
           

这个确实可以实现自动播放,但是我们都知道如果你不是vip会员,你要先看会广告,而且这个广告是一段一段的,比如说广告时长是60s,可能会放4段广告,每个广告播放15s,问题就出在这了,你会发现通过控制video标签,一段广告播放完毕,会暂停住,等你来点击下一段,它才会播放。如何实现点击一次,就可以播放到底,不用用户中途再点击播放按键呢?方法是有的,也就是不拿video标签,而是找到广告暂停的标签来控制:

WebView控制h5视频播放页面
//注意:点击暂停的时候,标签class 变为btn_play,点击播放的时候,标签class是btn_pause.
String js ="javascript:document.getElementsByClassName('btn_play')[0].click();void(0);";
mWebView.loadUrl(js);
           

通过这行代码,可以实现自动播放了,就算是遇到一段一段的广告,中间也不会暂停。

3. 快进

video有提供方法控制快进/快退,这里以每次快进50s为例:

String js = "var myVideo = document.getElementsByTagName('video')[0];" +
                                    "myVideo.currentTime+=50;" +
                                    "void(0);";
String jsReuslt = "javascript:"+js;
mWebView.loadUrl(jsReuslt);
           

总结:通过腾讯X5内核, 找到正确的标签,在webview中写入js代码,可以控制视屏播放页面的全屏/播放/快进等功能了。