Timed Image Overlay plugin

Dec 15, 2010 at 5:34 PM

While the timed text plugin for useful for text captions/subtitles, I can easily see a need for overlaying timed images on top of the video. These include image based subtitles, logos, telestration, etc. Are there any plans for this type of plugin? If not how difficult would it be to write a custom plugin for this purpose?

Jan 6, 2011 at 6:59 PM

It is certainly a useful feature. I just created an overlay proof of concept for my SMF player. Once I get past the PoC stage I can make a plugin but right now it is a separate control. Consider this XAML:

<Grid>
    <sfm:SMFPlayer ...></sfm:SMFPlayer>
    <UserControls:VideoOverlay MyOverlays="{Binding CurrentOverlays}"/>
</Grid>

 

Where the overlay control is transparent and sits above the SMFPlayer video but not over the buttons. The VideoOverlay control looks something like this:

 

<Grid x:Name="LayoutRoot">
    <local:CustomItemsControl ItemsSource="{Binding MyOverlays, ElementName=userControl}" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="0">
        <local:CustomItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="grid">
                    <local:MyOverlayControl Height="{Binding Height}" Width="{Binding Width}">
                        <i:Interaction.Behaviors>
                            <ei:MouseDragElementBehavior X="{Binding LeftOffset, Mode=TwoWay}" Y="{Binding TopOffset, Mode=TwoWay}" ConstrainToParentBounds="True"/>
                        </i:Interaction.Behaviors>
                    </local:MyOverlayControl>
                </Grid>
            </DataTemplate>
        </local:CustomItemsControl.ItemTemplate>
    </local:CustomItemsControl>
</Grid>

This is basically an ItemsControl that has an items source bound to a property on this control. So I have a DependencyProperty in my code behind called MyOverlays that you can bind your custom overlays to and add/remove overlays as they are relevant. Then I create an ItemTemplate to define what a new item will look like. In my case it is a Grid with a dragable custom control that has a height, width, X, and Y to indicate how and where the overlay appears.

That was a lot of code, but to answer your question... I don't know if there are any plans of supporting something like this in the player but it's not too difficult to write your own basic overlay. It took me about a day to write the code to get it working initially. Then you'll have several other days to get it work if you end up wanting the overlay to be at the correct X and Y when you resize the video as I did. :-)