当前位置：首页 > article >正文

WebView中操作视频播放，暂停

article 2025/2/27 11:36:30

1. `WebView` 的基本概念

WebView 是一个基于 Chromium 的视图组件，它可以显示网页内容（HTML、CSS、JavaScript 等），允许用户在 Android 应用中直接交互。开发者可以通过 WebView 加载网页，执行 JavaScript，并处理网页中的多种事件。

2. 主要特点

嵌入式浏览器: 可以将完整的 HTML 5 浏览器功能嵌入到应用中。
支持多媒体: 可以播放音频和视频，并显示各种媒体类型。
JavaScript 支持: 可以执行 JavaScript，并与网页进行交互。
离线支持: 可以缓存网页内容，以支持离线浏览。
自定义浏览体验: 开发者可以完全控制网页的加载、导航和交互行为。

3.WebView的使用

使用很简单，不在此赘述

4.对视频基本操作

播放，暂停，静音等通用操作很简单直接贴代码

4.1播放：

mWebView.evaluateJavascript("document.querySelector('video').play();", null);

4.2暂停：

mWebView.evaluateJavascript("document.querySelector('video').pause();", null);

4.3静音：

mWebView.evaluateJavascript("document.querySelector('video').muted="true";", null);

4.4音量控制

mWebView.evaluateJavascript("document.querySelector('video').volume="0.7";", null);

5.特定元素操作

比如视频中返回按键的监听，这个就需要获取到元素的选择器名称。

1.获取元素选择器名称

选择器解释

点（.）: 在 CSS 选择器中，点 . 用来选择带有指定类的元素。例如：
- .back-icon：选择所有具有 class="back-icon" 的元素。
ID选择器: 如果您要选择一个 ID，以 # 开头。例如：
- #myElement 选择具有 id="myElement" 的元素。
元素选择器: 直接使用元素的名称（如 div, span, p 等）用于选择该类型的元素。例如：
- div：选择所有 <div> 元素。

这里以Microsoft Edge浏览器为例，其他浏览器没什么差别

右键单击按钮，选择“检查”（Inspect），或使用快捷键 Ctrl + Shift + I（Windows）或 Cmd + Option + I（Mac）进入开发者工具界面，用元素选择器选中需要控制的元素，在元素栏中可以看到对应元素的class name。有了classname就可以对元素进行监听

2.监听元素点击事件

// 添加 JavaScript 接口
            mWebView.addJavascriptInterface(new WebAppInterface(), "AndroidFunction");

            // 注入 JavaScript 代码以监听点击事件
            mWebView.setWebViewClient(new WebViewClient() {
                @Override
                public void onPageFinished(WebView view, String url) {
                    view.evaluateJavascript(
                            "(function() { " +
                                    "  var backIcon = document.querySelector('.back-icon');" +
                                    "  if (backIcon) {" +
                                    "      backIcon.addEventListener('click', function(event) {" +
                                    "          AndroidFunction.onBackIconClicked(); " +
                                    "      });" +
                                    "  }" +
                                    "})()", null);
                }
            });


 // 创建 JS 接口
    public class WebAppInterface {
        @JavascriptInterface
        public void onBackIconClicked() {
            Log.i(TAG, "onBackIconClicked: ");
            activity.finish();

        }
    }

添加 JavaScript 接口:
- 添加了一个 Java 接口 WebAppInterface，用作 JavaScript 与 Android 代码之间的桥梁。使用 @JavascriptInterface 注解标记的方法可以从 JavaScript 中调用。
动注入 JavaScript:
- 在onPageFinished方法中，注入了 JavaScript，用于将点击事件监听器添加到 .back-icon 元素。
- 当用户点击该元素时，调用 Android 接口 onBackIconClicked()。
处理点击事件:
- 在 Java 接口的 onBackIconClicked() 方法中，您可以添加任何需要的逻辑，这里直接关闭当前activity。