0

Having trouble getting HTML5 basic example to work in Flutter webview on android.

Created a basic flutter app (Channel beta, 1.26.0-17.8.pre) with a webview and running in android emulator, loading a HTML file from assets folder:

<!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>

with 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());
  }
}

And 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

Result is video element loading but the video itself does not load in the player. I have run this HTML file natively in the browser and it loads the source video fine.

Run output:

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

NOTE: I created a new project and used a standard HTML boilerplate with the same main.dart file as above

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

And the output from the run command oddly contains:

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.

Any idea why this isn't working and how i can get it to work?

EDIT: As suggested, tried using mp4 source file and adding reference to the assets section of pubspec.yml.

pubspec.yml assets section after edit:

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

test.html after edit

<!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>

Change had no identifiable effect to output or to display of the video.

This is what i am seeing:

Screenshot

Improve this question

1 Answer 1

Reset to default
2

As you can see here: https://caniuse.com/?search=ogv, the .ogv format is not supported on Android WebView. You can use other video formats, such as .mp4!

Also, I think you should probably declare the asset video file in the pubspec.yml:

...

assets:
  - assets/test.html
  - assets/video/mov_bbb.mp4 # or simply assets/video/
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Ok thanks, I started with MP4 though, and only moved to Ogg when i didn't have any luck. I'll try again and declare the asset and see if that is indeed the answer, and report back.
I have tried it with no success as expected. Please see additional detail in OP
It's strange! However, I tried with the flutter_inappwebview plugin and it worked! Maybe you could try it
I tried to do it using flutter_inappwebview but getting the same result. Any way you can share your code using flutlab.io or similar? I am probably making a silly mistake.
Yeah sure! I will add a new comment here as soon as possible
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.