HTML5 视频未在 android 网络视图中播放
HTML5 video not playing in android webview
HTML5 基本示例在 android 上的 Flutter webview 中运行时遇到问题。
创建了一个基本的 flutter 应用程序（Channel beta，1.26.0-17.8.pre），在 android 模拟器中使用 webview 和 运行ning，加载 HTML 资产文件夹中的文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello World!
<video width="320" height="240" 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 width="320" height="240" controls>
<source src="./video/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
更改对视频的输出或显示没有明显的影响。
这是我看到的：
正如您在此处看到的：https://caniuse.com/?search=ogv，Android WebView 不支持 .ogv 格式。
您可以使用其他视频格式，例如 .mp4!
此外，我认为您应该在 pubspec.yml:
中声明资产视频文件
...
assets:
- assets/test.html
- assets/video/mov_bbb.mp4 # or simply assets/video/
HTML5 基本示例在 android 上的 Flutter webview 中运行时遇到问题。
创建了一个基本的 flutter 应用程序（Channel beta，1.26.0-17.8.pre），在 android 模拟器中使用 webview 和 运行ning，加载 HTML 资产文件夹中的文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello World!
<video width="320" height="240" 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 width="320" height="240" controls>
<source src="./video/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
更改对视频的输出或显示没有明显的影响。
这是我看到的：
正如您在此处看到的：https://caniuse.com/?search=ogv，Android WebView 不支持 .ogv 格式。
您可以使用其他视频格式，例如 .mp4!
此外，我认为您应该在 pubspec.yml:
...
assets:
- assets/test.html
- assets/video/mov_bbb.mp4 # or simply assets/video/