2021-01-08 記錄一次使用安卓WeiView播放視頻不能全屏和無法播放的問題

今天在公司的APP中嵌套網(wǎng)頁，使用的是安卓原生webview，發(fā)現(xiàn)一個問題，就是在碰到有視頻的界面，播放視頻的時候發(fā)現(xiàn)全屏按鈕是灰色的，點擊的時候沒有任何反應，也是上網(wǎng)搜集資料，最后完美解決，再次記錄一下解決過程，以免重復踩坑，同時也給各位同行小伙幫提供一種解決思路。

一、首先呢我們來解決全屏按鈕點擊失效的問題；

查了一下資料，文檔上寫著支持視頻播放的條件：


通過翻譯了解到，大概意思就是；

1、要打開硬件加速

? ? 2、設置 WebChromeClient ,并實現(xiàn) onShowCustomView() ?方法和onHideCustomView()方法。

? ? 3、要支持全屏

接下來就是解決問題：

1、首先開啟硬件加速

在AndroidMainfest.xml中，當前webView所在類的標簽中添加 ?:?android:hardwareAccelerated="true"

android:name="..."

android:hardwareAccelerated="true"/>

2、設置 WebChromeClient

我們添加一個內(nèi)部類，實現(xiàn) WebChromeClient, 并復寫其中的方法

private class MyWebChromeClient extends WebChromeClient {

? ? ? ? // 全屏的時候調(diào)用

? ? ? ? @Override

? ? ? ? public void onShowCustomView(View view, CustomViewCallback callback) {

? ? ? ? ? ? super.onShowCustomView(view, callback);


? ? ? ? }

? ? ? // 切換為豎屏的時候調(diào)用

? ? ? ? @Override

? ? ? ? public void onHideCustomView() {

? ? ? ? ? ? super.onHideCustomView();


? ? ? ? }

? ? }

寫到這里全屏按鈕就已經(jīng)顯示出來了。當然，我們我們還要設置一下WebView 的相關屬性

/**

? ? * 設置webView 相關屬性

? ? * */

privatevoidinitWebView(){

? ? ? ? webview = (WebView) findViewById(R.id.webview);

webview.getSettings().setJavaScriptEnabled(true);// 設置支持javascript腳本

webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);//設置webview緩存模式

webview.setVerticalScrollBarEnabled(false);// 取消Vertical ScrollBar顯示

webview.setHorizontalScrollBarEnabled(false);// 取消Horizontal ScrollBar顯示

//設置自適應屏幕，兩者合用

webview.getSettings().setUseWideViewPort(true);

webview.getSettings().setLoadWithOverviewMode(true);

webview.getSettings().setAllowFileAccess(true);// 允許訪問文件

? ? ? ? webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

? ? ? ? ? ? webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

? ? ? ? }

webview.setFocusable(false);// 去掉超鏈接的外邊框

webview.getSettings().setDefaultTextEncodingName("GBK");//設置文本編碼（根據(jù)頁面要求設置： utf-8）

webview.setWebChromeClient(newMyWebChromeClient());

? ? }

然后看一下效果：


至此全屏按鈕失效的問題已經(jīng)得到了解決，接下來在讓我們看看另外一個問題

二、設置全屏后，視頻不能播放

全屏按鈕出來后，點擊全屏，會調(diào)用?onShowCustomView() 方法。我們在這個方法中設置橫屏的方法，即可實現(xiàn)全屏

//設置橫屏

? ? setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

但是我設置后，發(fā)現(xiàn)無法播放視頻，只顯示一個黑頁面

查了下相關資料后，發(fā)現(xiàn)

public void onShowCustomView(View view, CustomViewCallback callback)

這個方法，在設置全屏后 ?會在參數(shù) view ?上顯示播放的視頻。所以，當設置全屏后，需要讓這個view顯示到最前方。

解決：我們可以在布局文件中，添加一個和webview 同級的 Framlaoyout ，用來存放這個視圖

xml 文件：


android:layout_width="match_parent"

android:layout_height="match_parent">

? ? ? ? <FrameLayout

android:id="@+id/fl_video"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:visibility="gone"/>

? ? ? ? <WebView

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</RelativeLayout >

WebChromeClient 具體實現(xiàn)

publicclassHelpActivityextendsTitleBarActivity{

privateWebView webview =null;

// h5 地址

privateString reurl ="";

// 用來顯示視頻的布局

privateFrameLayout mLayout;

publicvoidonCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

? ? ? ? setContentView(R.layout.webview);

? ? ? ? mLayout = (FrameLayout) findViewById(R.id.fl_video);

? ? ? ? webview = (WebView) findViewById(R.id.webview);

? ? ? ? inieWebView();

? ? }

/**

? ? * 設置webView 相關屬性

? ? */

privatevoidinitWebView(){

? ? ? ? WebSettings setting= webview.getSettings();

setting.setJavaScriptEnabled(true);// 設置支持javascript腳本

setting.setCacheMode(WebSettings.LOAD_NO_CACHE);//設置緩存模式

webview.setVerticalScrollBarEnabled(false);// 取消Vertical ScrollBar顯示

webview.setHorizontalScrollBarEnabled(false);// 取消Horizontal ScrollBar顯示

//設置自適應屏幕，兩者合用

setting.setUseWideViewPort(true);

setting.setLoadWithOverviewMode(true);

setting.setAllowFileAccess(true);// 允許訪問文件

? ? ? ? setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

? ? ? ? ? ? setting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

? ? ? ? }

webview.setFocusable(false);// 去掉超鏈接的外邊框

setting.setDefaultTextEncodingName("GBK");//設置文本編碼（根據(jù)頁面要求設置）

webview.setWebChromeClient(newMyWebChromeClient());

? ? }

privateclassMyWebChromeClientextendsWebChromeClient{

privateCustomViewCallback mCustomViewCallback;

//? 橫屏時，顯示視頻的view

privateView mCustomView;


// 點擊全屏按鈕時，調(diào)用的方法

@Override

publicvoidonShowCustomView(View view, CustomViewCallback callback){

super.onShowCustomView(view, callback);

//如果view 已經(jīng)存在，則隱藏

if(mCustomView !=null) {

? ? ? ? ? ? ? ? callback.onCustomViewHidden();

return;

? ? ? ? ? ? }

? ? ? ? ? ? mCustomView = view;

? ? ? ? ? ? mCustomView.setVisibility(View.VISIBLE);

? ? ? ? ? ? mCustomViewCallback = callback;

? ? ? ? ? ? mLayout.addView(mCustomView);

? ? ? ? ? ? mLayout.setVisibility(View.VISIBLE);

? ? ? ? ? ? mLayout.bringToFront();

//設置橫屏

? ? ? ? ? ? setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

? ? ? ? }

// 取消全屏調(diào)用的方法

@Override

publicvoidonHideCustomView(){

super.onHideCustomView();

if(mCustomView ==null) {

return;

? ? ? ? ? ? }

? ? ? ? ? ? mCustomView.setVisibility(View.GONE);

? ? ? ? ? ? mLayout.removeView(mCustomView);

mCustomView =null;

? ? ? ? ? ? mLayout.setVisibility(View.GONE);

try{

? ? ? ? ? ? ? ? mCustomViewCallback.onCustomViewHidden();

}catch(Exception e) {

? ? ? ? ? ? }

? ? ? ? ? ? titleView.setVisibility(View.VISIBLE);

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//豎屏

? ? ? ? }

? ? }

/**

? ? * 橫豎屏切換監(jiān)聽

? ? */

@Override

publicvoidonConfigurationChanged(Configuration config){

super.onConfigurationChanged(config);

switch(config.orientation) {

caseConfiguration.ORIENTATION_LANDSCAPE:

? ? ? ? ? ? ? ? ? ? ? ? getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

? ? ? ? ? ? ? ? getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

break;

caseConfiguration.ORIENTATION_PORTRAIT:

? ? ? ? ? ? ? ? getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

? ? ? ? ? ? ? ? getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

break;

? ? ? ? }

? ? }

@Override

protectedvoidonDestroy(){

super.onDestroy();

? ? ? ? webview.destroy();

webview =null;

? ? }

}

?還需要在 AndroidMainfest.xml ?中設置該 Activity相關屬性，即橫豎屏切換的時候，不進行生命周期的切換

android:name=".HelpActivity"

android:configChanges="orientation|keyboardHidden|navigation|screenSize"

android:hardwareAccelerated="true"

android:screenOrientation="portrait"

? ? />

到這里就大功告成！

還有一點需要注意： 當我們播放視頻后，如果直接退出，會發(fā)現(xiàn)后臺仍然在播放。

我們可以在 onDestory 方法中，對webView進行銷毀

本文參考博客：https://blog.csdn.net/lijia1201900857/article/details/83413530

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容