js video ios不全屏播放 webview播放视频不能全屏

转载

mob64ca140eb362 2023-10-12 00:01:36

文章标签 js video ios不全屏播放 webview 全屏后不能播放 webview 播放视频没有全屏按钮 webview 播放视频 文章分类 iOS 移动开发

最近项目的一个需求，需要在Webview 里面播放视频遇到了一些问题：

视频可以正常播放但是，视频底部的全屏按钮没了，只有一个音量按钮。修改后，点击全屏，视频不能播放。

接下来一一解决：

问题1 ：没有全屏按钮：

如图：可以看到只有一个音量按钮，没有全屏按钮。

js video ios不全屏播放 webview播放视频不能全屏_webview 播放视频

查了一下资料，文档上写着支持视频播放的条件：

In order to support inline HTML5 video in your application, 
you need to have hardware acceleration turned on, and set a WebChromeClient. 
For full screen support, 
implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback)
and onHideCustomView() are required, getVideoLoadingProgressView() is optional.

意思就是：

1、要打开硬件加速

2、设置 WebChromeClient ,并实现 onShowCustomView() 方法和onHideCustomView()方法。

3、要支持全屏

接下来就是解决问题：

1、首先开启硬件加速

在AndroidMainfest.xml中，当前webView所在类的标签中添加 : android:hardwareAccelerated="true"

<activity
    android:name="..."
    android:hardwareAccelerated="true"/>

2、设置 WebChromeClient

我们添加一个内部类，实现 WebChromeClient, 并复写其中的方法

private class MyWebChromeClient extends WebChromeClient {

        // 全屏的时候调用
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {

            super.onShowCustomView(view, callback);
         
        }

       // 切换为竖屏的时候调用
        @Override
        public void onHideCustomView() {

            super.onHideCustomView();
            
        }
    }

写到这里全屏按钮就已经显示出来了。当然，我们我们还要设置一下WebView 的相关属性

/**
     * 设置webView 相关属性
     * */
    private void initWebView() {
        webview = (WebView) findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);// 设置支持javascript脚本
        webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);//设置webview缓存模式
        webview.setVerticalScrollBarEnabled(false); // 取消Vertical ScrollBar显示
        webview.setHorizontalScrollBarEnabled(false); // 取消Horizontal ScrollBar显示
        //设置自适应屏幕，两者合用
        webview.getSettings().setUseWideViewPort(true);
        webview.getSettings().setLoadWithOverviewMode(true);

        webview.getSettings().setAllowFileAccess(true);// 允许访问文件
        webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        webview.setFocusable(false); // 去掉超链接的外边框
        webview.getSettings().setDefaultTextEncodingName("GBK");//设置文本编码（根据页面要求设置： utf-8）
        webview.setWebChromeClient(new MyWebChromeClient());
    }

然后看一下效果：

js video ios不全屏播放 webview播放视频不能全屏_js video ios不全屏播放_02

问题2：设置全屏后，视频不能播放

全屏按钮出来后，点击全屏，会调用 onShowCustomView() 方法。我们在这个方法中设置横屏的方法，即可实现全屏

//设置横屏
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

但是我设置后，发现无法播放视频，只显示一个黑页面

查了下相关资料后，发现

public void onShowCustomView(View view, CustomViewCallback callback)

这个方法，在设置全屏后会在参数 view 上显示播放的视频。所以，当设置全屏后，需要让这个view显示到最前方。

解决：我们可以在布局文件中，添加一个和webview 同级的 Framlaoyout ，用来存放这个视图

xml 文件：

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/fl_video"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone" />

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</RelativeLayout >

WebChromeClient 具体实现

public class HelpActivity extends TitleBarActivity {

    private WebView webview = null;
    // h5 地址
    private String reurl = "";

    // 用来显示视频的布局
    private FrameLayout mLayout; 

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);
        mLayout = (FrameLayout) findViewById(R.id.fl_video);
        webview = (WebView) findViewById(R.id.webview);
        inieWebView();
     }

    /**
     * 设置webView 相关属性
     */

    private void initWebView() {
        WebSettings setting= webview.getSettings();
        setting.setJavaScriptEnabled(true);// 设置支持javascript脚本
        setting.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置缓存模式
        webview.setVerticalScrollBarEnabled(false); // 取消Vertical ScrollBar显示
        webview.setHorizontalScrollBarEnabled(false); // 取消Horizontal ScrollBar显示
        //设置自适应屏幕，两者合用
        setting.setUseWideViewPort(true);
        setting.setLoadWithOverviewMode(true);

        setting.setAllowFileAccess(true);// 允许访问文件
        setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            setting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        webview.setFocusable(false); // 去掉超链接的外边框
        setting.setDefaultTextEncodingName("GBK");//设置文本编码（根据页面要求设置）
        webview.setWebChromeClient(new MyWebChromeClient());
    }


private class MyWebChromeClient extends WebChromeClient {

        private CustomViewCallback mCustomViewCallback;
        //  横屏时，显示视频的view
        private View mCustomView;
         
        // 点击全屏按钮时，调用的方法
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            super.onShowCustomView(view, callback);

        //如果view 已经存在，则隐藏
            if (mCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }

            mCustomView = view;
            mCustomView.setVisibility(View.VISIBLE);
            mCustomViewCallback = callback;
            mLayout.addView(mCustomView);
            mLayout.setVisibility(View.VISIBLE);
            mLayout.bringToFront();

            //设置横屏
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }

        // 取消全屏调用的方法
        @Override
        public void onHideCustomView() {
            super.onHideCustomView();
            if (mCustomView == null) {
                return;
            }
            mCustomView.setVisibility(View.GONE);
            mLayout.removeView(mCustomView);
            mCustomView = null;
            mLayout.setVisibility(View.GONE);
            try {
                mCustomViewCallback.onCustomViewHidden();
            } catch (Exception e) {
            }
            titleView.setVisibility(View.VISIBLE);
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖屏
        }
    }
  /**
     * 横竖屏切换监听
     */
    @Override
    public void onConfigurationChanged(Configuration config) {
        super.onConfigurationChanged(config);
        switch (config.orientation) {
            case Configuration.ORIENTATION_LANDSCAPE:
                        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
                getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                break;
            case Configuration.ORIENTATION_PORTRAIT:
                getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
                break;
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        webview.destroy();
        webview = null;
    }

}

还需要在 AndroidMainfest.xml 中设置该 Activity相关属性，即横竖屏切换的时候，不进行生命周期的切换

<activity
            android:name=".HelpActivity"
            android:configChanges="orientation|keyboardHidden|navigation|screenSize"
            android:hardwareAccelerated="true"
            android:screenOrientation="portrait"
     />

到这里就大功告成！

还有一点需要注意：当我们播放视频后，如果直接退出，会发现后台仍然在播放。

我们可以在 onDestory 方法中，对webView进行销毁

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。