MD-WIDGETS: Video cannot be played in Chrome on Linux

[tonypioneer]

Description

When playing the video in Chrome on Linux, there will only be a black window. The audio can be played normally, but no video.

Originally posted by @gjwgit in #25 (comment)

[Miduo666]

In lib/src/widgets/video_widget.dart:

import 'dart:io'; //Not available on Web
import 'package:path_provider/path_provider.dart'; //Doesn't work on Web

Future _initializeVideo() async {
final localFile = File(rawLocalPath); //Crashes on Web
final isFileExists = await localFile.exists();
final tempDirPath = (await getTemporaryDirectory()).path; //Throws on Web
}

[gjwgit]

Tested - this remains an issue. Any status update on this @tonypioneer - it can be done or not feasible for Web?

[tonypioneer]

This issue has been fixed.

On Flutter desktop, media_kit uses libmpv, so it can decode lots of formats. On Flutter web (Chrome), media_kit does not use mpv—it embeds an HTML <video> element, so playback is limited to whatever Chrome can decode.

That’s why the audio can be played on web browser but the video cannot: the file often contains a video codec Chrome can’t decode (or the stream is packaged in a way Chrome won’t play), while mpv on desktop handles it fine.

In our example app, the video seems to be encoded with H.265/HEVC, it’s the classic “works in mpv, fails in browsers” case (HEVC support on Chrome is inconsistent and depends on platform/hardware/OS codecs). So, we can re-encode it to a more web-friendly format to fix this issue by running

ffmpeg -i sample_video.mp4 -c:v libx264 -profile:v main -pix_fmt yuv420p -c:a aac -b:a 128k output.mp4
rm sample_video.mp4
mv output.mp4 sample_video.mp4

Here we use MP4 as the container. The video codec is H.264 (AVC), and the audio codec is AAC-LC.

[tonypioneer]

After switching the codec to H.264, we can also reduce the file size by using

ffmpeg -i sample_video.mp4 \
  -vf "scale=960:-2" \
  -r 20 \
  -c:v libx264 -profile:v main -pix_fmt yuv420p \
  -crf 29 -preset slow \
  -c:a aac -b:a 96k \
  output.mp4

[Miduo666]

Hi @tonypioneer @gjwgit ,
I found another critical issue on the Web platform after the recent codec fix.

The video seek bar (progress bar) is non-functional. When trying to drag the slider to a specific timestamp, it doesn't seek; instead, the playhead immediately snaps back to 0:00 (the beginning).

new_record2026-01-08.030018.mp4

[Miduo666]

95f582e06ea31c5b6daddee3076fc2cc.mp4

[gjwgit]

Thanks @lambadajester50-byte. The specific issue (video can not be played) is fixed in the PR. I have merged the updated video format into dev. The progress bar video seek seems like a different issue. Perhaps that can be moved into a separate issue./ticket. Thanks,