[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如下:

接下来的事情对于熟悉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面板中找到它并将其拖动到画布上。

image 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,下回见~

posted @   紫色永恒  阅读(3192)  评论(13编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示