重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement

时间：2022-07-07 17:04:41

原文:重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement

[源码下载]

重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement

作者：webabcd

介绍
重新想象 Windows 8 Store Apps 之媒体控件

  • Image - 图片控件
  • MediaElement - 播放视频或音频的控件

示例
1、Image 的 Demo
ImageDemo.xaml

<Page

    x:Class="XamlDemo.Controls.ImageDemo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Controls"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <!--

                Image - 图片控件

                    Stretch - 拉伸方式（Windows.UI.Xaml.Media.Stretch 枚举）

                        Fill - 充满容器，不保留长宽比

                        None - 不做任何处理，如果图片比容器大，则多出的部分被剪裁

                        Uniform - 等比缩放到容器（默认值）

                        UniformToFill - 充满容器，且保留长宽比，多出的部分被剪裁

                以下示例图片的原始大小为 150 * 150

            -->

            <StackPanel Orientation="Horizontal">

                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100">

                    <Image Source="/Assets/Logo.png" Stretch="Fill" Width="200" Height="100" />

                </Border>

                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">

                    <Image Source="/Assets/Logo.png" Stretch="None" Width="200" Height="100" />

                </Border>

                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">

                    <Image Source="/Assets/Logo.png" Stretch="Uniform" Width="200" Height="100" />

                </Border>

                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">

                    <!--后台设置 Image 的 Source-->

                    <Image Name="myImage" Stretch="UniformToFill" Width="200" Height="100" />

                </Border>

            </StackPanel>

            <!--

                Image - 图片控件

                    NineGrid - 指定9网格（相当于flash中的9切片）中的4条线，Thickness 类型

                        Left - 左边的线相对于图片最左端的距离

                        Top - 上边的线相对于图片最顶端的距离

                        Right - 右边的线相对于图片最右端的距离

                        Bottom - 下边的线相对于图片最底端的距离

                以下示例图片的原始大小为 16 * 16

            -->

            <StackPanel Orientation="Horizontal" Margin="0 50 0 0">

                <Image Source="/Assets/NineGrid/Demo.png" Width="200" Height="200" />

                <!--通过指定9切片，防止边框被放大或缩小-->

                <Image Source="/Assets/NineGrid/Demo.png" Width="200" Height="200" NineGrid="1 1 1 1" Margin="20 0 0 0" />

            </StackPanel>

        </StackPanel>

    </Grid>

</Page>

ImageDemo.xaml.cs

/*

 * Image - 图片控件

 */

using System;

using Windows.Storage.Streams;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

namespace XamlDemo.Controls

{

    public sealed partial class ImageDemo : Page

    {

        public ImageDemo()

        {

            this.InitializeComponent();

            this.Loaded += ImageDemo_Loaded;

        }

        // 将 Image 控件的图像源设置为 ms-appx:///Assets/Logo.png

        private void ImageDemo_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)

        {

            myImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png", UriKind.Absolute));

            /*

                或者用如下方式指定图象源 

                RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Logo.png", UriKind.Absolute));

                IRandomAccessStream imageStream = await imageStreamRef.OpenReadAsync();

                BitmapImage bitmapImage = new BitmapImage();

                bitmapImage.SetSource(imageStream);

                myImage.Source = bitmapImage;

            */

        }

    }

}

2、MediaElement 的 Demo
MediaElementDemo.xaml

<Page

    x:Class="XamlDemo.Controls.MediaElementDemo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Controls"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Orientation="Horizontal" Margin="120 0 0 0">

            <StackPanel>

                <Button Name="btnPickFile" Content="播放一个本地视频或音频" Click="btnPickFile_Click_1" />

                <Button Name="btnPlayUrl" Content="播放一个网络视频" Click="btnPlayUrl_Click_1" Margin="0 10 0 0" />

                <StackPanel Orientation="Horizontal" Margin="0 10 0 0">

                    <Button x:Name="btnPlay"  Content="播放" Margin="0 0 10 0" Click="btnPlay_Click_1" />

                    <Button x:Name="btnPause" Content="暂停" Margin="0 0 10 0" Click="btnPause_Click_1" />

                    <Button x:Name="btnStop"  Content="停止" Margin="0 0 10 0" Click="btnStop_Click_1" />

                </StackPanel>

                <MediaElement Name="mediaElement" AutoPlay="True" PosterSource="/Assets/Logo.png" Width="480" Height="320" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0 10 0 0"  />

            </StackPanel>

            <TextBlock Name="lblMsg" FontSize="14.667" Margin="10 0 0 0" />

        </StackPanel>

    </Grid>

</Page>

MediaElementDemo.xaml.cs

/*

 * MediaElement - 播放视频或音频的控件

 *     顾名思义的几个事件：DownloadProgressChanged, BufferingProgressChanged, CurrentStateChanged, MediaOpened, MediaEnded, MediaOpened, SeekCompleted, VolumeChanged

 *     RateChanged - 当 PlaybackRate 的值发生改变时所触发的事件

 *         说明：

 *         1、正常播放：DefaultPlaybackRate = 1, PlaybackRate = 1

 *         2、两倍速快进播放：DefaultPlaybackRate = 0, PlaybackRate = 2

 *         2、一倍速快退播放：DefaultPlaybackRate = 0, PlaybackRate = -1

 *     MarkerReached - 播放过程中遇到时间线标记时所触发的事件

 *         说明：通过 MarkerReached 属性来设置或获取时间线标记

 *

 *     CanPlayType(string type) - 获取对指定类型文件的播放支持的可能性

 *     Play(), Pause(), Stop() - 播放, 暂停, 停止

 *     SetSource(IRandomAccessStream stream, string mimeType) - 指定需要播放的媒体流

 */

using System;

using Windows.Storage;

using Windows.Storage.Pickers;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace XamlDemo.Controls

{

    public sealed partial class MediaElementDemo : Page

    {

        public MediaElementDemo()

        {

            this.InitializeComponent();

            DispatcherTimer dTimer = new DispatcherTimer();

            dTimer.Interval = TimeSpan.FromMilliseconds();

            dTimer.Tick += dTimer_Tick;

            dTimer.Start();

        }

        void dTimer_Tick(object sender, object e)

        {

            // 视频源的 uri

            lblMsg.Text = "Source: " + mediaElement.Source;

            lblMsg.Text += Environment.NewLine;

            // 占位图，即在媒体播放之前显示的图片（与 html5 中的 video 的 poster 作用一样）

            lblMsg.Text += "PosterSource: " + mediaElement.PosterSource;

            lblMsg.Text += Environment.NewLine;

            // 当前的播放状态（Windows.UI.Xaml.Media.MediaElementState 枚举）：Closed, Opening, Buffering, Playing, Paused, Stopped

            lblMsg.Text += "CurrentState: " + mediaElement.CurrentState;

            lblMsg.Text += Environment.NewLine;

            // 指定或获取播放的进度，TimeSpan 类型

            lblMsg.Text += "Position: " + mediaElement.Position;

            lblMsg.Text += Environment.NewLine;

            // 下载的进度（0 - 1之间）

            lblMsg.Text += "DownloadProgress: " + mediaElement.DownloadProgress;

            lblMsg.Text += Environment.NewLine;

            // 下载起始点与原始视频起始点的偏移量（0 - 1之间）

            // 比如一个网络视频时长为 10 分钟，播放过程中手动指定了 Position 想从 5 分钟处开始播，那么：

            // 1、此处的视频已被下载了，那么 DownloadProgressOffset 值为 0

            // 2、此处的视频尚未被下载，则 MediaElement 会断掉当前连接，然后重连一个 http 以获取从 5 分钟处开始的数据，此时 DownloadProgressOffset 值为 0.5

            lblMsg.Text += "DownloadProgressOffset: " + mediaElement.DownloadProgressOffset;

            lblMsg.Text += Environment.NewLine;

            // 缓冲进度（0 - 1之间）

            // 1、小于 1 时则媒体在缓冲

            // 2、等于 1 时则缓冲区已被填满，可以播放媒体

            lblMsg.Text += "BufferingProgress: " + mediaElement.BufferingProgress;

            lblMsg.Text += Environment.NewLine;

            // 默认的播放速率，默认值为 1

            lblMsg.Text += "DefaultPlaybackRate: " + mediaElement.DefaultPlaybackRate;

            lblMsg.Text += Environment.NewLine;

            // 当前播放速率，默认值为 1，如果需要将其指定为其它值，需先将 DefaultPlaybackRate 设置为 0

            lblMsg.Text += "PlaybackRate: " + mediaElement.PlaybackRate;

            lblMsg.Text += Environment.NewLine;

            // 是否可 seek

            lblMsg.Text += "CanSeek: " + mediaElement.CanSeek;

            lblMsg.Text += Environment.NewLine;

            // 是否可 pause

            lblMsg.Text += "CanPause: " + mediaElement.CanPause;

            lblMsg.Text += Environment.NewLine;

            // 媒体的时长

            lblMsg.Text += "NaturalDuration: " + mediaElement.NaturalDuration;

            lblMsg.Text += Environment.NewLine;

            // 媒体的原始宽

            lblMsg.Text += "NaturalVideoWidth: " + mediaElement.NaturalVideoWidth;

            lblMsg.Text += Environment.NewLine;

            // 媒体的原始高

            lblMsg.Text += "NaturalVideoHeight: " + mediaElement.NaturalVideoHeight;

            lblMsg.Text += Environment.NewLine;

            // 媒体的宽高比的宽度部分

            lblMsg.Text += "AspectRatioWidth: " + mediaElement.AspectRatioWidth;

            lblMsg.Text += Environment.NewLine;

            // 媒体的宽高比的高度部分

            lblMsg.Text += "AspectRatioHeight: " + mediaElement.AspectRatioHeight;

            lblMsg.Text += Environment.NewLine;

            // 是否自动播放

            lblMsg.Text += "AutoPlay: " + mediaElement.AutoPlay;

            lblMsg.Text += Environment.NewLine;

            // 是否循环播放

            lblMsg.Text += "IsLooping: " + mediaElement.IsLooping;

            lblMsg.Text += Environment.NewLine;

            // 音量（0 - 1 之间）

            lblMsg.Text += "Volume: " + mediaElement.Volume;

            lblMsg.Text += Environment.NewLine;

            // 左右声道平衡（-1 到 1 之间）

            lblMsg.Text += "Balance: " + mediaElement.Balance;

            lblMsg.Text += Environment.NewLine;

            // 是否静音

            lblMsg.Text += "IsMuted: " + mediaElement.IsMuted;

            lblMsg.Text += Environment.NewLine;

            // 当前媒体是否是音频：播放的是音频则为 true，播放的是视频则为 false

            lblMsg.Text += "IsAudioOnly: " + mediaElement.IsAudioOnly;

            lblMsg.Text += Environment.NewLine;

            // 音频的用途（Windows.UI.Xaml.Media.AudioCategory 枚举）

            // 比如：ForegroundOnlyMedia - 播放的是视频或音乐的音频，且只能前台播放；BackgroundCapableMedia - 播放的是视频或音乐的音频，且支持后台播放（关于音频的后台播放，等写到 MediaControl 时再详细说明）

            lblMsg.Text += "AudioCategory: " + mediaElement.AudioCategory;

            lblMsg.Text += Environment.NewLine;

            // 音频流的数量（比如：有的视频支持多种配音，那么每一种配音就是一个音频流）

            lblMsg.Text += "AudioStreamCount: " + mediaElement.AudioStreamCount;

            lblMsg.Text += Environment.NewLine;

            // 当前播放的音频流，在音频流集合中的索引。注：可以通过 GetAudioStreamLanguage(int? index) 获取指定音频流所对应的语言

            lblMsg.Text += "AudioStreamIndex: " + mediaElement.AudioStreamIndex;

            lblMsg.Text += Environment.NewLine;

            // 设备应该如何播放音频

            lblMsg.Text += "AudioDeviceType: " + mediaElement.AudioDeviceType;

        }

        // 播放本地视频或音频

        private async void btnPickFile_Click_1(object sender, RoutedEventArgs e)

        {

            FileOpenPicker picker = new FileOpenPicker();

            picker.SuggestedStartLocation = PickerLocationId.VideosLibrary;

            picker.FileTypeFilter.Add(".wmv");

            picker.FileTypeFilter.Add(".mp4");

            picker.FileTypeFilter.Add(".mp3");

            picker.FileTypeFilter.Add(".wma");

            picker.FileTypeFilter.Add(".png");

            var file = await picker.PickSingleFileAsync();

            if (file != null)

            {

                var stream = await file.OpenAsync(FileAccessMode.Read);

                // 指定需要让 MediaElement 播放的媒体流

                mediaElement.SetSource(stream, file.ContentType);

            }

        }

        // 通过指定一个 url 播放一个网络视频

        private void btnPlayUrl_Click_1(object sender, RoutedEventArgs e)

        {

            mediaElement.Source = new Uri("http://media.w3.org/2010/05/sintel/trailer.mp4", UriKind.Absolute);

        }

        private void btnPlay_Click_1(object sender, RoutedEventArgs e)

        {

            mediaElement.Play();

        }

        private void btnPause_Click_1(object sender, RoutedEventArgs e)

        {

            mediaElement.Pause();

        }

        private void btnStop_Click_1(object sender, RoutedEventArgs e)

        {

            mediaElement.Stop();

        }

    }

}

OK
[源码下载]

相关文章