NAM GIÀ

Thêm khả năng đa phương tiện vào trang Web

Để thêm khả năng đa phương tiện, bạn có thể dùng MediaElement và đặt thuộc tính Source của nó chỉ đến file media của bạn thông qua một URI. Bạn có thể xem ví dụ sau:

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement 
    Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
</Canvas>

Like other UIElement objects, you can put drawings on top of MediaElement objects. The following example adds an Ellipse in front of the MediaElement from the previous example.
Cũng giống như các đối tượng UIElement khac, bạn có thể đặt các hình vẽ lên trên đối tượng MediaElement. Ví dụ sau sẽ thêm một hình ellipse lên trên thành phần MediaElement lấy từ ví dụ trước:

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <MediaElement Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
  
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
     Opacity="0.6" />
</Canvas>

Một số thuộc tính của MediaElement

Ngoài các thuộc tính thừa hưởng từ MediaElement, như Opacity hay Clip, MediaElement cung cấp một số thuộc tính chuyên cho đa phương tiện(media) như sau:
- Stretch: Chỉ ra cách mà đoạn video được ép cho vừa với đối tượng MediaElement. Thuộc tính này nhận các giá trị None, Uniform, UniformToFill, và Fill. Giá trị mặc nhiên là Fill. Để có thêm thông tin, hãy xem trong bộ Silverlight SDK.
* IsMuted: Nếu đặt là true thì MediaElement sẽ không phát âm thanh, ngược lại là có.
* Volume: Đặt giá trị cho volumn, bạn có thể đặt các giá trị từ 0.0 cho đến 1.0, với 1.0 thì âm thanh sẽ phát ra lớn nhất, giá trị mặc nhiên là 0.5.

Hãy xem thêm Silverlight SDK để có thêm thông tin về các thuộc tính của MediaElement.

Kiểm soát việc chơi các tài liệu media

Bạn có thể kiểm soát việc chơi các file media bằng cách sử dụng các phương thức Play, Pause, và Stop. Ví dụ sau sẽ dùng Play, Pause, và Stop để cho phép người dùng điều khiển việc chơi lại:

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement x:Name="media" 
    Source="thebutterflyandthebear.wmv" 
    Width="300" Height="300" />

      
  <Canvas MouseLeftButtonDown="media_stop" 
    Canvas.Left="10" Canvas.Top="265">
    <Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
  </Canvas>
  
  
  <Canvas MouseLeftButtonDown="media_pause" 
     Canvas.Left="70" Canvas.Top="265">
    <Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
  </Canvas>
  
  
  <Canvas MouseLeftButtonDown="media_begin" 
    Canvas.Left="130" Canvas.Top="265">
    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
       Height="30" Width="55">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
  </Canvas>
     
</Canvas>

function media_stop(sender, args) {
    sender.findName("media").stop();
}

function media_pause(sender, args) {
    sender.findName("media").pause();
}

function media_begin(sender, args) {
    sender.findName("media").play();
}

Dùng chế độ full-screen

Để chơi ở chế độ full-screen, đặt thuộc tính FullScreen của đối tượng Silverlight plug-in là true và điều chỉnh kích thước của MediaElement thành ActualWidth và ActualHeight mà bạn lấy từ Silverlight.
Ví dụ sau sẽ cho phép xem video ở chế độ full-screen.

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Loaded="canvas_loaded">
    
  <MediaElement x:Name="media" 
     Source="thebutterflyandthebear.wmv" 
     Width="300" Height="300" />

  <Canvas x:Name="buttonPanel">
  
        
    <Canvas MouseLeftButtonDown="media_stop" 
       Canvas.Left="10" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Orange" Offset="0.0" />
            <GradientStop Color="Red" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
    </Canvas>
  
    
    <Canvas MouseLeftButtonDown="media_pause" 
       Canvas.Left="70" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Orange" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
    </Canvas>
  
    
    <Canvas MouseLeftButtonDown="media_begin" 
       Canvas.Left="130" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="55">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="LimeGreen" Offset="0.0" />
            <GradientStop Color="Green" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
    </Canvas>
  
    
    <Canvas MouseLeftButtonDown="toggle_fullScreen" 
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="Black" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock> 
    </Canvas>  
  
  </Canvas>
     
</Canvas>

function media_stop(sender, args) {

    sender.findName("media").stop();
}

function media_pause(sender, args) {
    
    sender.findName("media").pause();
}

function media_begin(sender, args) {
    
    sender.findName("media").play();
}


function canvas_loaded(sender, args)
{
  
    var plugin = sender.getHost();
    plugin.content.onfullScreenChange = onFullScreenChanged;
    

}

function toggle_fullScreen(sender, args)
{
    var silverlightPlugin = sender.getHost();
    silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;  
   
}

function onFullScreenChanged(sender, args)
{

  
    var silverlightPlugin = sender.getHost();
    var buttonPanel = sender.findName("buttonPanel");
    
    if (silverlightPlugin.content.fullScreen == true)
    {
      buttonPanel.opacity = 0;
    }
    else 
    {
      buttonPanel.opacity = 1;
    }
    
    var mediaPlayer = sender.findName("media");
    mediaPlayer.width = silverlightPlugin.content.actualWidth;
    mediaPlayer.height = silverlightPlugin.content.actualHeight;
     

}

Dùng bút vẽ VideoBrush

Bạn có thể dùng VideoBrush để vẽ các hình họa và văn bản bằng Video. Để dung VideoBrush, hãy theo các bước sau:

1. Tạo một đối tượng VideoBrush.
2. Tạo một MediaElement và đặt tên cho nó (đặt giá trị cho thuộc tính Name). Đối tượng MediaElement được dùng để xử lý dữ liệu video cho VideoBrush. Trừ khi bạn muốn nhìn thấy 2 bản video cùng lúc, không thì phải đặt thuộc tính Opacity của đối tượng MediaElement là 0.0. Nếu không muốn đoạn video phát ra tiếng thì bạn đặt giá trị cho thuộc tính IsMuted của MediaElement là true.
3. Đặt thuộc tính SourceName của VideoBrush là tên của MediaElement mà bạn đã tạo.

Ví dụ sau sẽ dùng VideoBrush để vẽ nền cho một TextBlock.

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement x:Name="myMediaElement" 
    Source="thebutterflyandthebear.wmv" 
    Width="300" Height="300"
    Opacity="0" IsMuted="True" />  
  
  <TextBlock Canvas.Left="10" Canvas.Top="10"
    FontFamily="Verdana"
    FontSize="80" FontWeight="Bold">Watch<LineBreak/>This
    <TextBlock.Foreground>
      <VideoBrush SourceName="myMediaElement" />
    </TextBlock.Foreground>
  </TextBlock>
  
</Canvas>

Việc ngừng, tạm dừng hoặc chơi MediaElement cũng ảnh hưởng đến đối tượng VideoBrush dùng nó, nhưng thay đổi kích thước hoặc độ trong suốt thì không. Một đối tượng MediaElement cũng có thể được dùng như nguồn của nhiều đối tượng VideoBrush khác nhau.

Bấm vào tag SILVERLIGHT-STEP BY STEP để xem tất cả các bài trong phần hướng dẫn Silverlight