快速建立Silverlight Media Player:使用Expression Encoder 2 Template

  • 8979
  • 0

當想要個Silverlight播放器時,會發現Sliverlight並沒有一個很完整Media Player元件,雖然有MediaElement,但是太簡單了,你會想我是需要有buffer、選單等功能的,怎麼都沒有?這時你就只能尋求 Codeplex網站找別人寫好的元件,其實當你安裝Expression Encoder 程式,裡面就有包含Media Player Template,是相當完整的播放程式,應有的都有,也能自行修改並且變成Siverlight的元件。

微軟在Silverlight影音的部分有下很大的功夫,能支援Media Player播放格式(WMV、WMA、MP3),目前最高的畫質到VC1的格式,但Expression Encoder  sp1能夠產生出HD畫質的檔案。等明年IIS7的新元件SmoothHD出來時,就能在播放影片能即時調節streaming的品質,這樣看高畫質的影片也能更Smooth,大家可以先到這個網站感受一下高畫質的威力。有了Sliverlight後,在網路上播放WMV也不需要依靠Windows上的Media Player,所以讓WMV在網路上播放比較沒有平台的限制。

當想要個Silverlight播放器時,會發現Sliverlight並沒有一個很完整Media Player元件,雖然有MediaElement,但是太簡單了,你會想我是需要有buffer、選單等功能的,怎麼都沒有?這時你就只能尋求Codeplex網站找別人寫好的元件,其實當你安裝Expression Encoder 程式,裡面就有包含Media Player Template,是相當完整的播放程式,應有的都有,也能自行修改並且變成Siverlight的元件。

 

你可以在Encoder 2的目錄下Templates找到Player的程式,要記得下載並且安裝Expression Encoder 2

接著打開SL2Standard→Template.sln檔案

打開後可以看到這些專案,你可以什麼都不用管,Build完後直接拿產生的dll來用就可以了,但Player有些功能不需要怎麼辦?例如想拿掉字幕的功能按鈕,在專案MediaPlayer→themes→generic.xaml是設定版面的檔案,可以修改外觀。

然後你可以開一個新的Silverlight專案,然後記得References剛才專案產生的dll,分別是ExpressionPlayer.dll、MediaPlayer.dll這兩個檔案

Page.xaml裡是這樣的,並且名命為ExpressionPlayer

<UserControl x:Class="Silverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:expression="clr-namespace:ExpressionMediaPlayer;assembly=ExpressionPlayer"
    xmlns:ExpressionMediaPlayer="clr-namespace:ExpressionMediaPlayer;assembly=MediaPlayer"    
     >
    <Grid x:Name="LayoutRoot" Background="Black" >
            <expression:ExpressionPlayer x:Name="ExpressionPlayer">
           </expression:ExpressionPlayer>
    </Grid>
</UserControl>

這個Player本身也能用XML來做PlayList,所以我們要Web部份新增一個playlistfile.xml檔,裡面要設定影片來路徑、截圖、片段截圖及切然時間點

<?xml version="1.0" encoding="utf-8" ?>
<playList>
  <playListItems>
    <playListItem title="Taxi3" description="" mediaSource="Taxi3_WMVHD_Extract.wmv" thumbSource="Taxi3_Thumb.jpg" >
      <chapters>
        <chapter  position="30.000" thumbnailSource="Taxi3_30.000.jpg" title="1" />
        <chapter  position="40.000" thumbnailSource="Taxi3_60.000.jpg" title="2" />
      </chapters>
    </playListItem>
  </playListItems>
</playList>

Page.xaml.cs 這裡做的很簡單,就只是去讀playlistfile.xml檔

using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Xml.Linq;


namespace SilverlightVideo
{
  
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            WebClient wc = new WebClient();

            wc.DownloadStringAsync(new Uri("http://localhost/playlistfile.xml"));
            wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
  
        }


        void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            ExpressionMediaPlayer.PlaylistCollection plc = new ExpressionMediaPlayer.PlaylistCollection(new Uri(@"http://localhost/playlistfile.xml"), e.Result);
          
        }

  
    }

}

這樣就有一個具有選擇影片、片段、的Siilverlight Media Player了,什麼?這樣每次要用的時候都很不方便,然你就把它當元件用吧

那然在toolbox新增一個tab,然後選擇Silverlight元件,路徑就是剛才一開始專案所產生的dll,然後再勾選它們

這樣你就可以很快的把Player拿出來用了!很簡單吧也很實用,快拿來當你線上播放器吧!