Silverlight - วิดีโอและเสียง

ในบทนี้เราจะมาดูกันว่าสิ่งอำนวยความสะดวก Silverlight เล่นวิดีโอและเสียงอย่างไร MediaElementเป็นหัวใจสำคัญของวิดีโอและเสียงทั้งหมดใน Silverlight สิ่งนี้ช่วยให้คุณสามารถรวมเสียงและวิดีโอในแอปพลิเคชันของคุณ MediaElement คลาสทำงานในลักษณะเดียวกันเช่น as Imageชั้นเรียน คุณเพียงแค่ชี้ไปที่สื่อแล้วมันจะแสดงผลเป็นเสียงและวิดีโอ

ความแตกต่างที่สำคัญคือมันจะเป็นภาพที่เคลื่อนไหว แต่ถ้าคุณชี้ไปที่ไฟล์ที่มี แต่เสียงและไม่มีวิดีโอเช่น MP3 มันจะเล่นโดยไม่แสดงอะไรบนหน้าจอ

MediaElement เป็นองค์ประกอบ UI

MediaElementมาจากองค์ประกอบกรอบงานซึ่งเป็นคลาสพื้นฐานขององค์ประกอบอินเทอร์เฟซผู้ใช้ Silverlight ทั้งหมด ซึ่งหมายความว่ามีคุณสมบัติมาตรฐานทั้งหมดดังนั้นคุณสามารถปรับเปลี่ยนความทึบคุณสามารถตั้งค่าคลิปหรือเปลี่ยนรูปได้

ให้เราดูตัวอย่างง่ายๆของ MediaElement.

เปิด Microsoft Blend สำหรับ Visual Studio และสร้างโครงการ Silverlight Application ใหม่

ตอนนี้ลากและวิดีโอหรือไฟล์เสียงลงในพื้นผิวการออกแบบผสมผสาน

มันจะเพิ่ม MediaElement ให้กับพื้นผิวและยังเพิ่มสำเนาของไฟล์วิดีโอในโปรเจ็กต์ของคุณ คุณสามารถดูได้ใน Solution explorer

คุณสามารถเคลื่อนย้ายไปรอบ ๆ เปลี่ยนขนาดทำสิ่งต่างๆเช่นใช้การหมุนเป็นต้น

ตอนนี้มันจะสร้าง XAML ที่เกี่ยวข้องให้คุณใน MainPage.xaml ไฟล์ดังที่แสดงด้านล่าง

<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>

เมื่อแอปพลิเคชันด้านบนได้รับการรวบรวมและดำเนินการคุณจะเห็นว่าวิดีโอกำลังเล่นอยู่บนหน้าเว็บของคุณ

การควบคุม

MediaElementแค่นำเสนอสื่อ ไม่มีการควบคุมเครื่องเล่นมาตรฐานใด ๆ จะเริ่มเล่นโดยอัตโนมัติและหยุดเมื่อถึงจุดสิ้นสุดและไม่มีอะไรที่ผู้ใช้สามารถทำได้เพื่อหยุดชั่วคราวหรือควบคุมมัน ดังนั้นในทางปฏิบัติแอปพลิเคชันส่วนใหญ่ต้องการให้ผู้ใช้สามารถควบคุมได้มากกว่านั้นเล็กน้อย

คุณสามารถปิดการเล่นอัตโนมัติได้โดยการตั้งค่า AutoPlay ถึง False. ซึ่งหมายความว่าโปรแกรมเล่นสื่อจะไม่เล่นอะไรจนกว่าคุณจะถาม

<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">

ดังนั้นเมื่อคุณต้องการเล่นวิดีโอคุณสามารถโทรไปที่ไฟล์ MediaElement Play() method. นอกจากนี้ยังมีวิธีหยุดและหยุดชั่วคราว

ให้เราดูตัวอย่างเดิมอีกครั้งและปรับเปลี่ยนเล็กน้อยเพื่อให้สามารถควบคุมได้เล็กน้อย แนบไฟล์MouseLeftButtonDown ตัวจัดการใน MediaElement ดังแสดงในโค้ด XAML ด้านล่าง

<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>

นี่คือการใช้งานบนไฟล์ MouseLeftButtonDown ตัวจัดการเหตุการณ์ซึ่งจะตรวจสอบว่าหากสถานะปัจจุบันขององค์ประกอบสื่อกำลังชุบอยู่มันจะหยุดวิดีโอชั่วคราวมิฉะนั้นจะเริ่มเล่นวิดีโอ

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(); 
         } 
      } 
   } 
}

เมื่อรวบรวมและดำเนินการโค้ดด้านบนคุณจะเห็นหน้าเว็บว่างเปล่าเนื่องจากเราได้ตั้งค่าไฟล์ AutoPlay คุณสมบัติถึง False. เมื่อคุณคลิกหน้าเว็บก็จะเริ่มวิดีโอ

เมื่อคุณคลิกหน้าเว็บอีกครั้งวิดีโอจะหยุดชั่วคราว