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

Question

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

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

Answer 1

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

有几点需要注意:

• HtmlElement属性告诉 Uno 创建一个 <video/>标签作为该控件的底层 DOM 元素
• OnSourceChanged()回调传递 Source给原生<video/>通过使用 ExecuteJavascript() extension method来自宇野。

    [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 future 可能会在 Uno 平台中添加支持，您可以通过 upvoting the issue 帮助确定优先级。 .