Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video Player #2571

Closed
TheSuunny opened this issue May 24, 2019 · 37 comments
Closed

Video Player #2571

TheSuunny opened this issue May 24, 2019 · 37 comments
Labels

Comments

@TheSuunny
Copy link

Hi, is there any way to play the video through Avalonia?

I found a project, but it works only on Windows, i would like cross-platform.

@WamWooWam
Copy link

WamWooWam commented May 30, 2019

To do this in Avalonia itself seems not-super-feasible, because you'd have to either include some kind of cross platform media player (VLC?), codecs or libraries (like libavcodec) with Avalonia itself (which is a lot of data most people don't need, and probably wouldn't perform great), or hook the low level media APIs in every single supported operating system, which wouldn't be super easy as far as i can tell?

@jmacato
Copy link
Member

jmacato commented May 30, 2019

I think this won't be in our focus for the time-being, as @WamWooWam said, it's a bit tricky to coordinate a sane approach towards media decoding. First off we have a crippling bug for this kind of applications (#2244) because we need to shuttle image data to-&-fro native codecs to managed .NET space and thus will definitely rely with critical time rendering (#2185). Wrappers like FFMpeg.Autogen will definitely ease it up but for now it'd have to take a backseat.

@Sergey-Terekhin
Copy link

May be this project can be ported to Avalonia: https://github.com/unosquare/ffmediaelement - it already has wrappers around ffmpeg and some WPF controls which relatively easy can be ported

@jmacato
Copy link
Member

jmacato commented May 30, 2019

@Sergey-Terekhin yes I've been aware of that project even before I got into Avalonia, but there are still some bugs (#2244) that we need to address first to have an acceptable media playback experience. Besides porting that is not for the faint-hearted, trust me coz i tried before and i judged that we're better off learning how it interacts with ffmpeg.autogen instead of porting ffmediaelement outright.

@shawnallen85
Copy link

videolan/libvlcsharp#173

Started working on this and hopefully it gets merged in. I've tested it on Windows, MacOS, and Linux (only Ubuntu so far) and it works pretty well.

@simonmurrell
Copy link

@shawnallen85 Is there a way to plug your video extension into an Avalonia UI application?

@shawnallen85
Copy link

shawnallen85 commented Mar 18, 2021

Sorry for the delay -- this is what I have in my code for using the video extension:

In the XAML:

    <Panel>
        <controls:Video MediaPlayer="{Binding MediaPlayer}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </Panel>

In the view model:

I have a property for the MediaPlayer (referenced above in the XAML):

public MediaPlayer MediaPlayer { get; }

Then in my functions I control the media player -- that being I start/stop/change the media, etc.

I hope that helps -- let me know.

Happy Thursday!
Shawn

Edit:

I just noticed this, but my code is referencing the control before it was integrated into the LibVLC project officially -- controls:Video might actually be controls:VideoView.

I think the rest is the same.

@simonmurrell
Copy link

Do you have a simple demo with this in?

Sorry for the delay -- this is what I have in my code for using the video extension:

In the XAML:

    <Panel>
        <controls:Video MediaPlayer="{Binding MediaPlayer}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </Panel>

In the view model:

I have a property for the MediaPlayer (referenced above in the XAML):

public MediaPlayer MediaPlayer { get; }

Then in my functions I control the media player -- that being I start/stop/change the media, etc.

I hope that helps -- let me know.

Happy Thursday!
Shawn

Edit:

I just noticed this, but my code is referencing the control before it was integrated into the LibVLC project officially -- controls:Video might actually be controls:VideoView.

I think the rest is the same.

@shawnallen85
Copy link

I don't -- I'll see if I can modify the app I was using this in to use the official control and push it to github in the next day or so.

@shawnallen85
Copy link

shawnallen85 commented Mar 18, 2021

I figured if I didn't knock it out now it wouldn't happen anytime soon :P.

https://github.com/shawnallen85/Homer

@simonmurrell
Copy link

simonmurrell commented Mar 19, 2021 via email

@shawnallen85
Copy link

@simonmurrell Any luck?

@zls3201
Copy link

zls3201 commented Apr 4, 2021

I success。
you can read

https://github.com/donandren/vlcsharpavalonia/blob/master/src/LibVLCSharp.Avalonia/NativeVideoPresenter.cs

https://github.com/hudec117/Mpv.NET-lib-/blob/master/src/Mpv.NET.WPFExample/MainWindow.xaml.cs

My Code:

*.csproj add line

<PackageReference Include="Mpv.NET" Version="1.2.0" />
/// <summary>
    /// Avalonia VideoView for Windows, Linux and Mac.
    /// </summary>
    public class VideoView : NativeControlHost
    {
        private MpvPlayer player;
        IPlatformHandle CreateWin32(IPlatformHandle parent)
        {
            //var control = base.CreateNativeControlCore(parent);
            player = new MpvPlayer(parent.Handle, "win-x64/mpv-1.dll")
            {
                Loop = true,
                Volume = 100
            };
            player.Load("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
            player.Resume();

            return parent;// new PlatformHandle(control.Handle, "HWND");

        }

        void DestroyWin32(IPlatformHandle handle)
        {
            player.Dispose();
            base.DestroyNativeControlCore(handle);
        }

        protected override IPlatformHandle CreateNativeControlCore(IPlatformHandle parent)
        {
            if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
                return CreateWin32(parent);
            return base.CreateNativeControlCore(parent);
        }

        protected override void DestroyNativeControlCore(IPlatformHandle control)
        {
            if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
                DestroyWin32(control);

            base.DestroyNativeControlCore(control);
        }
    }

xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"			 
        xmlns:vlc="clr-namespace:ZTool.Common;assembly=ZTool"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="ZTool.Controls.VideoPlayerView">
	<vlc:VideoView  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</UserControl>

@bbhxwl
Copy link

bbhxwl commented Aug 6, 2021

Do any of you have a simple VLC demo? I want to use it on raspberry pie, otherwise I can only use pyqt5 it, but I'm familiar with C#

@Symbai
Copy link
Contributor

Symbai commented Sep 16, 2021

@shawnallen85 There is currently no way to draw something on top of the mediaplayer (because it has no content property) but for LibVLCSharp's WPF implementation it is. Any chance this can be done for Avalonia as well?

@Geektoolkit
Copy link

Seconding this....I'd really really like to be able to draw on top of the video. Right now event trying to put something on top of it in Z order isn't working (I'm not using full screen mode). I'd really like to be able to have info about the video thats playing show up in an avalonia window I control while the videos playing

@radiolondra
Copy link

For anyone is interested:

I created an open source repo on Github which tries to overcome some Avalonia LibVlcSharp issues and missed things.
Give a look to YAMP (Yet Another Media Player) here.
I created also the setups (x86 & x64) to install YAMP and test it directly (version 0.1.10.220) here.

It is obviously just a starting point. A lot of work is still needed to have YAMP stable.
Any help, contribution, discussion, improvement ideas or just one coffee together is welcome.
Many thanks for your attention.

@Symbai
Copy link
Contributor

Symbai commented Mar 23, 2022

I created an open source repo on Github which tries to overcome some Avalonia LibVlcSharp issues and missed things.

As far as I've seen on your project description it does not overcome any of the mentioned issues. It still needs an own window and you still cannot draw elements on top of it. Besides, it is not a control but an application which isn't really what people here are looking for (although they could learn/read the source code). Still thanks for sharing.

@radiolondra
Copy link

@Symbai Yes it doesn't solve the issues, just tries to live with them and have a decent result.

@Geektoolkit
Copy link

I've spent quite a few hours on this working on a raspberry pi, and here's what I've found (This is all raspberry pi specific, but I find it interesting because it may help others learn what I learned..which is that video is insanely complex)

  1. Even VLC, which is the preferred player for a rapsberry pi bullseye version of Debian...has problems with overlaying...simply turning on subtitles or placing a window on top of it when it's not in full screen mode causes issue
  2. Creating a window in avalonia and then calling 'activate' will bring it over the top of vlc, but again due to point 1...it causes it to perform horribly
  3. If VLC is in full screen mode, nothing can be placed on top of it (avalonia or otherwise), but it performs great
  4. I and my team tried working around this by using the logo feature of VLC, and that cause perf to drop also
  5. Launching VLC 'windowed' and then trying to resize it using width/height command line args doesn't work (7 year old bug they say is fixed in 4.0...but I don't see an arm build and it's in alpha)
  6. I tried using MPV and FFPlay...by using process.start and the correct command lines you can full screen launch them, but they also either fall over when a window is placed over them or aren't GPU accelerated on a pi (I hear I can build a version of them, but then there are reports bullseye broke it, etc)
  7. To make windows transparent on debian using compmgr, use -o.0 when running it and then avalonia transparency works, otherwise you get white backgrounds (this is how you can get a window on top of a video

Note: On windows...this all works flawlessly for me. No perf issues with avalonia or vlc, and you can easily put a window on top of the video using Activate, with it transparent and everything working.

I've tried the VLCcontrol (which I'll continue to use...it's very nice) for Avalonia built upon libvlc, as well as tried shell executiong VLC.

Those are my findings thought they'd be useful for others. Radiondra if your MPV solution works on arm/debian I could give it a shot, but unless you're using a hardware accleerated version of MPV it wont do me or others much good that are doing this on arm/debian platforms like the pi4

@radiolondra
Copy link

radiolondra commented Mar 23, 2022

@Geektoolkit YAMP doesn't use MPV, it uses LibVlc mediaplayer.
You did really an interesting job with Raspberry. I'm working with a couple of pi4 for a TinyML project and peraphs I could use one of them to try Vlc&avalonia things there and test. I'll let you know. The only variable against this is time, which is too short. Anyway, I'll try for sure.

@radiolondra
Copy link

radiolondra commented Mar 29, 2022

I created 2 repos on Github to show working samples on how to successfully embed VLC MediaPlayer into Avalonia Windows and UserControls.

Still trying to find the best way to add a UserControl (i.e. media player buttons) on top of MediaPlayer. (Edit: found the way, see my next post)

The simplest and faster way is to handle a new window (something similar has been used in YAMP), but I desire to find a more flexible and integrated way.

Help, suggestions and comments are welcome (obviously).
Thanks.

@radiolondra
Copy link

radiolondra commented Mar 31, 2022

How to add a UserControl on top of VLC MediaPlayer

I modified the Avalonia Window repository to show how to put a UserControl on top of MediaPlayer (VideoView).

To do this I added a Content property to VideoView which will create its own new top window and add the Content to this window.

You can create the Content as a new UserControl (for example, a MediaPlayer set of controls) and add this UserControl to the VideoView content, like in:

<vlcsharp:VideoView
   HorizontalAlignment="Stretch"
   VerticalAlignment="Stretch"
   x:Name="VideoViewer">

   <!-- Content -->
   <Panel
	VerticalAlignment="Bottom"
	Opacity="0.8"
	Background="Gray">
	<controls:PlayerControls/>
   </Panel>
</vlcsharp:VideoView>

In this repo I created a user control with 2 buttons: Play and Stop.
The control position is at bottom and the buttons are shown using PointerEnter/PointerLeave events, with a simple opacity set to 0.8 (Enter) and to 0 (Leave). Too lazy to add some kind of animation to the UserControl.

I'll modify the Avalonia UserControl repository too, adding the same feature, even though you could do it by yourselves.

Remember that, even though it works, the code is very basic and could need still a bit of work to be perfect.

EDIT: Just updated UserControl repository with the same features.

@radiolondra
Copy link

radiolondra commented Apr 2, 2022

EDIT:
Successfully tested on Kubuntu 18.04

AvaVLCWindow-Kubuntux64

Successfully tested on MacOS 10.13 (High Sierra)

AvaVLCWindow-MacOS

@radiolondra
Copy link

Test on Raspberry Pi (Raspbian Stretch)
926MB RAM

As @Geektoolkit said, generated on-top window has no transparency and opacity is not respected. Like @Geektoolkit, I tried every possible combinations of Background and TransparencyLevelHint without any success. Maybe Avalonia has some issues for linux-arm or maybe there are some other settings I don't know.

AvaVLCWindow-RaspberryPi

Having 926MB of RAM only and just 1 CPU, the video is played in jerks. Anyway, it works BUT the transparency and opacity issues.

@Geektoolkit
Copy link

To get opacity try xcommgr -o.0 to see if that helps with opacity. I got the pi to work using that command/setting

@SilkyFowl
Copy link

@radiolondra
I can confirm that this approach works just fine with Avalonia.FuncUI(F#)! Thanks for sharing the idea!

@radiolondra
Copy link

radiolondra commented Apr 5, 2022

New test on Raspberry Pi (DietPi with MATE or Xfce)

It works fine!

Transparency and Opacity are fully honored.

In my opinion, the problem is not Avalonia vs Raspberry, the problem is what is installed or not in Raspberry.

With DietPi OS and MATE (or Xfce) as X, the sample works perfectly. And playback is smooth without jerks, interruptions or whatever.

As root, I installed libx11-dev, libvlc-dev and vlc, copied the published sample (built in Windows 10 with dotnet publish -c release -f net5.0 -r linux-arm), chmod 777 the whole folder content and ran the sample. It has to be ran as root or with sudo.

rpi
rpi_000

@Geektoolkit
Copy link

OMG this would be a game changer for those of us doing video on raspberry pis! I'll give this a try asap...that looks amazing! And from what I'm gathering, the video is playing without stuttering?!

@radiolondra
Copy link

radiolondra commented Apr 5, 2022

OMG this would be a game changer for those of us doing video on raspberry pis! I'll give this a try asap...that looks amazing! And from what I'm gathering, the video is playing without stuttering?!

The video is playing per-fec-tly! And my Raspberry is a pi3 model b, so just 1 GB of RAM. But it works like a charme.

DietPi is lighter than whatever else Raspberry OS, but not less complete. Use the 32bits or you'll go against other issues.

Be sure to install MATE or Xfce, I didn't test yet with the other X options.

Be prepared to swallow a couple of shirts before to have it installed in a clean way. I had to flash it 3 times (on the SD).

At start, it uses the old text installation (it remembers the old RedHat way to install Linux) and it seems not so obvious. After some attempts (you have to manually configure the network too) you will thanks this kind of approach, as it's very powerful.

Remember to use "root" (default password is "dietpi") to install what you need (libx11-dev, libvlc-dev and vlc). Ther's no X pre-installed, so you have to choose which X you want and install it (MATE).

Once X is installed, if you have the default (text) login start MATE with normal "startx" command.

Now copy your published (full) project somewhere (I put mine in root/Desktop), then add needed libraries above. I don't know if they are the ONLY libs needed, they were for my test project.

You should set exec rights to your project files (I used chmod 777 for all) and start your app as root (or using sudo).

Everything should work.
Avalonia now is perfect for Raspberry too.

@radiolondra
Copy link

I have just created a pull request on Videolan/LibVLCSharp to include my solution in the distro.
videolan/libvlcsharp#294

@radiolondra
Copy link

radiolondra commented Apr 14, 2022

For anyone is interested:

A sample to apply in the real world the changes I did in LibVLCSharp.Avalonia

I created YAMP2 repository (Yet-Another-Media-Player v2) here, which fully uses my new LibVLCSharp.Avalonia.Unofficial lib.

To make tests, build it by yourselves and run.

Enjoy.

@radiolondra
Copy link

radiolondra commented Apr 27, 2022

The new release of the Unofficial Avalonia LibVLCSharp, allows to display multiple draggable controls over the scene of a video played with LibVLCSharp in an Avalonia app.

For anyone is interested.
Enjoy.

output.mp4

@radiolondra
Copy link

radiolondra commented Sep 19, 2022

All the links updated (latest libs and samples versions)

External Links

VLC video player inside an Avalonia Window/UserControl embedding single static customizable control (e.g.player buttons)
LibVLCSharp.Avalonia.Unofficial

VLC video player inside an Avalonia Window/UserControl embedding multiple draggable customizable controls (e.g.player buttons, images,...)
LibVLCSharp.Avalonia.Unofficial.UCanvas

LibVLCSharp.Avalonia.Unofficial Samples
LibVLCSharp.Avalonia.Unofficial.Samples

LibVLCSharp.Avalonia.Unofficial.UCanvas sample
LibVLCSharp.Avalonia.Unofficial.UCanvas.Samples

YAMP 2 - Open source video player sample using LibVLCSharp.Avalonia.Unofficial library
Github sources
Watch YAMP2 in action

@xiaokun
Copy link

xiaokun commented Mar 8, 2023

The overlapped window which hosts the content will be disappeared if it lost focus on macOS 12.6.3.

I changed some code (add a TextBox) in MainWindow.axaml to produce this problem:

<Grid RowDefinitions="*, 40"  ColumnDefinitions="*">		
       <controls:PlayerControl  Name="Player"/>
        <Grid Grid.Row="1" >
            <TextBox  />
        </Grid>
</Grid>

the overlapped content will disappear if your click on the TextBox.

Maybe someone has solution. Thanks.

@clawton
Copy link

clawton commented Mar 16, 2023

Anyone tried this on a DRM framebuffer based configuration?

@timunie
Copy link
Contributor

timunie commented Mar 16, 2023

I'm going to move this issue into discussions as there is nothing to do on Avalonia code side

@AvaloniaUI AvaloniaUI locked and limited conversation to collaborators Mar 16, 2023
@timunie timunie converted this issue into discussion #10683 Mar 16, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
Projects
None yet
Development

No branches or pull requests