Hey, trying to build a parallax effect on a background Video
, connected to a PageControl
. When swiping through the pages in any direction, the background video should move a little to the right or left, showing a different part of it.
My approach to the moving of the video was pretty simple - setting a Translation.X
value from the page that is activating. However, the Translation
requires me to scale the Video
component so that it overlaps the visible part of the screen.
As a result of this (?), the performance of the app is questionable. While it runs just fine in desktop preview (OSX) and iOS preview, on Android the video actually stops playing after a short while (but the swipe navigation still works). Sadly, the same applies to production builds.
Here’s the full project with sample video I’m testing with: https://dl.dropboxusercontent.com/u/11750787/video-parallax.zip
Suggestions on how to do the realtime video re-positioning differently are very welcome. Also, one may assume that the main performance issue in this case could be the Full HD video.
Inline source code for reference:
<App Background="#ff69b4">
<BottomBarBackground Dock="Bottom" IncludesKeyboard="true" />
<DockPanel Dock="Fill">
<Video Width="300%" Layer="Background" File="./Assets/test.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" ContentAlignment="Center" Opacity="0.35">
<Translation ux:Name="videoTranslation" />
<Blur Radius="4.0" />
</Video>
<PageControl Active="One">
<DockPanel ux:Name="One">
<StatusBarBackground Dock="Top" />
<Panel Height="30%" Dock="Top">
<Text Width="70%" MinWidth="150" MaxWidth="400" Value="Super cool overlay text label for page one!" TextColor="#fff" Alignment="Center" TextAlignment="Center" FontSize="22" TextWrapping="Wrap" />
</Panel>
<ActivatingAnimation>
<Change videoTranslation.X="250" />
</ActivatingAnimation>
</DockPanel>
<DockPanel ux:Name="Two">
<StatusBarBackground Dock="Top" />
<Panel Height="30%" Dock="Top">
<Text Width="70%" MinWidth="150" MaxWidth="400" Value="Super cool overlay text label for page two!" TextColor="#fff" Alignment="Center" TextAlignment="Center" FontSize="22" TextWrapping="Wrap" />
</Panel>
<ActivatingAnimation>
<Change videoTranslation.X="50" />
</ActivatingAnimation>
</DockPanel>
<DockPanel ux:Name="Three">
<StatusBarBackground Dock="Top" />
<Panel Height="30%" Dock="Top">
<Text Width="70%" MinWidth="150" MaxWidth="400" Value="Super cool overlay text label for page three!" TextColor="#fff" Alignment="Center" TextAlignment="Center" FontSize="22" TextWrapping="Wrap" />
</Panel>
<ActivatingAnimation>
<Change videoTranslation.X="-150" />
</ActivatingAnimation>
</DockPanel>
<DockPanel ux:Name="Four">
<StatusBarBackground Dock="Top" />
<Panel Height="30%" Dock="Top">
<Text Width="70%" MinWidth="150" MaxWidth="400" Value="Super cool overlay text label for page four!" TextColor="#fff" Alignment="Center" TextAlignment="Center" FontSize="22" TextWrapping="Wrap" />
</Panel>
<ActivatingAnimation>
<Change videoTranslation.X="-350" />
</ActivatingAnimation>
</DockPanel>
</PageControl>
</DockPanel>
</App>
[EDIT] Update: the Android preview actually spills this in the logs, which hints at why the video might stop: “CaptureRegion bigger than maximum texture size, dropping rendering (size: 4394, 1994, max-size: 4096)”