MediaElementとSliderでの動画再生アプリで、スマートに再生時間の取得・設定がしたい

Question

現在動画再生アプリを作成しています。

MediaElementで動画の再生
Sliderでシークバーを実装しています。
また、00:10:15/00:30:00というような感じで、TextBoxで再生中動画の総時間と現在再生中の時間を表示しています。
他にも再生ボタン等もありますが、今回の質問には関係ないので割愛します。

MediaElementの再生時間(MediaElement.Position)の取得はBindingに対応していないため、
ビヘイビアを使用して、500msのタイマーで定期的にPositionを取得するようにしています。
また、Sliderによる再生箇所の変更・ユーザー指定による指定箇所へのジャンプの機能を実装するためにもビヘイビアを使用しています。

        /// <summary>
        /// 再生時間バインド用プロパティ
        /// </summary>
        public static readonly DependencyProperty MediaPositionProperty =
            DependencyProperty.RegisterAttached(
                "MediaPosition",
                typeof(long),
                typeof(MediaControlBehavior),
                new PropertyMetadata(0L, OnMediaPositionPropertyChanged));

        /// <summary>
        /// MediaPositionPropertyのゲッター
        /// </summary>
        /// <param name="target"></param>
        /// <returns></returns>
        public static long GetMediaPosition(DependencyObject target)
        {
            return (long)target.GetValue(MediaPositionProperty);
        }

        /// <summary>
        /// MediaPositionPropertyのセッター
        /// </summary>
        /// <param name="target"></param>
        /// <param name="value"></param>
        public static void SetMediaPosition(DependencyObject target, long value)
        {
            target.SetValue(MediaPositionProperty, value);
        }

        /// <summary>
        /// 再生時間変更時処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private static void OnMediaPositionPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            var mediaElement = GetMediaElement(sender);
            mediaElement.Position = TimeSpan.FromSeconds(GetMediaPosition(sender));
        }

        /// <summary>
        /// タイマーTick処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private static void TimerTick(object sender, EventArgs e)
        {
            SetMediaPosition(_mediaElement, (long)_mediaElement.Position.TotalSeconds);
        }

このMediaPositionPropertyに対してViewModelで定義したプロパティをBindingすることで再生位置の取得を行っています。
また、SliderのValueに同じプロパティをBindingすることで、MediaElementの再生位置をそのままSliderに反映させて、
Sliderの位置を変えたときにMediaElementに反映できるようにしています。

// VM-----------------------------------------------------------------
        /// <summary>
        /// 再生箇所
        /// </summary>
        public long MediaPosition
        {
            get => _mediaPosition;
            set => SetProperty(ref _mediaPositionManager, value);
        }
// VM-----------------------------------------------------------------

// View---------------------------------------------------------------
<MediaElement x:Name="MediaPlayer" Source="{Binding MediaSource, Mode=OneWay}"
              b:MediaControlBehavior.MediaPosition="{Binding MediaPosition, Mode=TwoWay}">

<Slider x:Name="SeekBar" Value="{Binding MediaPosition, Mode=TwoWay}"/>
// View---------------------------------------------------------------

ただし、この実装方法だと少し気持ちの悪い動きになってしまいます。
タイマーによる定期的なMediaElement.Positionの確認時、ビヘイビアで定義したMediaPositionPropertyに対して代入することで、
BindingされているVMのMediaPositionに対して変更を行っていますが、タイマーによる再生位置の値がMediaPositionに代入されると、
その変更通知がビヘイビアに戻ってきてしまいMediaElement.Positionに対して代入を行ってしまいます。
この無駄な動きが気持ち悪い上に、再生時間が多少前後してしまったりしてしまうため動作に影響も出てしまっています。

動画再生アプリを実装する際にシークバーの実装はよくあることだとは思うのですが、皆さんはどのようにして実装を行っているのでしょうか？
どのように改善したらいいのか、教えていただけないでしょうか？
よろしくお願いいたします。

長くなってしまった上に、質問したいこともうまくまとめられていない気がしますが、
足りない情報があればすぐに捕捉させていただきますのでよろしくお願いします。

言語：C#(.NET 5.0)

Answer 1

動画再生アプリを実装する際にシークバーの実装はよくあることだとは思うのですが、皆さんはどのようにして実装を行っているのでしょうか？

個人的には「MediaPlayerElementはよ」という気持ちですね^^;
WinUI MediaPlayerElement · Issue #5172 · microsoft/microsoft-ui-xaml

その変更通知がビヘイビアに戻ってきてしまいMediaElement.Positionに対して代入を行ってしまいます。

シークバー（わたしはSliderよりProgressBarが好みです）のドラッグなんかを考慮すると、ドラッグ中はタイマーを止める必要がありますしユーザー操作と分けるのは仕方ないと思います（泥臭くなってきれいには書けないという意味）

結局Viewべったりな処理なので、あまり最初からMVVMにこだわっても仕方ないんじゃないかと思います。
ユーザーコントロール（理想はカスタムコントロール）に切り出して、まずコードビハインドでちゃんと動くようになってからビヘイビアなりを詰めていくとよさそうな気はします。

理想的にはMediaElementにアタッチするコントローラのようなものができたらうれしい（わたしはできてません^^;

わたしも何度かチャレンジしているのですが、全画面化（ツリー付け替え処理がいる）とか次の動画（何を基準に？）とか、汎用化しようとすると急に煮詰まってしまい結局お蔵入りを繰り返しています^^;

Comments

[tuyudaku]

>個人的には「MediaPlayerElementはよ」という気持ちですね^^;
なるほど...MediaPlayerElement使おうと頑張ってはいたのですが、
全然使えないな...導入の仕方間違ってるのか?と思っていたら、そもそも対応していないのですね...
はよ...

>ドラッグ中はタイマーを止める必要がありますしユーザー操作と分けるのは仕方ないと思います（泥臭くなってきれいには書けないという意味）
やはりそうですか...

とりあえず、無駄な代入が嫌だったので
別の処理の改修もかねて、MediaElementの現在の再生位置を通知するビヘイビアと
MediaElementに再生位置を設定するビヘイビアを二つに分けました。
これがスマートかどうかは置いておいて、データの交通整理は出来たかな...とは思います！

回答ありがとうございました！