Pixelated Videos on some devices(Package: video_player) #162979
Comments
|
I had the same problem and it turns out that this error occurs from version (Flutter) 3.24.0 onwards. And it only happens in Android versions lower than 13 onwards. The temporary solution is to upgrade to Flutter version 3.22.3. This error occurred a while ago, however, it happens again in recent versions. You can read more 24888 |
|
Hi @ZaynMeledath, what version of video_player are you using? Do you have impeller enabled in your project? Does this still happen if you disable impeller? What versions of android are those devices running and do you know the GPUs of the devices? Can you check if this still reproduces on the master channel? |
Thanks bro🤜🏻🤛🏻. Gonna try this |
|
|
@ZaynMeledath, can you also try the latest stable version to see if this reproduces? |
|
flutter version Flutter 3.29.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 35c388afb5 (11 days ago) • 2025-02-10 12:48:41 -0800
Engine • revision f73bfc4522
Tools • Dart 3.7.0 • DevTools 2.42.2The video problem keeps happening, I'm emulating on Android 10.
|
|
Hi @wbbtech, does this happen if you disable impeller? Also, are you seeing this on any physical devices? |
|
The error occurs with or without impeller, and I have only been able to test it on emulators, however, users report similar problems on their Android devices with versions 11 and below. |
|
@wbbtech, please provide a minimal sample with a video we can use to reproduce the issue so that we can properly investigate this. Thank you |
|
You can see the steps to reproduce the problem in the following link: #162890 (comment) |
|
Reproducible using the code sample from #162890 (comment), pasted below for convenience. Labeling for further investigation.
code sampleimport 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late VideoPlayerController _videoCtrl;
late ValueNotifier<bool> _isPlaying;
@override
void initState() {
_isPlaying = ValueNotifier<bool>(false);
/// Video en formato horizontal
final horizontal = Uri.parse("https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4");
/// Video en formato vertical
/// CC0 Creative Commons, from: Vídeo de Taryn Elliott de Pexels: https://www.pexels.com/es-es/video/una-persona-escondida-en-un-campo-de-flores-levanto-la-mano-haciendo-el-signo-de-la-paz-3127177/
/// 240x426: https://videos.pexels.com/video-files/3127177/3127177-sd_240_426_24fps.mp4
/// 360x640: https://videos.pexels.com/video-files/3127177/3127177-sd_360_640_24fps.mp4
/// 540x960: https://videos.pexels.com/video-files/3127177/3127177-sd_540_960_24fps.mp4
/// 720x1280: https://videos.pexels.com/video-files/3127177/3127177-hd_720_1280_24fps.mp4
/// 1080x1920: https://videos.pexels.com/video-files/3127177/3127177-hd_1080_1920_24fps.mp4
final vertical = Uri.parse("https://videos.pexels.com/video-files/3127177/3127177-sd_240_426_24fps.mp4");
_videoCtrl = VideoPlayerController.networkUrl(vertical);
_videoCtrl.initialize().then((_) {
setState(() {});
});
_videoCtrl.setLooping(true);
_videoCtrl.addListener(() {
if (_videoCtrl.value.isPlaying != _isPlaying.value) {
_isPlaying.value = _videoCtrl.value.isPlaying;
}
});
super.initState();
}
@override
void dispose() {
_videoCtrl.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Center(
child:
_videoCtrl.value.isInitialized
? AspectRatio(aspectRatio: _videoCtrl.value.aspectRatio, child: VideoPlayer(_videoCtrl))
: const SizedBox.square(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_isPlaying.value) {
_videoCtrl.pause();
} else {
_videoCtrl.play();
}
},
child: ValueListenableBuilder<bool>(
valueListenable: _isPlaying,
builder: (_, play, __) => Icon(play ? Icons.pause : Icons.play_arrow),
),
),
),
);
}
}flutter doctor -v |
|
@danagbemava-nc what host platform are you running on? Intel mac? |
|
@jonahwilliams, I'm running on an m1 mac |
|
Any update on this? i'm seeing the same issue as per the original post, with the diagonal green pixel. i.e. not the other issue with green on the side. Appears to be happening on Xiaomi Redmi phones occuring to my app users. I cant replicate as i dont have a device (physical or otherwise) to test it with. |
|
The explaination of this problem is here: #144407 TLDR: android does not support crop/rotate ec etera. Plugins, in this case the video player plugin, need to correct rendering with their own rotations and clips. This is not an engine / impeller / skia issue. |
|
The |
|
Got report from Xiaomi user as well - what is interesting, if they replay video recorded from camera, it looks fine. But screen recorded video replay looks exactly like in the issue
|
Steps to reproduce
Create a video player using the video_player package and play any video.
My app users reported this problem.
It happened in Oneplus node, realme etc.
Expected results
Expected result was to play videos seamlessly.
Actual results
Getting Pixelated Videos on some devices like Oneplus node, realme etc.
4-5 of my app users have reported this issue.
Code sample
Code sample
[Paste your code here]Screenshots or Video
Screenshots / Video demonstration
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
The text was updated successfully, but these errors were encountered: