WebView 细节，onShowCustomView与JS注入来实现视频全屏播放

最新推荐文章于 2024-05-09 10:47:27 发布
最新推荐文章于 2024-05-09 10:47:27 发布
阅读量1w 收藏 8
点赞数 1
分类专栏： Android基础 文章标签： WebView 视频播放 硬件加速
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wbwjx/article/details/54645313
版权

概述

WebView是开发中经常使用的组件，在使用中我们需要考虑 文件下载，自定义scheme，重定向，硬件加速，Cookie，HTTPS/HTTP混合等多种问题。

关于 WebView 之前的总结

更多参考：

而在WebView中播放视频，这种场景非常多，需要H5和本地配合才能完成。一种方案是使用onShowCustomView回调的方式，另一种方案就是 JS 绑定回调的方式,。

过程中会遇到如下问题：

关于腾讯视频源 下的视频放大 事件问题

解决方案和参考

针对视频放大的需求，当即一想非常的简单，但是会有一个问题，那就是 非自己的视频源,比如腾讯的视频，采用腾讯自己的iframe包裹，根本不会回调onShowCustomView

贴出如下一些参考方案：

使用onShowCustomView

参考官网介绍- WebView Reference,结合上述方案，自己归纳整理了相关代码，使用示例MainActivity.java:

 VideoEnabledWebChromeClientConfig lVideoEnabledWebChromeClientConfig =
        VideoEnabledWebChromeClientConfig.newBuilder()
            .mNonVideoLayout(nonVideoLayout)
            .mVideoLayout(videoLayout)
            .mLoadingView(loadingView)
            .mWebView(webView)
            .mToggledFullscreenCallback(mToggledFullscreenCallback)
            .build();

    webChromeClient = new VideoEnabledWebChromeClient(
        lVideoEnabledWebChromeClientConfig);
    webView.setWebChromeClient(webChromeClient);
    // Navigate anywhere you want, but consider that this classes have only been tested on YouTube's mobile site
    webView.loadUrl("http://m.youtube.com");

JS注入的方式

这是通过设置 JavascriptInterface来回调本地代码的一种方式，主要是因为 国内视频源 地址下 事件影藏的比较深,核心代码 JsInjectActivity.java：

    /**
     * 对不同的视频网站分析相应的全屏控件
     *
     * @param url 加载的网页地址
     * @return 相应网站全屏按钮的class标识
     */
    public static String referParser(String url) {
      if (url.contains("letv")) {
        return "hv_ico_screen";               //乐视Tv
      } else if (url.contains("youku")) {
        return "x-zoomin";                    //优酷
      } else if (url.contains("bilibili")) {
        return "icon-widescreen";             //bilibili
      } else if (url.contains("qq")) {
        return "tvp_fullscreen_button";       //腾讯视频
      }

      return null;
    }

总结

  • 播放视频，需要开启硬件加速
  • 为了让webview点击link能够下载，需要添加 {@link android.webkit.DownloadListener}
  • WebView 重定向判断可以用 {@link android.webkit.WebView#getHitTestResult()}
  • HTTPS 页面中的 HTTP 元素不显示，如图片，可以用 {@link android.webkit.WebSettings#setMixedContentMode(int)}
  • Webview 开启硬件加速会出现各种坑，可以在 {@link WebViewClient#onPageStarted(android.webkit.WebView, java.lang.String, android.graphics.Bitmap)}中关闭硬件加速，在
    {@link WebViewClient#onPageFinished(android.webkit.WebView, java.lang.String)}中开启硬件加速

相关源码：

扩展阅读：

Boo_Wang
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebView 实现全屏播放视频的示例代码
08-26
主要介绍了WebView 实现全屏播放视频的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android webview注入JS代码 修改网页内容操作
08-19
主要介绍了Android webview注入JS代码 修改网页内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
WebView 视频全屏播放(基于Html5 video)
每一件自己觉得值得的事都要不留余力的去做
11-30 1065
参考：WebView 支持 Html5 video 进行全屏播放 主要方法： onShowCustomView() onHideCustomView() @Override //全屏时调用 public void onShowCustomView(View view, CustomViewCallback callback) { super.onShowCustomView(view, callback); Log.d(
Android-Studio笔记之webview-——实现播放器全屏功能，2024年最新整理几个重要的Android知识(1)
最新发布
2401_84558590的博客
05-09 4295
简历首选内推方式，速度快，效率高啊！然后可以在拉钩，boss，脉脉，大街上看看。简历上写道熟悉什么技术就一定要去熟悉它，不然被问到不会很尴尬！做过什么项目，即使项目体量不大，但也一定要熟悉实现原理！不是你负责的部分，也可以看看同事是怎么实现的，换你来做你会怎么做？做过什么，会什么是广度问题，取决于项目内容。但做过什么，达到怎样一个境界，这是深度问题，和个人学习能力和解决问题的态度有关了。大公司看深度，小公司看广度。大公司面试你会的，小公司面试他们用到的你会不会，也就是岗位匹配度。面试过程一定要有礼貌！
华为手机WebView全屏重写onShowCustomView()白屏问题
凌云志
05-19 1328
最近使用webView开发网页游戏时发现一个现象, 网页会主动调用全屏,他通过视屏全屏的方式来实现,就是调用onShowCustomView()方法. 我在给webView设置setWebChromeClient()时,重写了onShowCustomView()方法,所以导致白屏,用户手动返回即可消失,但白屏问题必须解决,下面有两个方法测试可解决. 解决方法一: 把onShowCustomView()删除,不重写该方法即可,不会出现白屏. 方法二: 在super之前发送主线程,调用onCustom
webview全屏处理，即插即用
kiba_zwei的博客
01-13 672
去年双十一有个直播的需求，听起来很简单，技术也都很成熟，但是真的开始实现后，还是有不少坑的，首先第一个uc内核不支持webRTC协议，需要重新开发chrome内核的webview，其次webview全屏处理、悬浮窗恢复同步、输入框被被输入法遮盖等问题，都是坑，小子挨个踩过，查阅很多前辈资料，把能够即插即用的部分整理出来，以资来者。
android webview showcustomview,在Android 3.1上实现onShowCustomView在HTML5VideoFullScreen中抛出异常...
weixin_42320332的博客
05-28 600
我正在全屏播放html的视频.当我点击全屏按钮在视频方法onShowCustomView被触发.这是我的实现：public void onShowCustomView(View view, CustomViewCallback callback) {super.onShowCustomView(view, callback);if (view instanceof FrameLayout) {cu...
webview
小邓(Java)
09-18 2115
WebView extends AbsoluteLayout implements ViewGroup.OnHierarchyChangeListener ViewTreeObserver.OnGlobalFocusChangeListener java.lang.Object的    ↳ android.view.View
webview开发中使用onShowFileChooser实现web页打开照相机或者图片浏览
easyboot的专栏
01-11 1万+
web页面中input type="file"的事件监听在webview中使用onShowFileChooser实现，代码如下： import android.app.Activity; import android
customview+
江霞的博客
08-19 314
1.----------------------依赖 implementation 'com.android.support:recyclerview-v7:27.1.1' implementation 'com.squareup.okhttp3:okhttp:3.11.0' implementation 'com.google.code.gson:gson:2.2.4' implementa...
Android如何让WebView中的HTML5页面实现视频全屏播放
08-30
WebChromeClient是处理WebView与JavaScript交互的关键组件，特别是对于视频播放等多媒体功能。创建一个自定义的WebChromeClient类，例如`MyWebChromeClient`，并重写`onShowCustomView`方法，用于处理全屏播放的请求...
HTML5视频全屏webview兼容4.4以上
04-14
原作者Cristian Perez cprcrack https://github.com/cprcrack/VideoEnabledWebView
Android使用WebView实现全屏切换播放网页视频功能
08-25
"Android 使用 WebView 实现全屏切换播放网页视频功能" 本文主要介绍了使用 Android 的 WebView 实现...我们可以使用 WebView 实现全屏切换播放网页视频功能，通过定义布局文件和编写 Java 代码来实现全屏播放的功能。
Android编程实现WebView全屏播放的方法(附源码)
09-03
本篇文章将详细介绍如何在Android中通过WebView实现全屏播放视频的功能。 首先，我们需要创建一个布局文件`activity_main.xml`，在这个布局中，我们定义了三个主要的组件：一个FrameLayout（用于全屏播放视频）、一...
用UIWebView，JS获取视频链接
Saick的专栏
01-23 1515
使用一个uiwebview加载一个视频网页，然后在回调方法中 - (void)webViewDidFinishLoad:(UIWebView *)webView {     NSString *lJs = @"document.documentElement.innerHTML"; NSString *lHtml = [webView stringByEvaluatingJavaScriptFr
Android webview网页视频无法全屏解决（onShowCustomView不调用）
热门推荐
好孩子的博客
02-04 2万+
Android使用webview来显示和控制网页上的信息。 然而在使用自己开发的浏览器中打开网页视频时，会出现部分网站的视频全屏存在问题。 问题：部分视频网站（如腾讯视频、搜狐视频、优酷等）全频时只是放大了控件，或者无法做到真正的全屏。 onShowCustomView()方法没有回调的解决办法。
Android中webview填坑系列——向webview注入本地js文件
yyanjun的博客
05-17 2万+
需求：    在使用webview加载H5界面时，注入一个本地js文件（该js文件的作用是采集H5页面中用户的点击事件）。也就是在webview打开了一个H5页面的时候动态的注入一个js，让该js和页面并行执行各自的逻辑。思路：    查阅了一下网上的资料，思路也就两种，这里先列出来，后面再对这两种思路做评判，如下所示：（1）第一种思路：将本地的js文件读出来已字符串的形式，通过webview.l...
Android 使用JS注入获取网页视频链接
一航jason
02-24 2404
Android 使用JS注入获取网页视频链接 思路： 1、通过js注入获取整个网页html。 2、通过jsoup分析获取video播放器的数据源。 一、开启webviewjs功能，注入js回调 mWebView.addJavascriptInterface(new LocalAndroidObj(), "local_android_obj");// js 注入回调 二、通过jsoup 分析网页，使用方法类似jQuery语法。 private class LocalAndroidObj{
Webview动态注入js脚本
一刀三段的专栏
05-12 8398
在webview加载完成后，给所有的img便签加上本地点击事件     /** 要注入的js代码 function(){ var objs = document.getElementsByTagName('img'); for(var i = 0; i <objs.length; i++) { objs[i].onclick = function() {window.toolbox.op
WebView实现视频全屏播放
04-21
WebView实现视频全屏播放需要设置WebView的WebChromeClient，重写其中的onShowCustomView和onHideCustomView方法，再在activity的onConfigurationChanged方法中处理屏幕旋转坑点，具体实现方式可以参考以下代码： //设置WebChromeClient webView.setWebChromeClient(new WebChromeClient(){ //重写onShowCustomView方法，进入全屏的时候调用 @Override public void onShowCustomView(View view, CustomViewCallback callback) { super.onShowCustomView(view, callback); //将webView隐藏 webView.setVisibility(View.GONE); //将视频全屏播放的view添加到activity的根视图中 ViewGroup rootView = getWindow().getDecorView().findViewById(android.R.id.content); rootView.addView(view); //横屏显示 setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); } //重写onHideCustomView方法，退出全屏的时候调用 @Override public void onHideCustomView() { super.onHideCustomView(); //将视频全屏播放的view从activity的根视图中移除 ViewGroup rootView = getWindow().getDecorView().findViewById(android.R.id.content); View view = rootView.getChildAt(rootView.getChildCount() - 1); if (view != null) { rootView.removeView(view); } //将webView显示出来 webView.setVisibility(View.VISIBLE); //竖屏显示 setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); } }); //处理屏幕旋转 @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) { //横屏时，隐藏状态栏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); } else { //竖屏时，显示状态栏 getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); } }

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值