Android WebView实现全屏播放视频

介绍

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

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

主要代码

以下是相应代码:

MainActivity:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

        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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<?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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

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

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
WebView 播放视频全屏功能一般都是通过 Android 的横屏实现的,具体实现步骤如下: 1. 配置 AndroidManifest.xml 文件,启用横屏模式: ``` <activity android:name=".MainActivity" android:configChanges="orientation|screenSize" android:screenOrientation="sensorLandscape" android:theme="@style/AppTheme.NoActionBar.Fullscreen" /> ``` 其中,`android:configChanges="orientation|screenSize"` 表示屏幕旋转和尺寸变化时不重新创建 Activity,`android:screenOrientation="sensorLandscape"` 表示允许横向旋转屏幕,`android:theme="@style/AppTheme.NoActionBar.Fullscreen"` 表示使用全屏主题。 2. 在布局文件中添加 WebView: ``` <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 3. 在 Activity 中实现横屏逻辑: ``` class MainActivity : AppCompatActivity() { private lateinit var webView: WebView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE // 启用横屏模式 setContentView(R.layout.activity_main) webView = findViewById(R.id.webView) webView.settings.javaScriptEnabled = true webView.settings.pluginState = WebSettings.PluginState.ON webView.settings.allowFileAccess = true webView.webChromeClient = object : WebChromeClient() { override fun onShowCustomView(view: View?, callback: CustomViewCallback?) { super.onShowCustomView(view, callback) if (view is FrameLayout) { view.layoutParams = ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT ) setContentView(view) } } override fun onHideCustomView() { super.onHideCustomView() setContentView(webView) } } webView.loadUrl("https://www.example.com/video.html") } override fun onBackPressed() { if (webView.canGoBack()) { webView.goBack() } else { super.onBackPressed() } } override fun onDestroy() { super.onDestroy() webView.loadUrl("about:blank") webView.stopLoading() webView.webChromeClient = null webView.destroy() } } ``` 其中,onShowCustomView 方法会在 WebView播放视频时调用,onHideCustomView 方法会在视频播放结束后调用。在 onShowCustomView 方法中,我们将 WebView 的布局替换为全屏的视频布局,然后在 onHideCustomView 方法中将布局替换回来。 需要注意的是,在 onDestroy 方法中需要将 WebView 停止加载并销毁,以避免 WebView 内存泄漏的问题。 以上就是 Android WebView 播放视频全屏实现方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值