Amazon.com Widgets How to Make a Media Element Loop Indefinitely

WilliaBlog.Net

I dream in code

About the author

Robert Williams is an internet application developer for the Salem Web Network.
E-mail me Send mail
Code Project Associate Logo
Ads by Lake Quincy Media

Recent comments

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.


How to Make a Media Element Loop Indefinitely

I was surprised to see that the XAML media element did not have a loop property built into it. Surely having a clip loop is basic functionality? In any case I came up with a JavaScript solution that seemed much simpler to implement than the pure XAML solution offered on the MSDN website

JavaScript Solution

    handleLoad: function(control, userContext, rootElement)
    {
        this.control = control;

        //  Get a reference to your media element (mine is called "MainMovie")         
        this.movie = control.content.findName("MainMovie");
        // Add an Event Listener for the "MediaEnded" Event
       this.movie.addEventListener("MediaEnded", Silverlight.createDelegate(this,this.movieMediaEnded));
    },

    //When the end of the movie is reached, return the movie to the start and play it again
    movieMediaEnded: function(sender, eventArgs)
    {
        sender.Position = "00:00:00";
        sender.play();
    }

See my solution in action at The Daily Prophet Online.

MSDN's Pure XAML Solution

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

<StackPanel>

<!-- The MediaElement control plays the sound. -->

<MediaElement Name="myMediaElement" >

<MediaElement.Triggers>

<EventTrigger RoutedEvent="MediaElement.Loaded">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<!-- The MediaTimeline has a RepeatBehavior="Forever" which makes the media play

over and over indefinitely.-->

<MediaTimeline Source="media\tada.wav" Storyboard.TargetName="myMediaElement"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</MediaElement.Triggers>

</MediaElement>

</StackPanel>

</Page>


Posted by Williarob on Tuesday, October 30, 2007 12:27 PM
Permalink | Comments (0) | Post RSSRSS comment feed

Comments

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading