重新想象 Windows 8 Store Apps (6)

sdchy

　　[源码下载]




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

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

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

　　
示例
1、Image 的 Demo
ImageDemo.xaml

































　　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




















　　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
[源码下载]