重新想象 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(100); 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
[源碼下載]