locked
Using MediaElement in RichTextBlock

    Question

  • Hi,

    How can I use a MediaElement in a RichTextBlock? I have tried all opportunities.

    Here the code fragments:

    <StackPanel x:Name="elements">
    	<!--Only for test load-->
    	<SymbolIcon Symbol="Play"
    				x:Name="btnSymbol"
    				HorizontalAlignment="Stretch"
    				VerticalAlignment="Stretch"
    				Opacity="0.5"
    				Tapped="MediaElement_Tapped" />
    	<RichTextBlock>
    		<Paragraph x:Name="parx">
    			<Run Text="Lorem ipsum dolor sit amet, ..." />
    			<LineBreak />
    			<Span >
    				<Run Text="At vero eos et accusam et ..." />
    			</Span>
    			<LineBreak />
    		</Paragraph>
    		<Paragraph>
    			<InlineUIContainer>
    				<Grid>
    					<MediaElement AutoPlay="False"
    								  AreTransportControlsEnabled="True"
    								  x:Name="media"
    								  VerticalAlignment="Stretch"
    								  HorizontalAlignment="Stretch" />
    				</Grid>
    			</InlineUIContainer>
    			<LineBreak />
    		</Paragraph>
    		<Paragraph>
    			<Run Text="At vero eos et ..." />
    		</Paragraph>
    	</RichTextBlock>
    </StackPanel>
    

    Here the code from MediaElement_Tapped:

    private void MediaElement_Tapped(object sender, TappedRoutedEventArgs e) {
    	try {
    		pr.Visibility = Windows.UI.Xaml.Visibility.Visible;
    		//"bw4aMDzfRHM"
    		var uri = await YouTube.GetVideoUriAsync("-IuSrlnvAvE", YouTubeQuality.Quality1080P);
    		if (uri != null)
    			media.Source = uri.Uri;
    		
    		//media.AreTransportControlsEnabled = true;
    		//media.PosterSource = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/WideLogo.png", UriKind.RelativeOrAbsolute));
    	}
    	catch (Exception) {
    		//tb.Text = ex.Message;
    	}
    	finally {
    		pr.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
    	}
    }

    An other sample works fine:

    <Grid Grid.Row="1"
    	  x:Name="ContentRoot"
    	  Margin="19,9.5,19,0">
    	<ScrollViewer HorizontalScrollBarVisibility="Disabled">
    		<StackPanel>
    			<ProgressRing x:Name="pr"
    						  HorizontalAlignment="Center"
    						  VerticalAlignment="Center"
    						  IsActive="True"
    						  Visibility="Collapsed" />
    			<Border BorderBrush="Red"
    					BorderThickness="0.5">
    				<MediaElement AutoPlay="False"
    							  AreTransportControlsEnabled="False"
    							  x:Name="media"
    							  VerticalAlignment="Stretch"
    							  HorizontalAlignment="Stretch"
    							  PosterSource="Assets/WideLogo.png" />
    			</Border>
    			<TextBlock Text="Youtube Video"
    					   x:Name="tb" HorizontalAlignment="Center" />
    
    			<SymbolIcon Symbol="Play"
    						x:Name="btnSymbol"
    						HorizontalAlignment="Stretch"
    						VerticalAlignment="Stretch"
    						Opacity="0.5"
    						Tapped="MediaElement_Tapped" />
    		</StackPanel>
    	</ScrollViewer>
    </Grid>
    


    Ingo

    Friday, November 14, 2014 9:11 PM

All replies

  • A basic MediaElement in the RichTextBlock using your initial sample code and setting the Source in its Tapped event handler worked fine. Does your code work if you swap out the YouTube video for a static video? Does the YouTube video code work outside of the RichTextBlock?

    Can you please explain the exact behaviour you get and how it differs from the behaviour you expect? Can you share a minimal sample which demonstrates the problem?

    Saturday, November 15, 2014 2:46 AM
    Owner
  • OK, here some more information. It is a simple universal App (HubApp template)

    copy following xaml in the "ContentRoot" grid

                <ScrollViewer HorizontalScrollBarVisibility="Disabled">
                    <StackPanel x:Name="elements">
                        <ProgressRing x:Name="pr"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      IsActive="True"
                                      Visibility="Collapsed" />
                        <SymbolIcon Symbol="Play"
                                    x:Name="btnSymbolIcon"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Opacity="0.5"
                                    Tapped="btnSymbolIcon_Tapped" />
    
                        <!--This works fine--> 
                        <MediaElement AutoPlay="False"
                                      AreTransportControlsEnabled="True"
                                      x:Name="sp_media"
                                      VerticalAlignment="Stretch"
                                      HorizontalAlignment="Stretch"
                                      PosterSource="Assets/WideLogo.png" />
    
                        <RichTextBlock>
                            <Paragraph x:Name="parx">
                                <Run Text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." />
                                <LineBreak />
                                <Span>
                                    <Run Text="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum." />
                                </Span>
                                <LineBreak />
                            </Paragraph>
                            <Paragraph>
                                <InlineUIContainer>
                                    <!--This doesn't work. The time line is flickering-->
                                    <MediaElement AutoPlay="False"
                                                  AreTransportControlsEnabled="True"
                                                  x:Name="rtb_media"
                                                  VerticalAlignment="Stretch"
                                                  HorizontalAlignment="Stretch"
                                                  PosterSource="Assets/WideLogo.png"/>
                                </InlineUIContainer>
                                <LineBreak />
                            </Paragraph>
                            <Paragraph>
                                <Run Text="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum." />
                            </Paragraph>
                        </RichTextBlock>
                    </StackPanel>
                </ScrollViewer>
    


    Here the c# code for tapped event:

            private async void btnSymbolIcon_Tapped(object sender, TappedRoutedEventArgs e) {
                try {
                    pr.Visibility = Windows.UI.Xaml.Visibility.Visible;
                    //var uri = await YouTube.GetVideoUriAsync("-IuSrlnvAvE", YouTubeQuality.Quality1080P);
                    var uri = "ms-appx:///Assets/VIDEO0009.MP4";
    
                    //if (uri != null)
                    //    sp_media.Source = uri.Uri;
                    sp_media.Source = new Uri(uri, UriKind.RelativeOrAbsolute);
                    rtb_media.Source = new Uri(uri, UriKind.RelativeOrAbsolute);
                    //media.PosterSource = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/WideLogo.png", UriKind.RelativeOrAbsolute));
                }
                catch (Exception) {
                    //tb.Text = ex.Message;
                }
                finally {
                    pr.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
                }
            }
    

    you can replace the video with your own Video and the YouTube Id is a public video from a german blog.for YouTube I use the NuGet package "MyToolkit" and the IDE is Visual Studio Professional 2013 Update 4

    Sorry for the bad english.

    Regards

    Ingo


    Ingo

    Sunday, November 16, 2014 11:36 AM
  • I have an simple example replied, see my 2nd post.

    Ingo

    Wednesday, November 19, 2014 6:18 PM
  • Can you please explain the exact behaviour you get and how it differs from the behaviour you expect? Can you share a minimal sample on your OneDrive which demonstrates the problem?

    Thursday, November 20, 2014 12:20 AM
    Owner
  • Can you please explain the exact behaviour you get and how it differs from the behaviour you expect? Can you share a minimal sample on your OneDrive which demonstrates the problem?

    OK here is the link for the example.

    http://1drv.ms/1to6x2M

    the Problem is following, in a stackpanel the MediaElement works fine, but if the mediaelement nested in an InlineUIContainer from RichTextBlock it works not.

    Sorry for my bad english.


    Ingo


    • Edited by Ingo Runkel Saturday, November 22, 2014 3:54 PM
    Saturday, November 22, 2014 3:53 PM
  • Hi Ingo,

    Can you provide a minimal but complete repro project? The one you included doesn't build as-is. It has at least one broken dependency on a nuget package and you left out the sln file.

    Also please provide exact repro steps and a clear description of the problem. What do you mean by "works fine" and "works not"? What behaviour do you expect, and how is that different from the behaviour you actually get?

    --Rob

    Wednesday, December 3, 2014 2:15 AM
    Owner