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

简介: 原文:重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement[源码下载] 重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement 作者:webabcd介绍重新想象...
原文: 重新想象 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(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
[源码下载]

目录
相关文章
|
2月前
|
测试技术 UED Python
App自动化测试:高级控件交互技巧
Appium 的 Actions 类支持在移动应用自动化测试中模拟用户手势,如滑动、长按等,增强交互性测试。ActionChains 是 Selenium 的概念,用于网页交互,而 Actions 专注于移动端。在Python中,通过ActionChains和W3C Actions可以定义手势路径,例如在手势解锁场景中,先点击设置,然后定义触点移动路径执行滑动解锁,最后验证解锁后的元素状态。此功能对于确保应用在复杂交互下的稳定性至关重要。
73 5
|
2月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
169 3
|
2月前
|
iOS开发 开发者
一键制作 iOS 上架 App Store 描述文件教程
一键制作 iOS 上架 App Store 描述文件教程
|
2月前
|
iOS开发 UED
解决提交到App Store时的ITMS-90478和ITMS-90062错误
解决提交到App Store时的ITMS-90478和ITMS-90062错误
45 0
|
2月前
|
iOS开发 开发者
苹果iOS App Store上架操作流程详解:从开发者账号到应用发布
很多开发者在开发完iOS APP、进行内测后,下一步就面临上架App Store,不过也有很多同学对APP上架App Store的流程不太了解,下面我们来说一下iOS APP上架App Store的具体流程,如有未涉及到的部分,大家可以及时咨询,共同探讨。
|
2月前
|
安全 Linux 网络安全
【Windows】搭建Emby媒体库服务器,实现无公网IP远程访问
【Windows】搭建Emby媒体库服务器,实现无公网IP远程访问
392 0
|
2月前
|
存储 数据安全/隐私保护 iOS开发
应用在App Store上被拒重新提交审核流程指南
该文本是关于iOS应用发布的步骤说明
40 2
|
2月前
|
安全 Linux 网络安全
Windows搭建Emby媒体库服务器,无公网IP远程访问本地影音文件
Windows搭建Emby媒体库服务器,无公网IP远程访问本地影音文件
53 0
|
2月前
|
数据安全/隐私保护 Windows
Windows系统下载安装Plex媒体服务结合内网穿透远程访问本地影音文件
Windows系统下载安装Plex媒体服务结合内网穿透远程访问本地影音文件
|
2月前
|
存储 网络安全 开发者
App Store上架流程/苹果app发布流程:
App Store上架流程/苹果app发布流程: