[Silverlight]使用新的MediaPlayer控件播放YouTube上的高清视频

这篇文章的前提是您要使用Silverlight3（下文简称sl3）以及安装了Expression Encoder及Expression Blend3，如果您未安装Encoder，那么将无法使用MediaPlayer控件。

sl3已经支持H.264，据说搜狐已经使用sl3开发了高清应用，不过在线地址至今未找到：（

下面先说说如何用最简单的方式播放YouTube的高清视频

这里我们的首要问题是如何取得YouTube上高清视频的URL。我们可以通过使用FireFox的插件Greasemonkey以及YouTube HD Ultimate script这两个东东达到目的。具体的使用方法就不说了，相信对各位看管都不是难事。

这里用我得到了一条URL来做做说明和测试，该URL如下：

http://www.youtube.com/get_video? video_id=euwBiiiWcYE&t=vjVQa1PpcFP0qThbkuhvZDM_uyxS8zusQuz1JvlPhyo=&fmt=22

接下来的事情对于熟悉sl的看官们就很简单了，搞一个MediaElement控件出来并将其Source属性设置为上面的地址即可。

    <Canvas x:Name="canvas1">
        <MediaElement Source="http://www.youtube.com/get_video? video_id=euwBiiiWcYE&t=vjVQa1PpcFP0qThbkuhvZDM_uyxS8zusQuz1JvlPhyo=&fmt=22"/>
    </Canvas>

MediaElement的使用是如此的简单以至于当我们决定实现一个视频播放器的时候就必须去对其进行相当多的扩展。因为它既没有播放列表也没有音量控制、进度控制、全屏等功能，显然这绝对不是一个合格的视频播放器。

那么有请我们今天的主角MediaPlayer控件隆重登场！

你可以在Blend3的Assets面板中找到它并将其拖动到画布上。

MediaPlayer就长得这个样子

这里需要说明的只有播放列表的使用方式，请看如下XAML：

        <ExpressionMediaPlayer:MediaPlayer >
            <ExpressionMediaPlayer:MediaPlayer.Playlist>
                <ExpressionMediaPlayer:Playlist>
                    <ExpressionMediaPlayer:Playlist.Items>
                        <ExpressionMediaPlayer:PlaylistItem
MediaSource="http://www.youtube.com/get_video?
video_id=euwBiiiWcYE&amp;t=vjVQa1PpcFP0qThbkuhvZDM_uyxS8zusQuz1JvlPhyo=&amp;fmt=22"
Title="Star Trek Trailer" VideoHeight="800" VideoWidth="600"/>
                    </ExpressionMediaPlayer:Playlist.Items>
                </ExpressionMediaPlayer:Playlist>
            </ExpressionMediaPlayer:MediaPlayer.Playlist>
        </ExpressionMediaPlayer:MediaPlayer>

您可以通过添加多个PlaylistItem节点来增加播放列表的内容，这个工作如果在Blend中做会更加简单。

是不是很Cool呢？如果您是设计人员，你也完全可以通过右键单击该MediaPlayer控件然后选择菜单中的“Edit Template” – > “Edit A Copy…”来为它定义一套更niubility的模板。

Ok,下回见~