VideoPlayer Rendering outside the container area [Bug report]

[premingiet]

Describe the bug When i try to put IjkPlayer inside a container with fixed width and height, the player is rendered outside the container boundary but the player bottom control panel and the player background stays inside the container.

Is it possible to render the player inside a container along with maintaining the aspect ratio of video and also how to hide the bottom controls and how to change the player black background color ?

To Reproduce Steps to reproduce the behavior:

1. create a stateful widget and in build context, return a container with fixed width and height
2. Add the IJKplayer as child of that container
3. now try to run a video which has unproportional width and height, forexample video width of 240 px and height of 136 px
4. Watch the video player getting rendered outside the width of the container.

I tried with different videos and not all videos show such issues. Only few videos have such issues. I would suggest to try it with a video which has 240px width and 136px height

Screenshots

Screenshot of sample test code

Screenshot of app before video is loaded

Screenshot of app after video is loaded

Screenshot of video details i used to test

Flutter version

[√] Flutter (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18363.657], locale en-US)
    • Flutter version 1.12.13+hotfix.8 at C:\flutter
    • Framework revision 0b8abb4724 (6 days ago), 2020-02-11 11:44:36 -0800
    • Engine revision e1e6ced81d
    • Dart version 2.7.0


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\premi\AppData\Local\Android\Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = C:\Users\premi\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 43.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] Connected device (1 available)
    • E • G350RT058157000F • android-arm64 • Android 8.1.0 (API 27)

• No issues found!

Plugin version flutter_ijkplayer: ^0.3.5+1

[premingiet]

This Happens on some android devices and not on all devices.

I tried on device TenorE (10orE) android phone with android 8.0 and there was this issue, but i also tried on device Motorola G2 (XT1068) with android 6.0 and there was no issue at all.

by the way TenorE (10orE) android phone has no GPU and 2GB RAM

where as Motorola G2 (XT1068) has Adreno 305 GPU and 1 GB RAM

Using Fijkplayer fixed the rendering issue but Fijkplayer has issues regarding rendering video with less RAM, there video is playing like slow motion and audio playing normal.

Using Flutter_ijkplayer the video playback is very smooth and no issues with that but there is rending issues like video player rendering outside of container area as described above.

[CaiJingLong]

Can you provide more code?

The widgets of wrap your ijkplayer?

[CaiJingLong]

I can't reproduce it.

[premingiet]

Let me create a test github repo along with video recording of both devices where in 1 device issue happens and other device no issue happens, that way its easy to debug the issue.

I will add the repo link within 1 hour

[premingiet]

Here is repository of sample flutter app https://github.com/premingiet/flutter_ijk_test

Youtube link of Video of me testing on 2 devices https://www.youtube.com/watch?v=MjOaIvB8Xa8

Skip to Below Time Stamps Of Video (Also mentioned on youtube video description)

Details of timestamp	youtube TimeStamp
1st Device Test (Issue shows on this device)	1:30
2nd Device Test (No Issues)	3:20

That same video which i tested on both devices, are there inside assets/video/zh240_small.mp4

[CaiJingLong]

Sorry, I clone your repository, but I can't reproduce in my device. Because I can't find no GPU device.

[premingiet]

What i feel is there is no issue with player core. Because fijkplayer has the core taken from flutter_ijkplayer and when i use fijkplayer, there are no rendering issues, but fijkplayer had issues with playing videos on low end devices and that was fixed by setting the following options specifically there

   // HAD TO SET THESE OPTIONS FOR FIJKPLAYER
    player.setOption(FijkOption.playerCategory, "reconnect" , 5);
    player.setOption(FijkOption.playerCategory, "framedrop" , 5);
    player.setOption(FijkOption.playerCategory, "enable-accurate-seek" , 1);
    player.setOption(FijkOption.playerCategory, "mediacodec" , 1);
    player.setOption(FijkOption.playerCategory, "packet-buffering" , 1);
    player.setOption(FijkOption.playerCategory, "soundtouch" , 1);
    player.setOption(FijkOption.playerCategory, "start-on-prepared" , 1);
    player.setOption(FijkOption.formatCategory, "fflags" , "fastseek");

I feel there is issue with calculating width and height during rendering it in texture.

So i will have to use fijkplayer for now until rendering issue is fixed in flutter_ijkplayer.

[befovy]

@CaiJingLong https://github.com/befovy/fijkplayer/issues/176 this is the related issue.