Redazione
a- a+

Integrazione di elementi multimediali

Silverlight: integrazione di elementi multimediali

Una delle funzionalità primarie in Silverlight è la possibilità di mandare in streaming dati multimediali nel Web. Silverlight è in grado di farlo attraverso un media player integrato in modo tale che il client non debba installarne uno sulla propria macchina, cosa invece richiesta dalla maggior parte delle altre tecnologie concorrenti. Con Silverlight, una volta che si è installato il plugin, tutte le sue funzionalità sono accessibili.

In un articolo precedente, abbiamo visto come integrare funzionalità multimediali in un'applicazione ASP.NET AJAX attraverso l'uso del controllo asp:Media appartenente alle estensioni ASP.NET Futures. Tale controllo è un'implementazione dell'elemento Silverlight , il quale viene usato per collegare sorgenti multimediali. Il seguente codice viene impiegato per mostrare un semplice video in formato WMV.

Es 1:

Il risultato di tale codice è visibile nell'immagine sottostante:


Fig 1: risultato del codice dell'esempio 1

Modificando leggermente il codice appena visto, possiamo ottenere il controllo sulla riproduzione del video. Si dovrebbe assegnare un nome a MediaElement, al quale si accede in seguito attraverso il codice. Nell'esempio sottostante. MediaElement invoca il metodo mediaControl quando il tasto sinistro del mouse viene rilasciato.

Ecco come viene implementato il metodo mediaControl:

public void mediaControl(object o, EventArgs e) {          // Is the media playing?        if (meVideo.CurrentState == "Playing") {            meVideo.Pause();        } else  {            meVideo.Play();        }}

Come risultato del codice appena visto, il video può essere avviato e messo in pausa cliccando sul controllo apposito.

Un altro effetto visuale molto polare riguardante la riproduzione di un video attraverso Silverlight o WPF è l'effetto "pavimento bagnato". Quest'effetto si può realizzare facilmente con Expression Blend e consiste nel mostrare un video due volte, una in modalità normale ed una riflessa. Il file XAML qui sotto viene usato per generare la riflessione.

Es 2: Page.xaml

<Canvas
          xmlns="http://schemas.microsoft.com/client/2007"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           x:Name="parentCanvas"
           Loaded="Page_Loaded"
           x:Class="WetFloor.Page;assembly=ClientBin/WetFloor.dll"
          Width="640"
          Height="480">
     <Canvas.Background>
    <RadialGradientBrush MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">
     <GradientStop Color="#FFE9F0F2" Offset="0"/>
     <GradientStop Color="#FF527481" Offset="1"/>
    </RadialGradientBrush>
   </Canvas.Background>
   <MediaElement RenderTransformOrigin="0.5,0.5" Width="288" Height="200"
                 Canvas.Left="80" Canvas.Top="80" Source="EmergencySituation.wmv"
                 Stretch="Fill" x:Name="Video">
    <MediaElement.RenderTransform>
     <TransformGroup>
      <ScaleTransform ScaleX="1" ScaleY="1"/>
      <SkewTransform AngleX="0" AngleY="-20"/>
      <RotateTransform Angle="0"/>
      <TranslateTransform X="0" Y="0"/>
     </TransformGroup>
    </MediaElement.RenderTransform>
   </MediaElement>
     <MediaElement RenderTransformOrigin="0.5,0.5" Width="288" Height="161.947"
                   Canvas.Left="177.325" Canvas.Top="280"
                   Source="EmergencySituation.wmv" Stretch="Fill" x:Name="Video_Copy">
    <MediaElement.RenderTransform>
     <TransformGroup>
      <ScaleTransform ScaleX="1" ScaleY="-1"/>
      <SkewTransform AngleX="50" AngleY="-20"/>
      <RotateTransform Angle="0"/>
      <TranslateTransform X="0" Y="0"/>
     </TransformGroup>
    </MediaElement.RenderTransform>
    <MediaElement.OpacityMask>
     <LinearGradientBrush EndPoint="0.49,-0.019" StartPoint="0.491,1.083"
                          MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">
      <GradientStop Color="#FF000000" Offset="0"/>
      <GradientStop Color="#00FFFFFF" Offset="1"/>
     </LinearGradientBrush>
    </MediaElement.OpacityMask>
   </MediaElement>    
</Canvas>

 

<a href="/img/11/iframe_multimedia1.html" title="Vedi esempio">Vedi esempio</a>;

 

Ed ecco il risultato finale.

Codice 2
Fig 2: risultato dell'esempio 2

Silverlight attualmente supporta i seguenti formati multimediali:

  • Advanced Stream Redirector (ASX) playlist
  • Windows Media Audio 7 (WMA 7)
  • Windows Media Audio 8 (WMA 8)
  • Windows Media Audio 9 (WMA 9)
  • ISO/MPEG Layer-3 (MP3)
  • Windows Media Video 7 (WMV 1)
  • Windows Media Video 8 (WMV 2)
  • Windows Media Video 9 (WMV 3)
  • Windows Media Video Advanced Profile, non-VC1 (WMVA)
  • Windows Media Video Advanced Profile, VC1 (WMVC1)



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Luca
Ti è piaciuto l'articolo?