首页 > 代码库 > Android之针对WebView的全屏播放

Android之针对WebView的全屏播放

2024-07-28 08:40:20   224人阅读

转载请标明转载处：http://bbs.csdn.net/topics/390839259

本人刚学android，菜鸟一个，第一次写帖子，最近因为项目要用webview加载html5的视频，开始不能全屏播，做了很久才做出来！那按我的理解说下怎么实现全屏吧。
首先写布局文件activity_main.xml：


XML/HTML code
 
?
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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <FrameLayout 
        android:id="@+id/video_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="gone"
        ></FrameLayout>
    <Button 
        android:id="@+id/video_landport"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="全屏不显示该按扭，点击切换横屏"
        android:gravity="center"
        />
    <WebView 
        android:id="@+id/video_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
    </LinearLayout>


原理：实现全屏的时候把webview里的视频放到一个View（布局里的video_view控件）里面，然后把webview隐藏掉！这样就实现了全屏播放的！
现在具体来看看怎么实现的:
先放代码MainActivity.java：

Java code
 
?
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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
public class MainActivity extends Activity {
 
    private FrameLayout videoview;// 全屏时视频加载view
    private Button videolandport;
    private WebView videowebview;
    private Boolean islandport = true;//true表示此时是竖屏，false表示此时横屏。
    private View xCustomView;
    private xWebChromeClient xwebchromeclient;
    private String url = "http://look.appjx.cn/mobile_api.php?mod=news&id=12604";
    private WebChromeClient.CustomViewCallback     xCustomViewCallback;
 
    @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);
        initwidget();
        initListener();
        videowebview.loadUrl(url);
    }
 
    private void initListener() {
        // TODO Auto-generated method stub
        videolandport.setOnClickListener(new Listener());
    }
 
    private void initwidget() {
        // TODO Auto-generated method stub
        videoview = (FrameLayout) findViewById(R.id.video_view);
        videolandport = (Button) findViewById(R.id.video_landport);
        videowebview = (WebView) findViewById(R.id.video_webview);
        WebSettings ws = videowebview.getSettings();
        /**
         * setAllowFileAccess 启用或禁止WebView访问文件数据 setBlockNetworkImage 是否显示网络图像
         * setBuiltInZoomControls 设置是否支持缩放 setCacheMode 设置缓冲的模式
         * setDefaultFontSize 设置默认的字体大小 setDefaultTextEncodingName 设置在解码时使用的默认编码
         * setFixedFontFamily 设置固定使用的字体 setJavaSciptEnabled 设置是否支持Javascript
         * setLayoutAlgorithm 设置布局方式 setLightTouchEnabled 设置用鼠标激活被选项
         * setSupportZoom 设置是否支持变焦
         * */
        ws.setBuiltInZoomControls(true);// 隐藏缩放按钮
        ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);// 排版适应屏幕
        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);
        xwebchromeclient = new xWebChromeClient();
        videowebview.setWebChromeClient(xwebchromeclient);
        videowebview.setWebViewClient(new xWebViewClientent());
    }
 
    class Listener implements OnClickListener {
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            switch (v.getId()) {
            case R.id.video_landport:
                if (islandport) {
                    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
                    videolandport.setText("全屏不显示该按扭，点击切换横屏");
                }else {
                    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); 
                    videolandport.setText("全屏不显示该按扭，点击切换竖屏");
                }
                break;
            default:
                break;
            }
        }
    }
       @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK) {
                if (inCustomView()) {
                    hideCustomView();
                    return true;
                }else {
                videowebview.loadUrl("about:blank");
//                    mTestWebView.loadData("", "text/html; charset=UTF-8", null);
                MainActivity.this.finish();
                    Log.i("testwebview", "===>>>2");
            }
            }
            return true;
        }
       /**
        * 判断是否是全屏
        * @return
        */
        public boolean inCustomView() {
             return (xCustomView != null);
         }
         /**
          * 全屏时按返加键执行退出全屏方法
          */
         public void hideCustomView() {
             xwebchromeclient.onHideCustomView();
         }
    /**
     * 处理Javascript的对话框、网站图标、网站标题以及网页加载进度等
     * @author
     */
    public class xWebChromeClient extends WebChromeClient {
        private Bitmap xdefaltvideo;
        private View xprogressvideo;
        @Override
        //播放网络视频时全屏会被调用的方法
        public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
        {
            if (islandport) {
            }
            else{
                 
//                ii = "1";
//                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); 
            }
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); 
            videowebview.setVisibility(View.GONE);
            //如果一个视图已经存在，那么立刻终止并新建一个
            if (xCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }            
            videoview.addView(view);
            xCustomView = view;
            xCustomViewCallback = callback;
            videoview.setVisibility(View.VISIBLE);
        }
         
        @Override
        //视频播放退出全屏会被调用的
        public void onHideCustomView() {
             
            if (xCustomView == null)//不是全屏播放状态
                return;                      
            // Hide the custom view.
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); 
            xCustomView.setVisibility(View.GONE);
             
            // Remove the custom view from its container.
            videoview.removeView(xCustomView);
            xCustomView = null;
            videoview.setVisibility(View.GONE);
            xCustomViewCallback.onCustomViewHidden();
             
            videowebview.setVisibility(View.VISIBLE);
             
            //Log.i(LOGTAG, "set it to webVew");
        }
        //视频加载添加默认图标
        @Override
        public Bitmap getDefaultVideoPoster() {
            //Log.i(LOGTAG, "here in on getDefaultVideoPoster");   
            if (xdefaltvideo == null) {
                xdefaltvideo = BitmapFactory.decodeResource(
                        getResources(), R.drawable.videoicon);
            }
            return xdefaltvideo;
        }
        //视频加载时进程loading
        @Override
        public View getVideoLoadingProgressView() {
            //Log.i(LOGTAG, "here in on getVideoLoadingPregressView");
             
            if (xprogressvideo == null) {
                LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
                xprogressvideo = inflater.inflate(R.layout.video_loading_progress, null);
            }
            return xprogressvideo; 
        }
        //网页标题
         @Override
         public void onReceivedTitle(WebView view, String title) {
            (MainActivity.this).setTitle(title);
         }
 
//         @Override
//       //当WebView进度改变时更新窗口进度
//         public void onProgressChanged(WebView view, int newProgress) {
//             (MainActivity.this).getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress*100);
//         }      
    }
    /**
     * 处理各种通知、请求等事件
     * @author
     */
    public class xWebViewClientent extends WebViewClient {
         @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.i("webviewtest", "shouldOverrideUrlLoading: "+url);
                return false;
            }
    }
    /**
     * 当横竖屏切换时会调用该方法
     * @author
     */
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        Log.i("testwebview", "=====<<<  onConfigurationChanged  >>>=====");
         super.onConfigurationChanged(newConfig);
          
         if(newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE){
             Log.i("webview", "   现在是横屏1");
             islandport = false;
            }else if(newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
             Log.i("webview", "   现在是竖屏1");
             islandport = true;
            }
    }
}



代码里面我写了好多注释，相信大家都能看得懂，当然本人是菜鸟，可能有些地方理解错了！知道的可以跟我说。然后我在里面加了一个功能，就是点击webview上面按钮切换横竖屏！还有就是当点击全屏播放的时候强制横屏全屏播放，点击返回时回到竖屏！我这里没有用手机重力感应切换横竖屏！代码里面还加了个播放进度的布局文件，大家在源码里可以看到！
最后说下AndroidManifest.xml设置;
访问网络权限加上这句
<uses-permission android:name="android.permission.INTERNET"/>
当切换横竖屏时为了不重新调用onCreate等方法，要加个这句：
android:configChanges="orientation|keyboardHidden|screenSize"
差不多这样就可以实现全屏播放了，如果有看不懂的问题可以问我，
源码下载地址：http://download.csdn.net/download/ysjyygywfn/7657933

Android之针对WebView的全屏播放


联系
我们