What's the best way to display rounded video in Silverlight?

Question

MediaElement does not support rounded corners (radiusx, radiusy). Should I use VideoBrush on a rounded rectangle?

Answer 1

Yes. So you ask and yourself answer the question ... But this is one of two options that I can think of. The reasons that may be the problem are that you lose some of the features / controls that you get from the MediaElement control. Another option is to do this:

• Add MediaElement to your page.
• Draw a rectangle above it and set the desired angular radius.
• Right-click the rectangle in Blend and select Create Clipping Path.
• Apply the clipping path to the media item

That way, you still use the MediaElement control, but you can “pin” it so that you want the desired rounding effect.

This example shows a trimmed MediaElement. I know that it’s not easy to imagine a vector path, but if you open it in Blend, you will see a rounded MediaElement.

<MediaElement Height="132" Width="176" Source="Egypt2007.wmv" Clip="M0.5,24.5 C0.5,11.245166 11.245166,0.5 24.5,0.5 L151.5,0.5 C164.75484,0.5 175.5,11.245166 175.5,24.5 L175.5,107.5 C175.5, 120.75484 164.75484,131.5 151.5,131.5 L24.5,131.5 C11.245166, 131.5 0.5,120.75484 0.5,107.5 z"/> 

Answer 2

Using a rounded rectangle and VideoBrush will not lose you any functions / controls with the displayed MediaElement - since the item must be in Xaml anyway, you can control it using the usual Play / Pause / Stop methods, except that playback happens in your rectangle. Using the clip area is a bit cumbersome because it is more difficult to resize the area. Rectangle is better because you have layout flexibility.

 <MediaElement x:Name="myElement" Source="clip.wmv" Visibility="Collapsed"/> <Rectangle RadiusX="10" RadiusY="10" Width="640" Height="480"> <Rectangle.Fill> <VideoBrush Source="myElement" Stretch="Uniform"/> </Rectangle.Fill> <Rectangle/> 

Answer 3

Clip path using “hard” edges - you can also use OpacityMask (although I assume this requires much more processing power).

Answer 4

try it

  <Border CornerRadius="8" BorderBrush="Black" Background="Black" BorderThickness="3"> <MediaElement HorizontalAlignment="Center" VerticalAlignment="Top" Stretch="Fill" x:Name="Player" Source="/Assets/Videos/x.mp3" /> </Border>