media-player - UNO 中对 Web Assembly 的媒体播放器支持

Question

我正在 UNO 上开发一个用于播放视频的 APP。它在除 WASM 之外的其他平台上运行良好。我检查了代码并意识到MediaPlayerElementWeb Assembly 没有实现。

目前是否有任何可用的解决方法，或者它是否正在进行中并将很快可用，或者我在这里遗漏了什么？

标签： media-playerwebassemblyuno-platform

Answer 1

要在 Uno Platform WebAssembly 应用程序上播放媒体，您可以查看Ch9 应用程序中的HtmlMediaPlayer实现。完整代码如下。

有几点需要注意：

• 该HtmlElement属性告诉 Uno 创建一个<video/>标签作为该控件的底层 DOM 元素
• OnSourceChanged()回调使用Uno的扩展方法将传递Source给本机。<video/>ExecuteJavascript()

    [HtmlElement("video")]
    public sealed partial class HtmlMediaPlayer : Border
    {
        public HtmlMediaPlayer()
        {
            Background = new SolidColorBrush(Colors.Transparent);
        }

        public static readonly DependencyProperty SourceProperty = DependencyProperty.Register(
            "Source", typeof(string), typeof(HtmlMediaPlayer), new PropertyMetadata(default(string), OnSourceChanged));

        public string Source
        {
            get => (string)GetValue(SourceProperty);
            set => SetValue(SourceProperty, value);
        }

        private static async void OnSourceChanged(DependencyObject dependencyobject, DependencyPropertyChangedEventArgs args)
        {
            if (dependencyobject is HtmlMediaPlayer player)
            {
                var encodedSource = WebAssemblyRuntime.EscapeJs("" + args.NewValue);
                var js = $"element.controls = true; element.src=\"{encodedSource}\";";
                player.ExecuteJavascript(js);
            }
        }
    }

您可以在第 9 章中看到如何将其用作以下内容的替代品MediaPlayerElement：

            <not_wasm:MediaPlayerElement x:Name="MediaPlayer"
                                         Source="{Binding VideoSource}"
                                         IsFullWindow="{Binding Parent.IsVideoFullWindow, Mode=TwoWay}"
                                         Height="180" />
            <wasm:Border>
                <localwasm:HtmlMediaPlayer x:Name="MediaPlayer"
                                           Height="180"
                                           Source="{Binding VideoUri}" />
            </wasm:Border>

MediaPlayerElement将来可能会向 Uno 平台添加适当的支持，您可以通过支持问题来帮助优先考虑它。