Response.Write("Hello LOLOTA")

我們知道可以透過MediaElement來播放多媒體檔案，但是如何要顯示某特定時間點的內容註記呢？

可以透過Timeline Marker來作處理。

 

Timeline Marker是內建於多媒體檔案中，在特定的時間點會觸發，讓使用者可以跳轉到這個多媒體的某個片段。

要新增Timeline Marker有兩種方式，一種是透過Microsoft Expression Encoder來新增，另一種則是由程式碼來作新增，

但是這裡要注意到，透過程式碼新增的Timeline Marker只是「暫時性」的，當你另外載入另一個多媒體檔案時，Timeline

marker就會消失。

 

要如何新增Timeline Marker呢？

 

1.

首先建立一個Silverlight專案(如果不知道如何新增，請參考 [Silverlight]Hello Siverlight ----- Day 1)。

 

2.

然後在xaml程式碼中加入一個media element物件, 兩個用來顯示狀態的TextBlock以及一個觸發新增TimeLine Marker的Button：

<UserControl x:Class="SL_D13.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="448" Height="344"> <Grid x:Name="LayoutRoot" Background="White"> <MediaElement x:Name="Media1" AutoPlay="True" Width="350" Source="http://silverlight.services.live.com/17942/silverlight/video.wmv" Margin="25,0,73,152"/> <TextBlock x:Name="uxTime" VerticalAlignment="Bottom" Height="24" Margin="25,0,88,16"/> <TextBlock x:Name="uxValue" Margin="25,0,88,48" VerticalAlignment="Bottom" Height="24"/> <Button x:Name="uxbtn" Click="uxbtn_Click" Content="Click Me" VerticalAlignment="Bottom" Width="88" Height="40" HorizontalAlignment="Left" Margin="25,0,0,88"> </Button> </Grid> </UserControl>

 

3.

透過程式碼加入兩個Timeline Marker：

  void Media1_MarkerReached(object sender, TimelineMarkerRoutedEventArgs e) { uxTime.Text = "現在是" + e.Marker.Time.Seconds.ToString() + "秒"; uxValue.Text = e.Marker.Text.ToString(); } private void uxbtn_Click(object sender, RoutedEventArgs e) { TimelineMarker tm1 = new TimelineMarker(); tm1.Text = "這是開始"; TimeSpan ts1 = new TimeSpan(0, 0, 0); tm1.Time = ts1; tm1.Type = "這是開始的標記"; Media1.Markers.Add(tm1); TimelineMarker tm2 = new TimelineMarker(); tm2.Text = "已經過了10秒鐘了"; TimeSpan ts2 = new TimeSpan(0, 0, 10); tm2.Time = ts2; tm2.Type = "這是過了10秒的標記"; Media1.Markers.Add(tm2); Media1.MarkerReached += new TimelineMarkerRoutedEventHandler(Media1_MarkerReached); } }

 

當Media Element物件新增這兩個Timeline Marker後，在達到其設定的時間時，就會觸發MarkerReached事件。

然後我們在這個事件將Media Element狀態寫到兩個TextBlock。

 

到這邊要注意到，Timeline Marker的Type屬性一定要作設定，否則會報錯。

 

線上Demo (請按下Click Me來新增Timeline Marker)

檔案下載

 

 

試煉大會，我們下次見~

 

 

如果您有微軟技術開發的問題，可以到MSDN Forum發問。

如果您有微軟IT管理的問題，可以到TechNet Forum發問喔。