Android WebView实现全屏播放视频

最新推荐文章于 2025-11-07 15:25:57 发布

原创最新推荐文章于 2025-11-07 15:25:57 发布 · 4.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#android #音视频 #webview

Andriod 专栏收录该内容

78 篇文章

订阅专栏

本文分享了使用WebView播放视频时遇到的问题及解决方案，包括权限配置、全屏切换、硬件加速等技巧，有助于提高开发效率。

介绍

最近项目开发中用到了WebView播放视频的功能，总结了开发中犯过的错误，这些错误在开发是及容易遇到的，所以我这里总结了一下，希望大家看到后不要再犯类似的错误，尽可能提高开发效率：

这个Demo我这里也参考了网上写的一个比较好的一个Demo，经过总结修改，写出来的。

主要代码

以下是相应代码：

MainActivity：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

package com.androidwebviewdemo;

import android.app.Activity;

import android.app.ProgressDialog;

import android.content.pm.ActivityInfo;

import android.os.Bundle;

import android.util.Log;

import android.view.KeyEvent;

import android.view.LayoutInflater;

import android.view.View;

import android.view.Window;

import android.view.WindowManager;

import android.webkit.WebChromeClient;

import android.webkit.WebChromeClient.CustomViewCallback;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.FrameLayout;

/**

* 使用WebView播放视频时需要注意的地方：

* 1、加网络访问权限（及其他所需要的权限）；

* 2、WebViewClient中方法shouldOverrideUrlLoading可用来实现点击webView页面的链接；

* 3、WebView中播放视频需要添加webView.setWebChromeClient(new WebChromeClient())；

* 4、视频竖屏时，点击全屏，想要切换到横屏全屏的状态，那么必须在Manifest.xml配置文件该Activity的

* 配置文件中添加android:configChanges="orientation|screenSize"语句。

* 5、如果视频不能播放，或者播放比较卡，可以采用硬件加速，即在Application，或所在的Activity的配置文件中添加

* android:hardwareAccelerated="true"即可。

* @author zhongyao

*/

public class MainActivity extends Activity {

private WebView webView;

private FrameLayout video_fullView;// 全屏时视频加载view

private View xCustomView;

private ProgressDialog waitdialog = null;

private CustomViewCallback xCustomViewCallback;

private myWebChromeClient xwebchromeclient;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉应用标题

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,

WindowManager.LayoutParams.FLAG_FULLSCREEN);

setContentView(R.layout.activity_main);

waitdialog = new ProgressDialog(this);

waitdialog.setTitle("提示");

waitdialog.setMessage("视频页面加载中...");

waitdialog.setIndeterminate(true);

waitdialog.setCancelable(true);

waitdialog.show();

webView = (WebView) findViewById(R.id.webView);

video_fullView = (FrameLayout) findViewById(R.id.video_fullView);

WebSettings ws = webView.getSettings();

ws.setBuiltInZoomControls(true);// 隐藏缩放按钮

// ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);// 排版适应屏幕

ws.setUseWideViewPort(true);// 可任意比例缩放

ws.setLoadWithOverviewMode(true);// setUseWideViewPort方法设置webview推荐使用的窗口。setLoadWithOverviewMode方法是设置webview加载的页面的模式。

ws.setSavePassword(true);

ws.setSaveFormData(true);// 保存表单数据

ws.setJavaScriptEnabled(true);

ws.setGeolocationEnabled(true);// 启用地理定位

ws.setGeolocationDatabasePath("/data/data/org.itri.html5webview/databases/");// 设置定位的数据库路径

ws.setDomStorageEnabled(true);

ws.setSupportMultipleWindows(true);// 新加

xwebchromeclient = new myWebChromeClient();

webView.setWebChromeClient(xwebchromeclient);

webView.setWebViewClient(new myWebViewClient());

webView.loadUrl("http://look.appjx.cn/mobile_api.php?mod=news&id=12604");

}

public class myWebViewClient extends WebViewClient {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return false;

}

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

waitdialog.dismiss();

}

public class myWebChromeClient extends WebChromeClient {

private View xprogressvideo;

// 播放网络视频时全屏会被调用的方法

@Override

public void onShowCustomView(View view, CustomViewCallback callback) {

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

webView.setVisibility(View.INVISIBLE);

// 如果一个视图已经存在，那么立刻终止并新建一个

if (xCustomView != null) {

callback.onCustomViewHidden();

return;

}

video_fullView.addView(view);

xCustomView = view;

xCustomViewCallback = callback;

video_fullView.setVisibility(View.VISIBLE);

}

// 视频播放退出全屏会被调用的

@Override

public void onHideCustomView() {

if (xCustomView == null)// 不是全屏播放状态

return;

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

xCustomView.setVisibility(View.GONE);

video_fullView.removeView(xCustomView);

xCustomView = null;

video_fullView.setVisibility(View.GONE);

xCustomViewCallback.onCustomViewHidden();

webView.setVisibility(View.VISIBLE);

}

// 视频加载时进程loading

@Override

public View getVideoLoadingProgressView() {

if (xprogressvideo == null) {

LayoutInflater inflater = LayoutInflater

.from(MainActivity.this);

xprogressvideo = inflater.inflate(

R.layout.video_loading_progress, null);

}

return xprogressvideo;

}

/**

* 判断是否是全屏

*

* @return

*/

public boolean inCustomView() {

return (xCustomView != null);

}

/**

* 全屏时按返加键执行退出全屏方法

*/

public void hideCustomView() {

xwebchromeclient.onHideCustomView();

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

}

@Override

protected void onResume() {

super.onResume();

webView.onResume();

webView.resumeTimers();

/**

* 设置为横屏

*/

if (getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE) {

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

}

@Override

protected void onPause() {

super.onPause();

webView.onPause();

webView.pauseTimers();

}

@Override

protected void onDestroy() {

super.onDestroy();

video_fullView.removeAllViews();

webView.loadUrl("about:blank");

webView.stopLoading();

webView.setWebChromeClient(null);

webView.setWebViewClient(null);

webView.destroy();

webView = null;

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_BACK) {

if (inCustomView()) {

// webViewDetails.loadUrl("about:blank");

hideCustomView();

return true;

} else {

webView.loadUrl("about:blank");

MainActivity.this.finish();

}

return false;

}

activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<FrameLayout

android:id="@+id/video_fullView"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:visibility="gone" >

</FrameLayout>

<WebView

android:id="@+id/webView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="20sp" />

</LinearLayout>

video_loading_progress.xml：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/progress_indicator"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:orientation="vertical" >

<ProgressBar

android:id="@android:id/progress"

style="?android:attr/progressBarStyleLarge"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:paddingTop="5dip"

android:text="正在玩命加载视频中。。。"

android:textColor="?android:attr/textColorPrimary"

android:textSize="14sp" />

</LinearLayout>

AndroidManifest.xml：

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.androidwebviewdemo"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="17" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_GPS" />

<uses-permission android:name="android.permission.ACCESS_ASSISTED_GPS" />

<uses-permission android:name="android.permission.ACCESS_LOCATION" />

<uses-permission android:name="android.permission.READ_PHONE_STATE"/>

<application

android:allowBackup="true"

android:hardwareAccelerated="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<!-- 默认竖屏，点击全屏后再横屏，

那么activity必须配置android:configChanges="orientation|screenSize"

这样一来，旋转屏幕，只会调用onConfigurationChanged，不会创建新activity。

不然的话，代码中设置横屏的时候，都会新建一个Activity，

那样就没办法实现点击就横屏全屏了。 -->

<activity

android:name="com.androidwebviewdemo.MainActivity"

android:configChanges="orientation|screenSize"

android:label="@string/app_name" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

</manifest>

Android WebView实现全屏播放视频

介绍

主要代码

1 条评论