安卓 webview播放视频及横屏

最新推荐文章于 2024-02-26 18:19:08 发布

Cheng_20

最新推荐文章于 2024-02-26 18:19:08 发布

阅读量4.7k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Cheng_aiyun/article/details/111951466

本文详细介绍了在Android WebView中遇到的视频播放问题，包括视频无法播放、操作受限以及无法全屏播放。解决方案包括在AndroidManifest.xml中启用硬件加速，以及重写WebChromeClient的onShowCustomView()和onHideCustomView()方法来自定义横竖屏布局，实现全屏播放。通过这些方法，可以解决大部分WebView内视频播放的常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

在项目中，会有在webview嵌入的网页中播放视频的需求，本来以为Android的WebView应该是默认支持视频播放的，不会有太大的问题，但是经过测试后，发现两个大问题：

有些手机无法正常播放视频，出现白屏或者只有声音没有画面等，还有不能对视频进行操作（比如播放、暂停、自动播放等）
视频无法全屏播放

视频在webview中正常播放：

这个只需要在对应的Activity中加入android:hardwareAccelerated="true"即可，如果不加的话，会在部分手机上出现白屏或有声音无画面等问题。还有不能对视频进行操作（比如播放、暂停、自动播放等）。

application和activity可直接在 AndroidManifest.xml 中添加该属性：

// 在application中
<application android:hardwareAccelerated ="true">
 
// 在activity中
<activity android:hardwareAccelerated="true" >

也可在代码中设置：

// 在代码中
getWindow.setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

注意：一定不要忘记加网络权限！


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

横竖屏播放：

webview加载视频网页的时候会遇到无法横屏的问题，此问题需要自己重新定义设置webview里面横竖屏布局。需要重写WebView的 WebChromeClient 的 onShowCustomView() 和 onHideCustomView() 方法就可以了。大概思路是：在 onShowCustomView() 中隐藏 WebView，并将得到的 View 添加到 FrameLayout 中显示，同时切换回横屏。在 onHideCustomView() 中隐藏 View，显示 WebView，同时切换回竖屏。具体代码如下：

	private WebView web_show;
    private WebSettings mWebSettings;
    /**
     * 视频全屏参数
     */
    protected static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    private View customView;
    private FrameLayout fullscreenContainer;
    private WebChromeClient.CustomViewCallback customViewCallback;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webvideo);

        web_show = findViewById(R.id.web_show);
        initWebView();
    }
    
	/**
     * 展示网页界面
     **/
    private void initWebView() {
        mWebSettings = web_show.getSettings();

        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口，如window.open()，默认为false
        mWebSettings.setJavaScriptEnabled(true);//是否允许JavaScript脚本运行，默认为false。设置true时，会提醒可能造成XSS漏洞
        mWebSettings.setSupportZoom(true);//是否可以缩放，默认true
        mWebSettings.setBuiltInZoomControls(true);//是否显示缩放按钮，默认false
        mWebSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放。大视图模式
        mWebSettings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题
        mWebSettings.setAppCacheEnabled(true);//是否使用缓存
        mWebSettings.setDomStorageEnabled(true);//开启本地DOM存储
        mWebSettings.setLoadsImagesAutomatically(true); // 加载图片
        mWebSettings.setMediaPlaybackRequiresUserGesture(false);//播放音频，多媒体需要用户手动？设置为false为可自动播放
        mWebSettings.setAllowFileAccess(true); // 允许访问文件

        web_show.loadUrl("http://liveshare.huya.com/iframe/swissski");

        //设置不用系统浏览器打开,直接显示在当前Webview
        web_show.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        web_show.setWebChromeClient(new WebChromeClient() {
            /*** 视频播放相关的方法 **/
            @Override
            public View getVideoLoadingProgressView() {
                FrameLayout frameLayout = new FrameLayout(HelloActivity.this);
                frameLayout.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
                return frameLayout;
            }

            @SuppressLint("SourceLockedOrientationActivity")
            @Override
            public void onShowCustomView(View view, CustomViewCallback callback) {
                showCustomView(view, callback);
                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);//播放时横屏幕，如果需要改变横竖屏，只需该参数就行了
            }

            @SuppressLint("SourceLockedOrientationActivity")
            @Override
            public void onHideCustomView() {
                hideCustomView();
                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//不播放时竖屏
            }
        });
    }
    
	/**
     * 视频播放全屏
     **/
    private void showCustomView(View view, WebChromeClient.CustomViewCallback callback) {
        // if a view already exists then immediately terminate the new one
        if (customView != null) {
            callback.onCustomViewHidden();
            return;
        }

        this.getWindow().getDecorView();

        FrameLayout decor = (FrameLayout) getWindow().getDecorView();
        fullscreenContainer = new FullscreenHolder(HelloActivity.this);
        fullscreenContainer.addView(view, COVER_SCREEN_PARAMS);
        decor.addView(fullscreenContainer, COVER_SCREEN_PARAMS);
        customView = view;
        setStatusBarVisibility(false);
        customViewCallback = callback;
    }

    /**
     * 隐藏视频全屏
     */
    private void hideCustomView() {
        if (customView == null) {
            return;
        }
        setStatusBarVisibility(true);
        FrameLayout decor = (FrameLayout) getWindow().getDecorView();
        decor.removeView(fullscreenContainer);
        fullscreenContainer = null;
        customView = null;
        customViewCallback.onCustomViewHidden();
        web_show.setVisibility(View.VISIBLE);
    }

    /**
     * 全屏容器界面
     */
    static class FullscreenHolder extends FrameLayout {

        public FullscreenHolder(Context ctx) {
            super(ctx);
            setBackgroundColor(ctx.getResources().getColor(android.R.color.black));
        }

        @Override
        public boolean onTouchEvent(MotionEvent evt) {
            return true;
        }
    }

    private void setStatusBarVisibility(boolean visible) {
        int flag = visible ? 0 : WindowManager.LayoutParams.FLAG_FULLSCREEN;
        getWindow().setFlags(flag, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        web_show.stopLoading();
        web_show.setWebChromeClient(null);
        web_show.setWebViewClient(null);
        web_show = null;
    }