Silverlight 3.0 : Prehrávanie multimediálnych súborov

Nástup televízie s vysokým rozlíšením, si vyžiadal nasadiť účinnejšie kompresné metódy, aby sa existujúca kapacita prenosových pásiem lepšie využila. Preto Silverlight 3 podporuje komprimačný algoritmu videa H.264, MPEG-4 AVC, pri ktorom je komprimované video prenášané v transportnom toku (kontajneri) MPEG-2. Kodeky H.264 umožnia oproti MPEG-2 znížiť nároky na kapacitu pri prenose videa dva až trikrát. Podporované sú aj formáty videa, ktoré využívajú YouTube, iPhone a Flash. Grafický výkon aplikácií môže podstatne stúpnuť nakoľko Silverlight 3 podporuje GPU akceleráciu, teda akceleráciu na úrovni grafickej karty. Vyšší grafický výkon potom umožní aj najnáročnejšie aplikácie spúšťať v celoobrazovkovom režime.

V našom príklade sme využili súbor „Wildlife.wmv“, ktorý je implicitne umiestnený do knižnice dokumentov, konkrétne videí v operačnom systéme Microsoft Windows 7. Súbor prekopírujte napríklad do priečinka aplikácie. V záložke okna „Project“ v pravej časti obrazovky aktivujte kontextové menu a vyberte položku „Add Existing Item...“. Takto pridáte video súbor do projektu. Súbor sa zobrazí v okne „Project“. Dvojitým kliknutím na ikonu súboru, alebo presunom symbolu videa na plochu aplikácie sa pridá do XAML kódu objekt MediaElement pre prehrávanie videa:

<MediaElement x:Name="Wildlife_wmv" Margin="318,239,-958,-479"
Source="/Wildlife.wmv" Stretch="Fill"/>

Všimnite si, že pri tomto návrhovom úkone bol vytvorený prvok typu MediaElement s názvom „Wildlife_wmv“. Názov bol odvodený od mena multimediálneho súboru, ktorý sa bude prostredníctvom prvku MediaElement prehrávať. Tento názov potom budete používať v kóde, keď budete chcieť doplniť ovládanie prehrávania.

Teraz môžeme klávesom „F5“ projekt spustiť a otestovať. Po otvorení prehľadávača sa automaticky začne prehrávať videosúbor, zatiaľ bez možnosti ovládania. Preto je v ďalšej fáze príkladu potrebné do projektu pridať aspoň základné ovládacie prvky, pre zastavenie a pre opätovné spustenie prehrávania:

<Grid x:Name="LayoutRoot" Background="White">
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
		<ColumnDefinition Width="*" />
		<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>

	<Grid.RowDefinitions>
		<RowDefinition Height="*" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>

	<MediaElement x:Name="media" Source="wildlife.wmv" Width="300" Height="300" 
	Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" />
	<Button Click="StopMedia" 
	Grid.Column="0" Grid.Row="1" Content="Stop" />
	<Button Click="PauseMedia" 
	Grid.Column="1" Grid.Row="1" Content="Pause" />
	<Button Click="PlayMedia" 
	Grid.Column="2" Grid.Row="1" Content="Play" />
</Grid>

Obslužný kód udalostí:

private void StopMedia(object sender, RoutedEventArgs e)
{
    Wildlife_wmv.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
    Wildlife_wmv.Pause();
}
private void PlayMedia(object sender, RoutedEventArgs e)
{
    Wildlife_wmv.Play();
}

Prehrávanie videa s tlačidlovým ovládaním

Späť na obsah