動画を表示、再生する3(再生、ポーズ、ストップ)
Microsoft Silverlight1.0(XAML & Javascript)で動画を表示し「再生」「ポーズ」「ストップ」とボタンを作成し制御します。
さらに、ビデオによる塗りつぶしも行っています。下のプロパティも参考にしてください。
XAMLのサンプルソース
<Canvas Width="400" Height="350"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="media"
Source="sanba3.wmv"
Canvas.Left="10" Opacity="0"
Width="350" Height="300"
AutoPlay="False" />
<TextBlock Canvas.Left="10" Canvas.Top="0"
FontFamily="Verdana"
FontSize="100" FontWeight="Bold">ABC<LineBreak/>DEF
<TextBlock.Foreground>
<VideoBrush SourceName="media" />
</TextBlock.Foreground>
</TextBlock>
<!-- Play -->
<Canvas MouseLeftButtonDown="play"
Canvas.Left="300" Canvas.Top="30">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55" Fill="#440000ff" />
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>
<!-- Pauses -->
<Canvas MouseLeftButtonDown="pause"
Canvas.Left="300" Canvas.Top="90">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5" Fill="slateblue" />
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>
<!-- Stop -->
<Canvas MouseLeftButtonDown="stop"
Canvas.Left="300" Canvas.Top="150">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5" Fill="#ff2288" />
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>
</Canvas>
Javascriptのサンプルソース
function play(sender, args) {
sender.findName("media").play();
}
function pause(sender, args) {
sender.findName("media").pause();
}
function stop(sender, args) {
sender.findName("media").stop();
}
プロパティ
AutoPlay="true" | 自動で再生。デフォルトtrue |
Volume="1" | 値の範囲は0〜1。デフォルト0.5。 |