webView与h5交互时，支持视频播放，并且支持横屏全屏播放

最新推荐文章于 2023-12-04 11:06:26 发布
最新推荐文章于 2023-12-04 11:06:26 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_30882221/article/details/84490396
版权

webView与h5交互时，发现视频播放这块一直会有问题，会发现1.退出当前页面视频还在继续播放，2，视频不支持全屏播放。那我们来额问题。

视频支持全屏播放

1.webView设置支持视频大小。一般有video标签，object标签

String head = "<head><style>img{max-width: 100%; width:auto; height: auto;}video{width: 100%;  height: 240;object-fit:cover;}object{width: 100%;  height: 240;object-fit:cover;}</style></head>";

String html = "<html>" + head + "<body>" + htmlContent + "</body></html>

mWebView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);

2.设置webView支持视频显示/隐藏全屏，实现WebChromeClient类，重写三个方法getVideoLoadingProgressView（）， onShowCustomView(View view, CustomViewCallback callback)，onHideCustomView() 

mWebView.setWebChromeClient(new WebChromeClient() {

            /*** 视频播放相关的方法 **/

            @Override
            public View getVideoLoadingProgressView() {
                FrameLayout frameLayout = new FrameLayout(mContext);
                frameLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
                return frameLayout;
            }

            @Override
            public void onShowCustomView(View view, CustomViewCallback callback) {
                showCustomView(view, callback);
            }

            @Override
            public void onHideCustomView() {
                hideCustomView();
            }
        });

 /**
     * 隐藏视频全屏
     */
    private void hideCustomView() {
        if (customView == null) {
            return;
        }

        setStatusBarVisibility(true);
        FrameLayout decor = (FrameLayout) getWindow().getDecorView();
        decor.removeView(fullscreenContainer);
        fullscreenContainer = null;
        customView = null;
        customViewCallback.onCustomViewHidden();
        mWebView.setVisibility(View.VISIBLE);
        // 设置竖屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        // 取消全屏
        final WindowManager.LayoutParams attrs = getWindow().getAttributes();
        attrs.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);
        getWindow().setAttributes(attrs);
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
    }

    /**
     * 设置全屏
     *
     * @param visible
     */
    private void setStatusBarVisibility(boolean visible) {
        int flag = visible ? 0 : WindowManager.LayoutParams.FLAG_FULLSCREEN;
        getWindow().setFlags(flag, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }

 

退出时暂停网页中播放的视频

    @Override
    protected void onPause() {
        super.onPause();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            if (mWebView != null) {
                mWebView.onPause(); // 暂停网页中正在播放的视频
            }

        }
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        if (mWebView != null) {
            mWebView.clearHistory();
            mWebView.clearCache(true);
        }
    }

爱上网的大花猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webview 加载h5页面，播放视频+全屏，实现简单封装
行走江湖的文艺猿 的专栏
09-29 1万+
前段时间项目中用到了h5。从目前的市场来看，原生和h5的结合受到很多公司的欢迎，刚好最近微信也推出了它自己的“小程序”，这在Android程序员之间也掀起了波澜，引起大家讨论。 个人觉得Google提供的webview有很多的坑，我这次就踩了不少，比如在某些版本的系统上某个方法不会执行，或者执行的顺序不一样，有的方法会多执行一次，说白了就是兼容性做的很差，究其主要原因，是Android4
使用webview播放视频，全屏状态下适应横屏播放
shly1988的博客
07-06 3070
最近在做播放视频的功能，选择在webview中加载视频，视频可以全屏播放，但是当设备横放时，播放内容不能随着设备的旋转而转成横屏的全屏播放模式。需要的效果是：应用其他页面只能是竖屏模式，当全屏播放视频时，要适应横屏。   由于使用webview加载视频，不能直接控制播放视频的控件，没有办法知道视频是否进入全屏模式。   经过网上一番搜索，找到以下几个方法，使用通知获取进入全屏状态： 一：
Android中WebView播放网上视频，横竖屏切换
04-09
最近写了一个webview播放网络视频的代码，发现有个横竖屏切换，在哪里卡住了这是我在网上找的例子，传上来供大家下载。
Android 使WebView支持HTML5 Video（全屏）播放的方法
weixin_30731287的博客
10-16 161
转载自：http://blog.csdn.net/zrzlj/article/details/8050633 1）需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别，如果不需要的View可以声明不要用加速，但是需要在代码中做，具体如下： a. 如果要声明整个应用都要加速： ...
Android编程使WebView支持HTML5 Video全屏播放的解决方法
09-03
主要介绍了Android编程使WebView支持HTML5 Video全屏播放的解决方法,较为详细的分析了全屏播放所涉及的相关技巧,并给出了完整代码下载地址供读者参考,需要的朋友可以参考下
uniapp 中 H5端 使用 video 使其全屏横屏播放
热门推荐
leaf的博客
09-13 1万+
起因： H5端 uniapp 提供的 video 组件，在点击其全屏按钮后，进入全屏状态，视频显示部分仍然为竖屏显示，无法转换成横屏，查阅了大量的资料。 官方人员说 H5端不支持 了解详情 但是客户提出来了就要想办法解决 解决方案： 自定义 video 组件，不使用官方组件 使用 css 进行样式修改强制 横屏 就有了第一版 获取video标签，对齐进行css样式修改… 简单粗暴 需要把video原生带的全屏隐藏掉(有这个属性show-fullscreen-btn改成false就可以了)，自己再写一个
Android如何让WebView中的HTML5页面实现视频全屏播放
08-30
WebChromeClient是处理WebView与JavaScript交互的关键组件，特别是对于视频播放等多媒体功能。创建一个自定义的WebChromeClient类，例如`MyWebChromeClient`，并重写`onShowCustomView`方法，用于处理全屏播放的请求...
Android使用WebView实现全屏切换播放网页视频功能
08-25
在上面的布局文件中，我们定义了一个 FrameLayout 用于全屏播放视频，一个 Button 用于切换横屏，一个 WebView 用于播放视频。 接下来，在 MainActivity.java 文件中，我们需要编写以下代码： ```java public ...
WebView 实现全屏播放视频的示例代码
08-26
WebView 实现全屏播放视频的示例代码 WebView 是一个基于 WebKit 引擎的浏览器组件，它可以在 Android 应用程序中嵌入网页内容。在这个示例代码中，我们将学习如何使用 WebView 来实现全屏播放视频的功能。 第一步...
video html5全屏播放横屏,WebView 支持 Html5 video 进行全屏播放
weixin_29091105的博客
06-10 1491
背景webView播放视频时候，会遇到一些问题，比如无法全屏播放视频等。解决方案有以下两种，这里着重介绍第二种解决方案。实现一个网络视频播放器来播放网络视频(建议利用开源框架)；自定义WebView实现利用H5的Video标签来播放视频，可以解决基本的视频播放需求，但是一些效果难以实现；手机中HTML5网页上点全屏后的效果。一、启动硬件加速；需要在AndroidManifest.xml文件中声明需...
h5 视频全屏-横屏实现，遇到问题以及解决方案
ringlot的博客
10-14 6217
最近需要实现h5 视频全屏也就是横屏，横屏后需要将相关视频展现在侧边栏。考虑到h5是不能让手机强制横屏的，只能考虑用css 样式上横屏显示video
uni-app 微信公众号H5开发 里面的video 组件点击全屏后不会自动横屏播放 2
学习路上的小刘
10-27 1038
文章目录前言一、废话不多说直接上代码总结 前言 根据上次发布的文章进一步改善了全屏横屏播放，去除了导航栏,实现伪全屏，但是ios系统不行，只能用自带的全屏按钮，让用户点击。 来点我遇到的问题吧 1.就是一开始我用的uni.getSystemInfo(OBJECT) 来获取当前手机的可视窗口的宽度和高度，结果发现，我手机可以。大BOSS的手机上完全撑大了，看不见取消全屏的图标了，我翻了上篇文章发现我没有用到这个系统的可视窗口的高度和宽度，来进行全屏。所以修改成原来的样子 2.全屏按钮的隐藏处理，一开始是想用
uni-app解决video组件全屏时页面横竖错乱问题
最新发布
培根芝士的专栏
12-04 2643
使用 video组件播放视频时，在苹果手机上全屏后页面横竖屏错乱，点击返回按钮退出全屏，页面变成横屏，在iOS16 以上都会出现这个问题。video 组件添加fullscreenchange监听事件，当退出全屏时手动设置竖屏。修改manifest.json配置文件。
uniapp项目H5端横屏问题-样式错乱+字体大小+video
Penk的博客
06-14 7444
uniapp项目H5端，如果手机打开了自由旋转，横屏问题就会出来，样式错乱、字体大小、以及使用遮罩层级没有video 高的问题。
Android--（三星手机）webview嵌套H5，点击H5按钮跳转手机拍照，横屏拍照导致失败或崩溃问题
binbin
01-26 2922
Android--（三星手机）webview嵌套H5，点击H5按钮跳转手机拍照，横屏拍照导致失败或崩溃问题（完美解决） 最近在改一个需求，用的是第三方公司的一个H5链接（Udesk公司），发现WebView嵌套了H5，点击按钮跳转拍照，横屏拍的时候会失败或者崩溃 Android Camera 三星BUG : 最近在Android项目中使用拍照功能 , 其它型号(华为，小米，中兴，魅族...)的手机运行成功了 唯独在三星的相机上遇到了bug . BUG具体体现为 : (1) 摄像头拍照后图片数据
Android h5全屏播放video
hunter800421的专栏
10-25 5522
H5全屏播放，在iOS系统上基本没有什么问题，但是在android系统，却又各种各样的问题。 H5自身对全屏的支持 这个其实不难，只需在video标签加个webkit-playsinline属性即可，这个属性基本上在基于webkit内核的移动端都是没问题的，此全屏非彼全屏，它是在浏览器视窗内的全屏，并不是占居整个手机的全屏，当然我们做web端需要的就是在document的body内的视窗范围的
安卓 webview播放视频及横屏
Cheng的博客
12-30 4117
问题描述： 在项目中，会有在webview嵌入的网页中播放视频的需求，本来以为Android的WebView应该是默认支持视频播放的，不会有太大的问题，但是经过测试后，发现两个大问题： 有些手机无法正常播放视频，出现白屏或者只有声音没有画面等，还有不能对视频进行操作（比如播放、暂停、自动播放等） 视频无法全屏播放 解决视频在webview中正常播放： 这个只需要在对应的Activity中加入android:hardwareAccelerated="true"即可，如果不加的话，会在部分手机上出现白屏或有
android webview支持h5视频全屏播放
06-06
是的，Android WebView 支持 HTML5 视频全屏播放。在 Android 4.4 及以上版本，WebView 默认启用了 HTML5 视频全屏播放功能。如果要使用此功能，需要在 HTML 代码中添加 `webkit-playsinline` 属性和 `playsinline` 属性。同时，在 AndroidManifest.xml 文件中需要添加 `android:hardwareAccelerated="true"` 属性。在 WebView 中播放视频时，如果用户点击屏幕上的全屏按钮，视频将会进入全屏模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值