CODEWITHSUNDEEP
c#windows-phone-8.1video-player
Black Cid
Black Cid

Reputation: 446

Windows Phone 8.1, rotating video is being cropped

I have to rotate a video, but I am having the following problem:

enter image description here

First one (top left) is the original video, as you can see, I have to rotate 90º. In landscape there is no problem (top right). But when I rotate in portrait (bottom left) the video is being cropped.

I think that the problem is that the video have a part outside the phone and that part is removed as you can see in the last three images (bottom right) (this is what I think, I am not sure if this is the problem).

This is my code:

stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

videoPlayer.RenderTransform = new CompositeTransform() { Rotation = rot};

videoPlayer.SetSource(stream, file.FileType);
videoPlayer.Play()

Rect bounds = ApplicationView.GetForCurrentView().VisibleBounds;
switch (rot) {
    case -90:
    case -270:
    case 90:
    case 270:
         videoPlayer.Height = bounds.Width;
         videoPlayer.Width = bounds.Height;
         break;
    default:
    case 0:
    case -180:
    case 180:
        videoPlayer.Height = bounds.Height;
        videoPlayer.Width = bounds.Width;
        break;
}

And in xaml:

<MediaElement Name="videoPlayer"
              AutoPlay="True"
              Stretch="Uniform"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              RenderTransformOrigin="0.5,0.5"
              AreTransportControlsEnabled ="False"/>

Can someone tell me how to rotate the video without this cropping?

(The stretch value doesn't affect, I have tried all the possible values and nothing, same result)

Thank you,

Upvotes: 2

Views: 554

Answers (2)

reza.cse08
reza.cse08

Reputation: 6178

It works for wp8.1 Silverlight

<Grid>
  <Canvas Name="gdPlayer"
          HorizontalAlignment="Center"
          VerticalAlignment="Center">
        <MediaElement x:Name="player"
                      Stretch="Uniform"
                      VerticalAlignment="Center"
                      HorizontalAlignment="Center"
                      RenderTransformOrigin="0.5 0.5" />    
    </Canvas>
</Grid>

to rotate 90 degrees

player.RenderTransform = new CompositeTransform() { Rotation = 90, TranslateX = -(Application.Current.Host.Content.ActualHeight / 2), TranslateY = -(Application.Current.Host.Content.ActualWidth / 2) };
player.Height = Application.Current.Host.Content.ActualWidth;
player.Width = Application.Current.Host.Content.ActualHeight;

to rotate 0 degrees

player.RenderTransform = new CompositeTransform() { Rotation = 0, TranslateX = -(Application.Current.Host.Content.ActualWidth / 2), TranslateY = -(Application.Current.Host.Content.ActualHeight / 2) };
player.Height = Application.Current.Host.Content.ActualHeight;
player.Width = Application.Current.Host.Content.ActualWidth;

Upvotes: 0

Romasz
Romasz

Reputation: 29790

As I think the problem with cropping is because of the Grid (or other) panel. It probably crops the video/mediaelement before rotating, so after this transform you see it as a square.

I've tried your code from the comment and managed to rotate video without cropping by using Canvas:

<Canvas x:Name="LayoutRoot" Background="Transparent">
    <Button x:Name="myBtn" Content="ClickMe button" Click="myBtn_Click"/>
    <MediaElement Name="myMedia" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
</Canvas>

private void myBtn_Click(object sender, RoutedEventArgs e)
{
    myMedia.Source = new Uri(@"ms-appx:///Test.mp4");
    Rect bounds = ApplicationView.GetForCurrentView().VisibleBounds;
    myMedia.RenderTransform = new CompositeTransform() { Rotation = 90, TranslateX = -bounds.Width / 2 };
    double scaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
    myMedia.Height = bounds.Width * scaleFactor;
    myMedia.Width = bounds.Height * scaleFactor;
}

Upvotes: 2

Related Questions