locked
Video Player com Full Screen RRS feed

  • Pergunta

  • Olá,

    Criei uma página inteiramente em silverlight e incluí nela um Video Player com mediaElement e alguns controles através de botões customizados e entre eles um de full screen (tela cheia).

    Acontece que quando clico nele, o site inteiro fica em fullscreen e ele aumenta como deveria mas fica dentro do grid em que ele estava inserido ainda, ficando parte do video atrás do site.

    C#:
    public VideoPlayer()
    {
    InitializeComponent();
    Load();
    }

    private void Load()
    {
    App.Current.Host.Content.FullScreenChanged += new EventHandler(OnFullScreen);
    }

    void OnFullScreen(object sender, EventArgs e)
    {
    if (App.Current.Host.Content.IsFullScreen == true)
    {
    double targetWidth = (double)App.Current.Host.Content.ActualWidth;
    double targetHeight = (double)App.Current.Host.Content.ActualHeight;

    userControl.Width = App.Current.Host.Content.ActualWidth;
    userControl.Height = App.Current.Host.Content.ActualHeight;

    videoPlayer.Width = App.Current.Host.Content.ActualWidth;
    videoPlayer.Height = App.Current.Host.Content.ActualHeight;
    }
    }

    private void btnFullScreen_Click(object sender, RoutedEventArgs e)
    {
    App.Current.Host.Content.IsFullScreen = !App.Current.Host.Content.IsFullScreen;
    }



    Xaml:
    <UserControl x:Class="Teste.VideoPlayer" x:Name="userControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="330" d:DesignWidth="557" Height="380" Width="410" VerticalAlignment="Top">

    <Grid x:Name="LayoutRoot" Background="#FF5C7590">
    ...
    ...
    <Border Grid.Row="1" CornerRadius="10" Background="#FFDEDEDE" Margin="10,0,10,0">
    <Grid>
    <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <MediaElement Grid.Row="0" Height="259" Name="videoPlayer" VerticalAlignment="Center" Width="369" AutoPlay="False" Cursor="Hand" CurrentStateChanged="videoPlayer_CurrentStateChanged"/>
    <Border Grid.Row="1" CornerRadius="10" Background="#A0000000" VerticalAlignment="Bottom">
    <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal" Height="30">
    <Button x:Name="imgBtnPlay" Width="40" Style="{StaticResource PlayStyle}" MouseEnter="imgBtnPlay_MouseEnter" MouseLeave="imgBtnPlay_MouseLeave" ClickMode="Press" Click="imgBtnPlay_Click"/>
    <Button x:Name="imgBtnPause" Width="40" Style="{StaticResource PauseStyle}" MouseEnter="imgBtnPause_MouseEnter" MouseLeave="imgBtnPause_MouseLeave" ClickMode="Press" Click="imgBtnPause_Click"/>
    <Grid Width="180">
    <Rectangle Stroke="Black" Height="30" VerticalAlignment="Bottom" >
    <Rectangle.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="Black" Offset="1"/>
    <GradientStop Color="#FF949292"/>
    </LinearGradientBrush>
    </Rectangle.Fill>
    </Rectangle>
    <ProgressBar Name="videoProgress" Height="20" Margin="2,0,2,6" VerticalAlignment="Bottom" Maximum="{Binding NaturalDuration.TimeSpan.TotalSeconds, ElementName=videoPlayer, Mode=OneWay}" Value="{Binding Position.TotalSeconds, ElementName=videoPlayer, Mode=OneWay}" />
    </Grid>
    <Grid Width="70">
    <Rectangle Stroke="Black" Height="30" VerticalAlignment="Bottom" >
    <Rectangle.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="Black" Offset="1"/>
    <GradientStop Color="#FF949292"/>
    </LinearGradientBrush>
    </Rectangle.Fill>
    </Rectangle>
    <TextBlock x:Name="timeElapsed" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <Button Content = "Full" Height="23" HorizontalAlignment="Center" Name="btnFullScreen" VerticalAlignment="Center" Width="75" Click="btnFullScreen_Click" />
    </Grid>
    </StackPanel>
    </Border>
    </Grid>
    </Border>
    </Grid>
    </UserControl>
    Eh mais ou menos isso ai.
    Alguém sabe como posso fazer para deixar em fullScreen sem o video ficar atrás do site???

    Obrigado,
    Abs.
    quinta-feira, 11 de fevereiro de 2010 12:22

Respostas

  • Você já tentou usar o Microsoft Silverlight Media Framework  ele já traz essa função pronta para usar.
    Baixe no site do codeplex (http://smf.codeplex.com/)


    Player Elements

    • Play / pause
    • Rewind
    • Fast forward
    • Replay
    • Slow motion
    • Next chapter marker
    • Previous chapter marker
    • Timeline Scrubber
    • Current position / total position
    • Go to live
    • Bitrate meter
    • Volume
    • Full screen / restore

    Lá você encontra tambem alguns tutorials.

    Espero ter ajudado

    Att.


    Anderson Castro

    Twitter:@andersonCastro

    • Marcado como Resposta Daniel Ferreira quarta-feira, 14 de julho de 2010 13:27
    segunda-feira, 15 de fevereiro de 2010 17:31