background video parallax - how to / performance

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)”

There are a couple of things that are going to be causing performance issues doing this.

You are trying to render a video at 3x the screen size. On its own this shouldn’t be a problem, as I believe the actual rendering size is the size of the video itself and we stretch to fill the element size. However, this large size has problems for Blur and Opacity. Certainly reducing the video size will be helpful in any case.

<Blur> is a very costly effect, and it’s cost directly relates to the size of the things it is blurring (in this case a video 3x the screen size). To get performance here you’ll need to render your video in a blurred form and remove the Blur effect. We know we have ways to optimize Blur, but not likely to ever support such large effects across all mobile devices.

Using Opacity also forces an element to be cached. Some paths are optimized in the code to avoid double-caching, but you probably hit one that is not. Try removing that as well, as I’m not sure why you need an opacity here.