- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【愚公系列】2023年10月 WPF控件专题 MediaElement控件详解

愚公搬代码发表于 2023/09/30 23:53:34 2023/09/30

【摘要】 WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，腾讯云优秀博主，掘金优秀博主，51CTO博客专家等。
🏆《近期荣誉》：2022年CSDN博客之星TOP2，2022年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。

原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。

自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。

🚀一、MediaElement控件详解

MediaElement控件是WPF中的一个重要控件，用于显示媒体文件，包括音频和视频。它可以在窗口中直接嵌入音频和视频文件，并且可以使用常见的媒体播放功能，如播放、暂停、停止、调整音量、快进/快退等。

MediaElement控件支持的文件格式包括：Windows Media Audio (WMA)、Windows Media Video (WMV)、MPEG Audio Layer-3 (MP3)、Audio-Video Interleaved (AVI)、Advanced Systems Format (ASF) 和其他一些常见的音频、视频格式。

使用MediaElement控件非常简单，只需要指定要播放的媒体文件的路径，然后在代码中使用相应的播放控制方法即可。同时，可以通过设置属性来自定义控件外观、行为和功能。

下面是一个简单的MediaElement控件的使用示例：

<MediaElement Name="mediaPlayer" Source="media/video.mp4" />
<Button Content="播放" Click="PlayButton_Click" />
<Button Content="停止" Click="StopButton_Click" />

private void PlayButton_Click(object sender, RoutedEventArgs e)
{
    mediaPlayer.Play();
}

private void StopButton_Click(object sender, RoutedEventArgs e)
{
    mediaPlayer.Stop();
}

在上面的示例中，MediaElement控件指定了要播放的视频文件路径，然后当点击“播放”和“停止”按钮时，分别调用了Play和Stop方法来控制视频的播放。当然，也可以通过其他方法来实现更多的功能，比如调整音量、跳转到特定的位置等。

MediaElement控件是WPF中非常有用的一个控件，可以方便地实现多媒体文件的播放和控制，如果需要在WPF应用程序中播放音频和视频，可以考虑使用它。

🔎1.属性介绍

MediaElement是WPF中用于播放音频和视频的控件，具有以下常用属性：

Source：指定媒体文件的路径或URI。
Stretch：指定播放画面的缩放方式，包括Fill、Uniform、UniformToFill和None四种。
Volume：指定音频的音量大小，取值范围为0到1。
Balance：指定左右声道的平衡度，取值范围为-1到1。
SpeedRatio：指定播放速度的倍数。
IsMuted：指定是否静音。
ScrubbingEnabled：指定是否允许用户拖动进度条播放。
Position：指定当前播放位置。
NaturalDuration：获取媒体文件的总播放时长。
IsPlaying：获取或设置媒体是否正在播放。
LoadedBehavior：指定加载媒体后的播放行为，包括Play、Pause和Stop三种。
UnloadedBehavior：指定离开媒体后的播放行为，包括Close、Pause和Stop三种。
Balance：指定左右声道的平衡度，取值范围为-1到1。
ScrubbingEnabled：指定是否允许用户拖动进度条播放。

🔎2.常用场景

MediaElement控件是WPF中用于播放音频和视频的控件，常用场景如下：

在媒体中心应用程序中用于播放音乐和视频。
在教育和培训应用程序中用于播放教学视频，例如在线课程视频。
在游戏应用程序中用于播放背景音乐和游戏音效。
在广告和营销应用程序中用于播放广告视频和音频。
在演示文稿应用程序中用于播放嵌入式视频和音频。
在家庭娱乐应用程序中用于播放电影和电视节目。
在健身和运动应用程序中用于播放健身视频和音频。

如果需要在WPF应用程序中播放音频和视频，MediaElement控件是非常有用的控件。

🔎3.具体案例

🦋3.1 基本使用

<Window x:Class="WpfAppTest.MediaElementWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:WpfAppTest"
        mc:Ignorable="d"
        Title="MediaElementWindow" Height="450" Width="800">
        <Grid>
                <Border BorderThickness="2" BorderBrush="YellowGreen" HorizontalAlignment="Left" Height="275" Margin="43,26,0,0" VerticalAlignment="Top" Width="583">
                        <MediaElement Source="medias/tongyao1.mp4"    IsMuted="False" Volume="0.3" SpeedRatio="1" UnloadedBehavior="Stop" Balance="-0.6" StretchDirection="Both" Stretch="Fill"  />
                </Border>


        </Grid>
</Window>

🦋3.2 案例

<Window x:Class="WpfAppTest.MediaElementWindow2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:WpfAppTest"
        mc:Ignorable="d"
        Title="MediaElementWindow2" Height="450" Width="800" Loaded="Window_Loaded">
        <Window.Resources>
                <Style x:Key="btnStyle" TargetType="Button">
                        <Setter Property="Background">
                                <Setter.Value>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                <GradientStop Offset="0" Color="White"/>
                                                <GradientStop Offset="0.444" Color="#FF53897A"/>
                                        </LinearGradientBrush>
                                </Setter.Value>
                        </Setter>
                        <Setter Property="FontStyle" Value="Oblique"/>
                        <Setter Property="Margin" Value="5"/>
                        <Setter Property="Width" Value="60"/>
                        <Setter Property="Foreground" Value="Gold"/>
                        <Style.Triggers>
                                <Trigger Property="Button.IsMouseOver" Value="True">
                                        <Setter Property="Foreground" Value="Black"/>
                                </Trigger>
                        </Style.Triggers>
                </Style>
        </Window.Resources>
    <Grid>
                <StackPanel>
                        <Border Background="Black" BorderThickness="3" HorizontalAlignment="Center" Height="300"  VerticalAlignment="Top" Width="500">
                                <Border.Effect>
                                        <DropShadowEffect Color="#FFE4CC8D"/>
                                </Border.Effect>
                                <Border.BorderBrush>
                                        <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                                                <GradientStop Offset="0" Color="White"/>
                                                <GradientStop Offset="0.5" Color="Gold"/>
                                        </LinearGradientBrush>
                                </Border.BorderBrush>
                                <MediaElement Name="me"  LoadedBehavior="Manual"  SpeedRatio="1" Stretch="Fill" UnloadedBehavior="Stop" ScrubbingEnabled="True" Volume="{Binding ElementName=volumeSlider,Path=Value}" Balance="0.6" MouseLeftButtonDown="Me_MouseLeftButtonDown" MediaOpened="Me_MediaOpened" MediaEnded="Me_MediaEnded"  />
                        </Border>
                        <StackPanel Margin="0,10,0,0" Orientation="Horizontal" HorizontalAlignment="Center">
                                <TextBlock Text="播放进度" Foreground="Gold" Margin="5"/>
                                <Slider x:Name="posSlider" Minimum="0"   Width="190" Value="{Binding ElementName=me,Path=Position}" IsMoveToPointEnabled="True"  PreviewMouseLeftButtonUp="PosSlider_PreviewMouseLeftButtonUp"   />
                                <TextBlock Text="音量" Foreground="Gold" Margin="20,0,0,0"/>
                                <Slider x:Name="volumeSlider" Margin="10,0" Minimum="0" Maximum="1" Value="0.5" Width="167" />
                        </StackPanel>

                        <StackPanel Orientation="Horizontal"  HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,10">
                                <Button x:Name="openBtn" Content="打开"  Style="{StaticResource btnStyle}" Click="OpenBtn_Click" 
              />
                                <Button x:Name="playBtn" Content="播放" Style="{StaticResource btnStyle}" Click="PlayBtn_Click" 
                />
                                <Button x:Name="stopBtn" Content="停止" Style="{StaticResource btnStyle}" Click="StopBtn_Click" 
               />
                                <Button x:Name="backBtn" Content="快退" Style="{StaticResource btnStyle}"  Click="BackBtn_Click"
              />
                                <Button x:Name="forwardBtn" Content="快进" Style="{StaticResource btnStyle}" Click="ForwardBtn_Click" 
              />
                                <Label Name="lblTime" Width="100" Height="30" Content="00:04"></Label>
                        </StackPanel>

                </StackPanel>
        </Grid>
</Window>

System.Timers.Timer timer = null;
private void Window_Loaded(object sender, RoutedEventArgs e)
{
        timer = new System.Timers.Timer();
        timer.Interval = 1000;
        timer.Elapsed += Timer_Elapsed;
}

private void Timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
{
        //子线程执行
        this.Dispatcher.Invoke(new Action(() =>
        {
                //主线程
                posSlider.Value = me.Position.TotalSeconds;
                SetTime();
        }
      ));
}

/// <summary>
/// 设置时间文本框的值
/// </summary>
private void SetTime()
{
        lblTime.Content = string.Format("{0:00}:{1:00}:{2:00}", me.Position.Hours, me.Position.Minutes, me.Position.Seconds);
}

//选择播放文件
private void OpenBtn_Click(object sender, RoutedEventArgs e)
{
        OpenFileDialog ofd = new OpenFileDialog();
        ofd.Filter = @"视频文件(*.avi格式)|*.avi|视频文件(*.wav格式)|*.wav|视频文件(*.wmv格式)|*.wmv|视频文件(*.mp4格式)|*.mp4|All Files|*.*";
        if (ofd.ShowDialog() == false)
        {
                return;
        }
        string filePath = "";
        filePath = ofd.FileName;
        if (filePath == "")
                return;
        //设置媒体源
        me.Source = new Uri(filePath, UriKind.Absolute);
        playBtn.IsEnabled = true;
        me.Play();
        timer.Start();
        playBtn.Content = "暂停";
}

//播放或暂停
private void PlayBtn_Click(object sender, RoutedEventArgs e)
{
        SetPlayer(true);
        PlayPause();
}

/// <summary>
/// 播放或暂停
/// </summary>
private void PlayPause()
{
        if (playBtn.Content.ToString() == "播放")
        {
                me.Play();
                timer.Start();
                playBtn.Content = "暂停";
                me.ToolTip = "单击暂停";
        }
        else
        {
                me.Pause();
                timer.Stop();
                playBtn.Content = "播放";
                me.ToolTip = "单击播放";
                SetTime();
        }
}

/// <summary>
/// 设置操作按钮的可用状态
/// </summary>
/// <param name="bl"></param>
private void SetPlayer(bool bl)
{
        stopBtn.IsEnabled = bl;
        playBtn.IsEnabled = bl;
        backBtn.IsEnabled = bl;
        forwardBtn.IsEnabled = bl;
}

/// <summary>
/// 停止
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void StopBtn_Click(object sender, RoutedEventArgs e)
{
        me.Stop();
        posSlider.Value = 0;
        lblTime.Content = "0:0:0";
        playBtn.Content = "播放";
        timer.Stop();
}

/// <summary>
/// 快进 当前播放位置前进10s
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void ForwardBtn_Click(object sender, RoutedEventArgs e)
{
        me.Pause();
        timer.Stop();
        me.Position = me.Position + TimeSpan.FromSeconds(10);
        SetTime();
        me.Play();
        timer.Start();
}

/// <summary>
/// 快退
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void BackBtn_Click(object sender, RoutedEventArgs e)
{
        me.Pause();
        timer.Stop();
        me.Position = me.Position - TimeSpan.FromSeconds(10);
        SetTime();
        me.Play();
        timer.Start();
}

private void Me_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
        PlayPause();
}

/// <summary>
/// 媒体加载完毕后
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Me_MediaOpened(object sender, RoutedEventArgs e)
{
        posSlider.Maximum = me.NaturalDuration.TimeSpan.TotalSeconds;
        lblTime.Content = "0:0:0";
        SetPlayer(true);
}

/// <summary>
///拖动播放进度
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void PosSlider_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
        me.Pause();
        timer.Stop();
        int val = (int)posSlider.Value;
        me.Position = new TimeSpan(0, 0, 0, val);
        SetTime();
        me.Play();
        timer.Start();
}

private void Me_MediaEnded(object sender, RoutedEventArgs e)
{
        MessageBox.Show("播放结束");
        timer.Stop();
}

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

【愚公系列】2023年10月 WPF控件专题 MediaElement控件详解

🚀前言

🚀一、MediaElement控件详解

🔎1.属性介绍

🔎2.常用场景

🔎3.具体案例

🦋3.1 基本使用

🦋3.2 案例

🚀感谢：给读者的一封信

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

【愚公系列】2023年10月 WPF控件专题 MediaElement控件详解

🚀前言

🚀一、MediaElement控件详解

🔎1.属性介绍

🔎2.常用场景

🔎3.具体案例

🦋3.1 基本使用

🦋3.2 案例

🚀感谢：给读者的一封信

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品