从 url 视频中获取高度 webview 反应原生 - Javascript

当在Web页面中播放视频时，我们可能需要根据视频的高度大小来调整 Webview 的高度，以确保页面正常显示。本文将介绍如何从 URL 视频中获取高度大小，并将其传递给 Webview。

使用HTML5 Video API

首先，我们需要使用 HTML5 Video API 来获取视频的元数据信息，例如视频的高度和宽度。

const video = document.createElement('video');
video.src = 'your_video_url.mp4';
video.addEventListener('loadedmetadata', onLoadedMetadata);
function onLoadedMetadata() {
  const height = video.videoHeight;
  const width = video.videoWidth;
  console.log(`The video dimensions are ${width}x${height}`);
  //do something with the height and width
}

传递高度给 Webview

在获取视频高度之后，我们需要将其传递给 Webview，以调整 Webview 的高度。

const height = video.videoHeight;
// assume webview is a reference to your webview element
webview.style.height = `${height}px`;

WebView 反应原生

如果 Webview 是在原生应用中嵌入的，我们还需要确保 WebView 可以响应原生代码的高度调整。

首先，在您的原生代码中，您需要定义一个带有 onHeightUpdated() 方法的 Webview 的 JavaScript 接口。

public class MyWebViewClient extends WebViewClient {
    private WebView mWebView;
    public void setWebView(WebView webView) {
        mWebView = webView;
        mWebView.addJavascriptInterface(new WebAppInterface(), "Native");
    }
    public void onHeightUpdated(int height) {
        if(mWebView != null) {
            mWebView.setLayoutParams(new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT, height));
        }
    }
    private class WebAppInterface {
        @JavascriptInterface
        public void onHeightUpdated(int height) {
            MyWebViewClient.this.onHeightUpdated(height);
        }
    }
}

然后，在您的 Web 页面中，您需要通过调用 JavaScript 接口的 onHeightUpdated() 方法来传递高度参数。

const height = video.videoHeight;
// assume Native is a reference to your WebView's JavaScript interface
Native.onHeightUpdated(height);

结论

在本文中，我们介绍了如何使用 HTML5 Video API 和 JavaScript 接口来从 URL 视频中获取高度，并将其传递给 WebView，以便调整 WebView 的高度。通过这种方法，我们可以确保视频在 Web 页面上正确显示，并且 WebView 可以与原生代码应用无缝交互。