Qual é a melhor maneira de exibir um vídeo com cantos arredondados no Silverlight?
-
09-06-2019 - |
Pergunta
O MediaElement não oferece suporte a cantos arredondados (radiusx, radiusy).Devo usar um VideoBrush em um retângulo com cantos arredondados?
Solução
Sim - de certa forma, você mesmo está perguntando e respondendo à pergunta ...Mas essa é uma das duas opções em que consigo pensar.Os motivos que podem ser um problema é que você perde alguns dos recursos/controle obtidos do controle MediaElement.Outra opção é fazer isso:
- Adicione seu MediaElement à sua página.
- Desenhe um retângulo em cima dele e defina o raio do canto desejado
- Clique com o botão direito no retângulo no Blend e escolha "Criar caminho de recorte"
- Aplique o caminho de recorte ao seu MediaElement
Dessa forma, você ainda estará usando um controle MediaElement, mas poderá "cortar" o que quiser para obter o efeito arredondado desejado.
Este exemplo mostra um MediaElement recortado.Eu sei que não é fácil imaginar o caminho do vetor, mas se você abri-lo no Blend você verá um MediaElement arredondado.
<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"/>
Outras dicas
Usar um retângulo arredondado e um VideoBrush não perde nenhum recurso/controle sobre o uso de um MediaElement exibido - como o elemento precisa estar no Xaml de qualquer maneira, você pode controlá-lo usando os métodos habituais Play/Pause/Stop, exceto que o a reprodução acontece no seu retângulo.Usar uma região de clipe é um pouco complicado porque é mais difícil redimensionar a região.Um retângulo é melhor porque você tem flexibilidade de layout.
<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/>
O caminho do clipe oferece bordas "rígidas" - você também pode usar um OpacityMask (embora eu imagine que isso exija muito mais poder de processamento).
Experimente isso
<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>