[Enhancement] Display first frame(thumbnail) without player.play about media-kit HOT 11 CLOSED

Should be fixed in #90.

from media-kit.

It's not.

from media-kit.

@canewsin I am calling jump on the player immediately after opening the video file to achieve this on the Windows platform. It works in my use case - not sure that it's best practices.

from media-kit.

Best practice is to serve a thumbnail from the backend & use it as a placeholder before video starts to play.

I'll be able to tell better about feasibility of this around the end of this month (& if possible, get it over the line myself).
I'm engaged with few things these days, so unable to make any statements.

from media-kit.

I did exactly that:-

• Showing the first frame during entry slide-in up until await player.play() completes
• Showing the last frame of the video after video completion (streams.isCompleted) up until slide-out completes

However, as shown in the video, I am having 2 problems

• The player takes about 1 to 2 seconds after await player.play() to actually start playing the video. You can see the black screen in between the first frame and play, in the screencast below.
• After completing the video, the player shows the first frame, instead of pausing on the last frame. You can see the brief flicker to the first frame on completion of the video below.

Here's the screencast. The slide animation is a 3 second one, during which the outgoing one displays the last frame of the video (separately held screenshot in jpg format, not displayed via mediaKit) and the incoming one displays the first frame until the video starts.

from media-kit.

If someone wants to take a look themselves (I aim for this in post this release):
You only need to play around the logic within Dart (package:media_kit) & tweak how file etc. are loaded. Very simple logic. This has nothing to do within platform specific video embedding code.

from media-kit.

I optimized it for audio applications initially. Now it needs to be updated to meet video rendering requirements i.e. no missed frames, initial frame draw etc. etc. Specifically here (how I've abstracted internal libmpv playlist management to be more friendly within Player):

Project is still at early stage (only first version out). For normal applications, which just want to play video in a performant & stable way, this is still good. Further tweaks & optimizations here & there are left.

https://github.com/alexmercerind/media_kit/blob/03d8a702d5c0600e94548fd68a6b71c1485a0e49/media_kit/lib/src/libmpv/player.dart#L138-L165
https://github.com/alexmercerind/media_kit/blob/03d8a702d5c0600e94548fd68a6b71c1485a0e49/media_kit/lib/src/libmpv/player.dart#L88-L135

from media-kit.

I was tweaking around with the player code. As you have mentioned, it gets slightly better when the width & height are specified during initialization - the black flicker that occurs before playing (as seen in my screencast) got reduced to a moment's flicker.

videoController = await VideoController.create(player.handle,  width: videoResolutionX, height: videoResolutionY);

Another hack - initialize the player with play: true. Then, pause & seek to zero. This gets the video fully ready to play. On next call to play, the video gets unpaused which takes a lot less time.

await player.open(mk.Playlist(
          [
            mk.Media('asset://assets/${widget.itemVideo.filename}')
          ]
      ), play: true, evictCache: false);
await player.pause();
await player.seek(Duration.zero);      

Now there's zero flicker on start. Yet to test it thoroughly though. That's about the first problem. Still facing the second problem - on completion of the playlist, the player rests on the first frame of the video instead of blank / last frame. Let me tweak around and post an update on that problem.

It's pretty impressive to see what media_kit can do while barely at 1.0 👍

from media-kit.

@srix55

media_kit is not 1.0.0, it's 0.0.1! Expect breaking changes & massive API refinements (like next update) before 1.0.0.

Another hack - initialize the player with play: true. Then, pause & seek to zero. This gets the video fully ready to play. On next call to play, the video gets un-paused which takes a lot less time.

Yes!
I was referring to these minor workarounds & refinements (or "hacks" as you said). The internal Dart sided logic needs to be changed to fit every possible case. Currently AFAIK video is redundantly reloaded due to jump. I'll optimize the things to their best.

evictCache does nothing but hold extras that you specify in Media constructor.

from media-kit.

Yes... 0.0.1 😄 & can play 5 hd playlists in parallel

Let me fool around with the code a bit. Currently trying to plug the memory leak in linux.

from media-kit.

Hi!

It's fixed in latest update: media_kit: ^0.0.2.
macOS & iOS support. A large number of stability improvements, new features & bug-fixes.

Next update will bring Android & Web support.
Thanks!

from media-kit.