Media Player对UNO中的Web Assembly的支持

问题描述

我正在UNO上开发一个用于播放视频的APP。它在WASM以外的其他平台上都可以正常工作。我检查了代码，意识到没有为Web Assembly实现MediaPlayerElement。当前是否有任何可用的解决方法，或者它正在开发中并且即将推出，还是我在这里遗漏了什么？

解决方法

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

有两点需要注意：

• HtmlElement属性告诉Uno创建<video/>标签作为该控件的基础DOM元素
• OnSourceChanged()回调通过使用Uno的ExecuteJavascript() extension method将Source传递到本地<video/>。

    [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>

将来可能会在Uno Platform中添加适当的MediaPlayerElement支持，您可以通过upvoting the issue帮助确定优先级。