[转]Android WebView播放视频（包括全屏播放），androidwebview

时间：2023-12-12 15:32:44

Android WebView播放视频（包括全屏播放），androidwebview

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

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

以下是相应代码：

MainActivity：

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();

		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();

		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" >

        <!-- android:configChanges="orientation|keyboardHidden" -->

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

         	那么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 播放网络视频怎控制播放按键？

在代码中加入
webview.getSettings().setJavaScriptEnabled(true);//支持js
webview.getSettings().setPluginsEnabled(true);//设置webview支持插件

同时要在Manifest配置文件的application中加入 android:hardwareAccelerated="true" 硬件加速，这样才能够播放视频

Android webview中怎播放网络视频

1、新建一个html文件，编辑其内容:
<html><head></head><body><div id="videos"><video src="视频绝对路径或者相对路径或者网络链接" width="设置宽度" height="设置高度" autoplay /></div></body></html>2、WebView 中设置webview组件支持javascript脚本为true,load加载该html。
3、有很多设备开发时只有声音，没有画面，这个时候在androidmanifest.xml中添加应用程序application中设置硬件渲染为true,在Oncreate函数中启用硬件渲染即可。说的有点含糊。

相关文章