1. 程式人生 > >WebView控制h5視訊播放頁面

WebView控制h5視訊播放頁面

相信大家看到這個標題,就已經知道是通過在Webview中寫入js,從而控制某個網頁頁面的播放。具體要如何實現呢?

1. 全屏

這裡以愛奇藝的網頁為例,當我們拿到它的一個網頁url播放連結,用平板執行的時候,播放器不會是全屏狀態,當我們點選全屏圖示的時候,希望它能像網頁那樣全屏展示播放,但是實際情況是,你點選全屏,它也根本無動於衷。所以我們應該怎樣做,才會自動實現全屏呢?
這裡有1個難題要解決:點選網頁的全屏圖示,為什麼不能全屏?只有這個解決了之後,我們才能用js呼叫這個全屏圖示,自己來控制全屏了。之後查詢官方文件,發現原來對於這種要做一些特殊處理:
簡而言之:(1)要開啟硬體加速,(2)需要重寫WebChromeClient 中的onShowCustomView(View, WebChromeClient.CustomViewCallback)和onHideCustomView()。

這裡寫圖片描述

我在網上搜索了幾篇類似處理全屏的文章,並按照其中一個提供的方案,確實可以實現全屏,具體可以參考如下:
Android開發如何載入WebView中的H5頁面並全屏視訊播放
但是這種方案,對於頁面載入完畢就要實現全屏的方案來說,並不可行,所以下面介紹第二種方案:藉助騰訊X5核心的Webview

(1)整合,參照:http://x5.tencent.com/tbs/guide/sdkInit.html
(2)整合好之後,點選全屏的圖示,會驚奇的發現,可以實現全屏了,x5內部應該幫我們做好了全屏。
(3)js控制全屏圖示,實現:全屏/非全屏。
a . 找到全屏對應的標籤:

這裡寫圖片描述

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標籤,而是找到廣告暫停的標籤來控制:

這裡寫圖片描述

//注意:點選暫停的時候,標籤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程式碼,可以控制視屏播放頁面的全屏/播放/快進等功能了。