HTML5 视频未在 android webview 中播放

Posted 2023-05-07

技术标签:

【中文标题】HTML5 视频未在 android webview 中播放【英文标题】：HTML5 video not playing in android webview 【发布时间】：2021-05-30 16:02:06 【问题描述】：

无法让 html5 基本示例在 android 上的 Flutter webview 中工作。

创建了一个基本的 Flutter 应用（Channel beta，1.26.0-17.8.pre），带有 web 视图并在 android 模拟器中运行，从 assets 文件夹加载 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello World!

<video   controls>
    <source src="./video/small.ogv" type="video/ogg">
    Your browser does not support the video tag.
</video>

</body>
</html>

与 main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:convert';
import 'package:webview_flutter/webview_flutter.dart';

void main() 
  runApp(TestApp());


class TestApp extends StatefulWidget 
  @override
  HelpScreenState createState() 
    return HelpScreenState();
  


class TestAppState extends State<TestApp> 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Flutter WebView',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: TA());
  


class TA extends StatelessWidget 
  WebViewController _controller;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text('Test')),
      body: WebView(
        initialUrl: 'about:blank',
        onWebViewCreated: (WebViewController webViewController) 
          _controller = webViewController;
          _loadHtmlFromAssets();
        ,
      ),
    );
  

  _loadHtmlFromAssets() async 
    String fileText = await rootBundle.loadString('assets/test.html');
    _controller.loadUrl( Uri.dataFromString(
        fileText,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
    ).toString());

还有 pubspec.yaml

name: webviewtest
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^1.0.7
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  
  assets:
    - assets/test.html

结果是视频元素加载，但视频本身未加载到播放器中。我已经在浏览器中本地运行了这个 HTML 文件，它可以很好地加载源视频。

运行输出：

Launching lib\main.dart on sdk gphone x86 arm in debug mode...
Running Gradle task 'assembleDebug'...
√ Built build\app\outputs\flutter-apk\app-debug.apk.
Installing build\app\outputs\flutter-apk\app.apk...
Debug service listening on ws://127.0.0.1:53746/JOjSncP67JU=/ws
Syncing files to device sdk gphone x86 arm...
I/WebViewFactory(31624): Loading com.google.android.webview version 83.0.4103.106 (code 410410681)
I/ple.webviewtes(31624): The ClassLoaderContext is a special shared library.
D/nativeloader(31624): classloader namespace configured for unbundled product apk. library_path=/product/app/WebViewGoogle/lib/x86:/product/app/WebViewGoogle/WebViewGoogle.apk!/lib/x86:/product/app/TrichromeLibrary/TrichromeLibrary.apk!/lib/x86:/product/lib:/system/product/lib
W/Gralloc4(31624): allocator 3.x is not supported
I/ple.webviewtes(31624): The ClassLoaderContext is a special shared library.
D/nativeloader(31624): classloader namespace configured for unbundled product apk. library_path=/product/app/WebViewGoogle/lib/x86:/product/app/WebViewGoogle/WebViewGoogle.apk!/lib/x86:/product/app/TrichromeLibrary/TrichromeLibrary.apk!/lib/x86:/product/lib:/system/product/lib
I/cr_LibraryLoader(31624): Loaded native library version number "83.0.4103.106"
I/cr_CachingUmaRecorder(31624): Flushed 3 samples from 3 histograms.
I/TetheringManager(31624): registerTetheringEventCallback:com.example.webviewtest
W/chromium(31624): [WARNING:dns_config_service_posix.cc(341)] Failed to read DnsConfig.
D/HostConnection(31624): HostConnection::get() New Host Connection established 0xf7085d40, tid 31716
W/ple.webviewtes(31624): Accessing hidden method Landroid/media/AudioManager;->getOutputLatency(I)I (greylist, reflection, allowed)
D/HostConnection(31624): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_native_sync_v4 ANDROID_EMU_dma_v1 ANDROID_EMU_direct_mem ANDROID_EMU_host_composition_v1 ANDROID_EMU_host_composition_v2 ANDROID_EMU_vulkan ANDROID_EMU_deferred_vulkan_commands ANDROID_EMU_vulkan_null_optional_strings ANDROID_EMU_vulkan_create_resources_with_requirements ANDROID_EMU_YUV_Cache ANDROID_EMU_async_unmap_buffer ANDROID_EMU_vulkan_ignored_handles ANDROID_EMU_vulkan_free_memory_sync ANDROID_EMU_vulkan_shader_float16_int8 ANDROID_EMU_vulkan_async_queue_submit GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_host_side_tracing ANDROID_EMU_async_frame_commands ANDROID_EMU_gles_max_version_2 
E/chromium(31624): [ERROR:gl_surface_egl.cc(549)] eglChooseConfig failed with error EGL_SUCCESS
D/EGL_emulation(31624): eglCreateContext: 0xf7083dc0: maj 2 min 0 rcv 2
D/EGL_emulation(31624): eglMakeCurrent: 0xf7083dc0: ver 2 0 (tinfo 0xc4127230) (first time)
E/chromium(31624): [ERROR:gl_surface_egl.cc(549)] eglChooseConfig failed with error EGL_SUCCESS
I/VideoCapabilities(31624): Unsupported profile 4 for video/mp4v-es
W/cr_MediaCodecUtil(31624): HW encoder for video/avc is not available on this device.
D/EGL_emulation(31624): eglCreateContext: 0xf7085e20: maj 2 min 0 rcv 2

注意：我创建了一个新项目并使用了标准的 HTML 样板，其中包含与上面相同的 main.dart 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello Flutter!
</body>
</html>

运行命令的输出奇怪地包含：

I/VideoCapabilities(31299): Unsupported profile 4 for video/mp4v-es
W/cr_MediaCodecUtil(31299): HW encoder for video/avc is not available on this device.

知道为什么这不起作用以及如何让它起作用吗？

编辑：按照建议，尝试使用 mp4 源文件并添加对 pubspec.yml 资产部分的引用。

编辑后的pubspec.yml资产部分：

  assets:
    - assets/test.html
    - assets/video/mov_bbb.mp4

编辑后的test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello World!
<video   controls>
    <source src="./video/mov_bbb.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
</body>
</html>

更改对视频的输出或显示没有可识别的影响。

这就是我所看到的：

【问题讨论】：

【参考方案1】：

如您在此处看到的：https://caniuse.com/?search=ogv，Android WebView 不支持 .ogv 格式。您可以使用其他视频格式，例如.mp4！

另外，我认为您可能应该在pubspec.yml 中声明资产视频文件：

...

assets:
  - assets/test.html
  - assets/video/mov_bbb.mp4 # or simply assets/video/

【讨论】：

好的，谢谢，不过我是从 MP4 开始的，只是在我没有任何运气的时候才搬到 Ogg。我会再试一次并声明资产，看看这是否确实是答案，然后报告。我已经尝试过了，没有像预期的那样成功。请在 OP 中查看更多详细信息这很奇怪！但是，我尝试使用 flutter_inappwebview 插件，它成功了！也许你可以试试我尝试使用 flutter_inappwebview 进行操作，但得到了相同的结果。您可以使用 flutlab.io 或类似的方式共享代码吗？我可能犯了一个愚蠢的错误。是的，当然！我会尽快在这里添加新评论

以上是关于HTML5 视频未在 android webview 中播放的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 视频标签未在 Iphone Safari 上显示。就像视频没有加载一样

HTML5 视频未在 chrome 中加载，但在打开开发人员控制台时有效

Safari html5 视频 mp4 未在 htaccess 文件夹中播放，[重复]

Android 模拟器未在 webview 中显示 html5 画布

HTML5 音频未在 Android 4.0.4 设备本机浏览器中多次播放

YouTube 视频未在 WebView 中播放 - Android