Using AutoPlay to Keep Silverlight Media from Playing Automatically

ID: SL24

Technology: silverlight

Type: Technique

When to Use

Description

The objective of this technique is to use the AutoPlay property of MediaElement object, which prevents the MediaElement from playing its media source automatically.

By default the value of AutoPlay is true, which causes any media that is the Source of the MediaElement to play as soon as either the entire source file is loaded (for nonstreaming media) or an initial buffer is loaded (for streaming media). To prevent the possible accessibility issues, developers can instead specifically set AutoPlay to false, so that the user always controls whether the media plays. This technique would thus be used in combination with providing user interface controls that go along with the MediaElement, and that enable the user to control the media. In particular, the user interface controls enable the media to play, pause or stop, with event wiring for those controls associated with the Play, Pause or Stop methods of the MediaElement object.

Examples

Setting AutoPlay to false, and providing the typical MediaElement controls in the UI

This example has a UI definition in XAML and interaction logic in C#.

The following is the basic UI in XAML. Note the AutoPlay="false" setting. 

<UserControl x:Class="MediaElementControlsAutoPlay.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
   <Grid x:Name="LayoutRoot">
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
       <MediaElement x:Name="media" Source="/xbox.wmv"
          Width="300" Height="300" 
          Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"
          AutoPlay="False"
          AutomationProperties.Name="Video of new Fable game for XBox"           
       />
       <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>
</UserControl>

The following is the C# logic. 

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

This example is shown in operation in the working example of Media Element Controls with AutoPlay False.

Tests

Procedure

  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. The application is expected to use a MediaElement object to play prerecorded media.
  2. Check that the media does not play automatically as soon as the application loads and displays. Rather, the user is presented with a user interface that can start the media per the user's action.

Expected Results

#2 is true.

Resources