AvaloniaUI：无法在 UserControl 中嵌入 VideoView 控件 (LibVlcSharp)

Question

我是 AvaloniaUI 0.10.5 的新手。目前我正在 macOS 上的应用程序中使用 VideoView 控件 (LibVLCSharp.Avalonia 3.5.0)。该代码是 Donadren 示例 2 的副本：（https://github.com/donandren/vlcsharpavalonia/tree/master/samples/LibVLCSharp.Avalonia.Sample）。

视频播放器在 Window 控件中工作正常，但是当我将代码复制到 UserControl 中（以便在应用程序中的不同位置重用播放器）时，我听到视频的声音，但听不到图像。在控制台中我有这个错误：

[h264 @ 0x7ff85e8d3600] get_buffer () failed
[h264 @ 0x7ff85e8d3600] thread_get_buffer () failed
[h264 @ 0x7ff85e8d3600] decode_slice_header error
[h264 @ 0x7ff85e8d3600] no frame!

我尝试在网上搜索但找不到任何东西。

你能帮我吗，谢谢，抱歉我的英语不好。

<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:viewModels="clr-namespace:Avalonia.NETCoreMVVMApp3.ViewModels"
             xmlns:avalonia="clr-namespace:LibVLCSharp.Avalonia;assembly=LibVLCSharp.Avalonia"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Avalonia.NETCoreMVVMApp3.Views.VlcControl">
    <Design.DataContext>
        <viewModels:VlcControlViewModel/>
    </Design.DataContext>
    <Grid RowDefinitions="*, Auto">
      <avalonia:VideoView x:Name="VideoView" Grid.Row="0" MediaPlayer="{Binding MediaPlayer}">
      </avalonia:VideoView>
      <Grid Grid.Row="1" RowDefinitions="Auto,Auto,Auto">
        <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
          <TextBlock Text="File (url):" Grid.Column="0" VerticalAlignment="Center" />
          <AutoCompleteBox Name="mediaUrl" Text="{Binding MediaUrl, Mode=TwoWay}" Items="{Binding Played}" FilterMode="Contains" Grid.Column="1" IsDropDownOpen="False" />
          <Button Content="Open File" Command="{Binding OpenCommand}" Grid.Column="2" />
        </Grid>
        <Grid Grid.Row="1" ColumnDefinitions="Auto,*,Auto">
          <TextBlock Text="{Binding CurrentTime}" Grid.Column="0" />
          <TextBlock Text="{Binding Duration}" Grid.Column="2" />
          <Slider Minimum="0" Maximum="100" Value="{Binding Position}" Grid.Column="1" />
        </Grid>
        <Grid Grid.Row="2" ColumnDefinitions="Auto, *,Auto">
          <StackPanel Orientation="Horizontal" Grid.Column="0" Spacing="5">
            <Button Content="Play" Command="{Binding PlayCommand}" />
            <Button Content="Stop" Command="{Binding StopCommand}" />
            <Button Content="Pause" Command="{Binding PauseCommand}" />
            <Button Content="-1s" Command="{Binding BackwardCommand}" />
            <Button Content="+1s" Command="{Binding ForwardCommand}" />
            <Button Content="Next Frame" Command="{Binding NextFrameCommand}" />
          </StackPanel>

          <Grid ColumnDefinitions="Auto,*" Grid.Column="1">
            <TextBlock Text="{Binding State, StringFormat='State:\{0\}'}" Grid.Column="0" VerticalAlignment="Center" />
            <ScrollViewer Grid.Column="1" MaxHeight="40" HorizontalScrollBarVisibility="Disabled">
              <TextBlock Margin="5,0,0,0" Text="{Binding Information}" TextWrapping="Wrap" VerticalAlignment="Center" />
            </ScrollViewer>
          </Grid>

          <StackPanel Orientation="Horizontal" Grid.Column="2" Spacing="2">
            <StackPanel Orientation="Horizontal">
              <TextBlock Text="Rendering:" VerticalAlignment="Center" />
              <ComboBox SelectedIndex="{Binding #VideoView.VlcRenderingOptions}">
                <ComboBoxItem Content="{x:Static avalonia:LibVLCAvaloniaRenderingOptions.VlcNative}" />
                <ComboBoxItem Content="{x:Static avalonia:LibVLCAvaloniaRenderingOptions.Avalonia}" />
                <ComboBoxItem Content="{x:Static avalonia:LibVLCAvaloniaRenderingOptions.AvaloniaCustomDrawingOperation}" />
              </ComboBox>
            </StackPanel>
            <CheckBox Content="Stats" IsChecked="{Binding #VideoView.DisplayRenderStats}" />
            <CheckBox Content="Volume:" IsChecked="{Binding !IsMuted, Mode=TwoWay}" />
            <Slider IsEnabled="{Binding !IsMuted}" Minimum="0" Maximum="100" Width="200" Value="{Binding Volume}" VerticalAlignment="Center">
              <Slider.Styles>
                <Style Selector="Slider:disabled">
                  <Setter Property="Opacity" Value="0.5" />
                </Style>
              </Slider.Styles>
            </Slider>
          </StackPanel>
        </Grid>
      </Grid>
  </Grid>
</UserControl>

Answer 1

众所周知，Avalonia 的问题是无法在 Avalonia UserControl 中使用 VideoView（仅在窗口中），并且无法在 VLC MediaPlayer 之上的层中使用控件。

凭借一点“运气”，我设法组合了一个相当优雅的方法（也许是许多可能的方法之一，尽管到目前为止还没有）来解决所有这些问题。

因此，我在 Github 上创建了 2 个存储库来共享并展示如何：

在 Avalonia Window 中嵌入 LibVLCSharp Avalonia VLC VideoView (AvaVLCWindow)
在 Avalonia UserControl 中嵌入 LibVLCSharp Avalonia VLC VideoView (AvaVLCControl)
在 VideoView 之上放置并使用 Avalonia UserControl (VLC MediaPlayer)，例如，一组用于控制 VLC MediaPlayer（在两个存储库中）。

随意探索和理解代码并构建/运行它。需要 VS 2019。

标准 VideoView.cs 代码（来自 LibVLCSharp.Avalonia 标准项目）已被修改以达到列出的结果，并且修改后的（非常小的）LibVLCSharp.Avalonia 项目已包含在两个存储库中。

为了能够将 Avalonia UserControl 放在 VLC MediaPlayer 之上，我向 VideoView 添加了一个新的 Content 属性，它将创建并处理自己的新顶部窗口，并将 Content 添加到此窗口。

您可以创建 Content 作为新的 UserControl（例如，MediaPlayer 控件集）并将此 UserControl 添加到 VideoView 内容，如下所示：

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

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

为了显示我达到的结果，我在两个存储库中创建了一个带有两个按钮的用户控件：播放和停止。控件位置位于底部，按钮使用 PointerEnter/PointerLeave 事件显示，因此将鼠标移动到正确的位置时，按钮将显示/隐藏。我使用了一个简单的非动画不透明度，设置为 0.8（进入）和 0（离开）。

您可以添加某种动画和/或扩展功能。我懒得在存储库中这样做，因为它们只是 POC（概念证明）。

注意：所有内容均已在 Windows 10、Kubuntu 18.04、MacOS 10.13、Raspberry Pi3 Model B DietPi(MATE) 上进行测试，代码源没有任何更改。

编辑： 在Kubuntu 18.04

上测试成功

在 MacOS 10.13 (High Sierra) 上测试成功

编辑： 在 Raspberry DietPi（MATE 或 Xfce）上成功测试

之前使用 Raspbian Stretch 进行的测试不起作用（透明度和不透明度不起作用，并且播放充满了抖动和像素化）

使用 DietPi 和 MATE（或 Xfce），完全尊重覆盖控件（按钮）的透明度和不透明度属性。播放流畅，不会出现卡顿、中断等情况。

作为 root，我安装了

libx11-dev, libvlc-dev and vlc

，复制了已发布的示例（使用

dotnet publish -c release -f net5.0 -r linux-arm

在 Windows 10 中内置），

chmod 777 the whole folder content

并运行了示例。 必须以 root 身份或使用 sudo 运行。

编辑2022年4月27日

新发布的非官方 Avalonia LibVLCSharp，允许在 Avalonia 应用程序中使用 LibVLCSharp 播放的视频场景上显示多个可拖动控件。

任何人都感兴趣。享受吧。

所有链接均已更新（最新的库和示例版本）

非官方 Avalonia LibVLCSharp 链接

Avalonia 窗口/用户控件内的 VLC 视频播放器嵌入单个静态可自定义控件（例如播放器按钮） LibVLCSharp.Avalonia.Unofficial

Avalonia 窗口/用户控件内的 VLC 视频播放器嵌入多个可拖动的可自定义控件（例如播放器按钮、图像等） LibVLCSharp.Avalonia.Unofficial.UCanvas

LibVLCSharp.Avalonia.非官方示例 LibVLCSharp.Avalonia.Unofficial.Samples

LibVLCSharp.Avalonia.Unofficial.UCanvas 示例 LibVLCSharp.Avalonia.Unofficial.UCanvas.Samples

YAMP 2 - 使用 LibVLCSharp.Avalonia.Unofficial 库的开源视频播放器示例 Github 来源观看 YAMP2 的实际操作

Answer 2

LibVLCSharp 版本 3.8.3 VideoView 现在支持 UserControl 和子内容

样品：

https://github.com/videolan/libvlcsharp/blob/3.x/samples/LibVLCSharp.Avalonia.Sample/Views/VideoPlayer.axaml

AvaloniaUI：无法在 UserControl 中嵌入 VideoView 控件 (LibVlcSharp)

问题描述投票：0回答：2

2个回答

最新问题

AvaloniaUI：无法在 UserControl 中嵌入 VideoView 控件 (LibVlcSharp)

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2