Silverlight - Video & Âm thanh

Trong chương này, chúng ta sẽ xem các cơ sở Silverlight đang phát video và âm thanh như thế nào. CácMediaElementlà trung tâm của tất cả video và âm thanh trong Silverlight. Điều này cho phép bạn tích hợp âm thanh và video trong ứng dụng của mình. CácMediaElement lớp hoạt động theo cách tương tự như Imagelớp học. Bạn chỉ cần trỏ nó vào phương tiện và nó hiển thị âm thanh và video.

Sự khác biệt chính là nó sẽ là một hình ảnh chuyển động, nhưng nếu bạn trỏ nó vào tệp chỉ chứa âm thanh và không có video, chẳng hạn như MP3, nó sẽ phát mà không hiển thị bất kỳ thứ gì trên màn hình.

MediaElement làm phần tử giao diện người dùng

MediaElementbắt nguồn từ phần tử khung, là lớp cơ sở của tất cả các phần tử giao diện người dùng Silverlight. Điều này có nghĩa là nó cung cấp tất cả các thuộc tính tiêu chuẩn, vì vậy bạn có thể sửa đổi độ mờ của nó, bạn có thể đặt clip hoặc biến đổi nó, v.v.

Hãy để chúng tôi xem xét một ví dụ đơn giản về MediaElement.

Mở Microsoft Blend cho Visual Studio và tạo một dự án Ứng dụng Silverlight mới.

Bây giờ kéo và video hoặc tệp âm thanh vào bề mặt thiết kế Blend.

Nó sẽ thêm MediaElement vào bề mặt và cũng thêm bản sao của tệp video vào dự án của bạn. Bạn có thể thấy nó trong Trình khám phá giải pháp.

Bạn có thể di chuyển nó xung quanh, thay đổi kích thước của nó, bạn có thể làm những việc như áp dụng một vòng xoay, v.v.

Bây giờ, nó sẽ tạo XAML liên quan cho bạn trong MainPage.xaml tệp như hình dưới đây.

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"  
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">
			
         <MediaElement.RenderTransform> 
            <CompositeTransform Rotation = "-18.384"/>
         </MediaElement.RenderTransform> 
			
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

Khi ứng dụng trên được biên dịch và thực thi, bạn sẽ thấy video đang phát trên trang web của mình.

Kiểm soát

Các MediaElementchỉ trình bày các phương tiện truyền thông. Nó không cung cấp bất kỳ điều khiển trình phát tiêu chuẩn nào. Nó bắt đầu phát tự động và dừng khi kết thúc và người dùng không thể làm gì để tạm dừng hoặc kiểm soát nó. Vì vậy, trong thực tế, hầu hết các ứng dụng sẽ muốn cung cấp cho người dùng nhiều quyền kiểm soát hơn thế.

Bạn có thể tắt tính năng phát lại tự động bằng cách cài đặt AutoPlay đến False. Điều này có nghĩa là trình phát đa phương tiện sẽ không phát bất cứ thứ gì cho đến khi bạn yêu cầu.

<MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
   AutoPlay = "False" 
   Margin = "51,49,53,53"  
   Source = "/Microsoft Silverlight DEMO.mp4"  
   Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

Vì vậy, khi bạn muốn phát video, bạn chỉ cần gọi MediaElement Play() method. Nó cũng cung cấp các phương pháp dừng và tạm dừng.

Chúng ta hãy xem lại cùng một ví dụ và sửa đổi nó một chút để kiểm soát một chút. Đính kèmMouseLeftButtonDown xử lý MediaElement như được hiển thị trong mã XAML bên dưới.

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
         AutoPlay = "False" 
         MouseLeftButtonDown = "Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown" 
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5"> 
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

Đây là cách triển khai trên MouseLeftButtonDown trình xử lý sự kiện trong đó nó sẽ kiểm tra xem trạng thái hiện tại của phần tử phương tiện đang được mạ thì nó sẽ tạm dừng video nếu không nó sẽ bắt đầu phát video.

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media;

namespace MediaElementDemo { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }  
		
      private void Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown
         (object sender, MouseButtonEventArgs e) {
		
         if (Microsoft_Silverlight_DEMO_mp4.CurrentState == MediaElementState.Playing) { 
            Microsoft_Silverlight_DEMO_mp4.Pause(); 
         } else { 
            Microsoft_Silverlight_DEMO_mp4.Play(); 
         } 
      } 
   } 
}

Khi đoạn mã trên được biên dịch và thực thi, bạn sẽ thấy trang web trống vì chúng tôi đã đặt AutoPlay tài sản để False. Khi bạn nhấp vào trang web, nó sẽ bắt đầu video.