locked
How to open and display a JPG file in MediaElement?

    Question

  • No problem to load and display video files in MediaElement.

    But when I SetSource a JPG or PNG file there is nothing to display.

    What is wrong?


    Charlie Chang L

    Wednesday, August 29, 2012 1:16 AM

Answers

  • The MediaElement control doesn't support image formats such as JPG and PNG. In theory you could write an MFT and decoder to create such support, but the difficulty wouldn't be worth the benefit. The Image control is designed for such images and can be used instead.

    You can include both elements in the same place in your app and then show and hide them as appropriate. Here's a quick Xaml snippet which uses VisualStates to switch between showing an Image or a MediaElement. It could be encapsulated in a custom control which switched based on what type of source was last provided.

            <UserControl x:Name="switchableMedia">
                <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="SwitchableStates">
                        <VisualState x:Name="ShowImage">
                            <!-- default state, so don't do anything-->
                        </VisualState>
                        <VisualState x:Name="ShowMedia">
                            <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchableImage" Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchableMediaElement" Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <MediaElement Visibility="Collapsed" x:Name="SwitchableMediaElement" Source="Assets/TestVideo.wmv"></MediaElement>
                <Image Visibility ="Visible" x:Name="SwitchableImage" Source="Assets/TestImage.png" />
                </Grid>
            </UserControl>

    --Rob

    • Proposed as answer by Jesse Jiang Thursday, August 30, 2012 6:39 AM
    • Marked as answer by Jesse Jiang Monday, September 03, 2012 7:13 AM
    Wednesday, August 29, 2012 7:16 PM
    Owner

All replies

  • Load static images such as JPG and PNG in an Image element.

    --Rob

    Wednesday, August 29, 2012 4:40 AM
    Owner
  • Load static images such as JPG and PNG in an Image element.

    This is not a solution. I need to display the image in the same position of the video if the source is an image.

    The two Image and Media elements can not be mixed.


    Charlie Chang L

    Wednesday, August 29, 2012 1:45 PM
  • The MediaElement control doesn't support image formats such as JPG and PNG. In theory you could write an MFT and decoder to create such support, but the difficulty wouldn't be worth the benefit. The Image control is designed for such images and can be used instead.

    You can include both elements in the same place in your app and then show and hide them as appropriate. Here's a quick Xaml snippet which uses VisualStates to switch between showing an Image or a MediaElement. It could be encapsulated in a custom control which switched based on what type of source was last provided.

            <UserControl x:Name="switchableMedia">
                <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="SwitchableStates">
                        <VisualState x:Name="ShowImage">
                            <!-- default state, so don't do anything-->
                        </VisualState>
                        <VisualState x:Name="ShowMedia">
                            <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchableImage" Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchableMediaElement" Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <MediaElement Visibility="Collapsed" x:Name="SwitchableMediaElement" Source="Assets/TestVideo.wmv"></MediaElement>
                <Image Visibility ="Visible" x:Name="SwitchableImage" Source="Assets/TestImage.png" />
                </Grid>
            </UserControl>

    --Rob

    • Proposed as answer by Jesse Jiang Thursday, August 30, 2012 6:39 AM
    • Marked as answer by Jesse Jiang Monday, September 03, 2012 7:13 AM
    Wednesday, August 29, 2012 7:16 PM
    Owner
  • A cute solution. How to switch the visual state by C++ in program?

    I am not quite know the Storyboard. In my testing it is slower than what I just Hide/Show MediaElement and Image.

    Can I set PosterSource to show an image in MediaElement?


    Charlie Chang L

    Friday, August 31, 2012 4:59 PM
  • VisualStateManager::GoToState . This is demonstrated in all of the sample code for handling different view states.

    Using a storyboard shouldn't be inherently slower than just hiding and showing (obviously if you set an animation that will take time). You could do the same thing I have here in code if you prefer that to markup.

    PosterSource will show an image before the video loads, but it isn't a general purpose solution. You can try it to see if it fits your needs.

    --Rob

    Friday, August 31, 2012 11:13 PM
    Owner
  • This is right solution for displaying the image format ( jpg and png file.) and video format(mp4) file in image and Media element  controls Respectively.


    file = VM.CurrentMediaFile;

               

    varstream = awaitfile.OpenAsync(Windows.Storage.FileAccessMode.Read);

               

    StringfileType = file.FileType;

             

                playbackElement1.AutoPlay =

    true;

                playbackElement1.SetSource(stream, fileType);

               

    BitmapImageimg = newWindows.UI.Xaml.Media.Imaging.BitmapImage();

                img.SetSource(stream);

                CapturedPhoto.Source = img;

                playbackElement1.Play();

                                                                                                             

    • Edited by ruma sharma Thursday, November 14, 2013 7:03 AM
    Thursday, November 14, 2013 6:50 AM