動画を表示、再生する2(反転させ影を表現!?)
Microsoft Silverlight1.0(XAML & Javascript)で動画を表示、再生します。
今回はさらに、動画下に影を付けてみたいと思います。ポイントは動画を反転させるところですね。サンプルソースは下です。動画の制御など、下のプロパティを参考にしてください。
XAMLのサンプルソース
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement Width="200" Height="150" Canvas.Left="0" Canvas.Top="0" Source="sanba3.wmv" Stretch="Fill"/>
<MediaElement Width="200" Height="150" Canvas.Left="14" Canvas.Top="150" Source="sanba3.wmv" Stretch="Fill" IsMuted="True" RenderTransformOrigin="0.5,0.5" >
<MediaElement.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1"/>
<SkewTransform AngleX="10" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</MediaElement.RenderTransform>
</MediaElement>
<Rectangle Width="200" Height="150" Canvas.Left="14" Canvas.Top="150" Opacity="0.8" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="10" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="1"/>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
プロパティ
AutoPlay="true" | 自動で再生。デフォルトtrue |
Volume="1" | 値の範囲は0〜1。デフォルト0.5。 |