Unity - Issues with Android devices playing videos
Posted: 21 Jan 2025, 17:30
Hey All,
We've recently implemented some demonstration videos for various troops and research items in our game (think clash of clans barracks etc.) and have now got the time to try and improve the performance. We weren't entirely sure where the issue is but wanted to check the implementation is correct. The videos are working flawlessly both in editor and on iOS but on some Android devices (specifically lower end ones) videos appear to be stuttering or not playing at all until the game is closed and then re-opened once. Which whilst is fairly minor is undesirable, especially as a first impression.
The way it has been implemented is to have a Control style that when passed a specific string will set the visibility of that specific MediaElement with the video to visible and hide the remainder. However the ideally preferred solution would be able to dynamically swap the source of a single media element for both code simplicity and performance that will (hopefully) allow the videos to work at run time regardless of device. Ideally these videos would autoplay and loop without user intervention.
Above is a small snippet, as you can imagine will become a maintenance nightmare so keen to have a different solution! Ideally the videos should be loaded on demand when a user selects a unit rather than having them all loaded at once and just showing/hiding as needed.
Here is an example of the implementation of the style, as you can see it's simply passed a bound string which then is handled by the style to make visible the correct video at run time using the above style.
What we want to know is what is the better way of implementing MediaElements that can dynamically load videos on request at runtime in Noesis 3.2.5/tips to improve this current implementation?
Many thanks in advance,
Jack
We've recently implemented some demonstration videos for various troops and research items in our game (think clash of clans barracks etc.) and have now got the time to try and improve the performance. We weren't entirely sure where the issue is but wanted to check the implementation is correct. The videos are working flawlessly both in editor and on iOS but on some Android devices (specifically lower end ones) videos appear to be stuttering or not playing at all until the game is closed and then re-opened once. Which whilst is fairly minor is undesirable, especially as a first impression.
The way it has been implemented is to have a Control style that when passed a specific string will set the visibility of that specific MediaElement with the video to visible and hide the remainder. However the ideally preferred solution would be able to dynamically swap the source of a single media element for both code simplicity and performance that will (hopefully) allow the videos to work at run time regardless of device. Ideally these videos would autoplay and loop without user intervention.
Code: Select all
<Style
x:Key="TroopVideoDemo"
TargetType="{x:Type Control}">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<MediaElement
x:Name="PeasantVideoDemo"
Visibility="Collapsed"
IsMuted="True"
Source="/Assets/GUI/Videos/Troop Demos/Peasant.mp4"
Margin="8,5,10,10"
Stretch="Fill"
HorizontalAlignment="Center"
VerticalAlignment="Center"
LoadedBehavior="Manual">
<MediaElement.OpacityMask>
<ImageBrush
ImageSource="{StaticResource Misc Elements/Masks/video-mask-rounded-corners}" />
</MediaElement.OpacityMask>
<b:Interaction.Triggers>
<b:EventTrigger
EventName="Loaded">
<noesis:PlayMediaAction />
</b:EventTrigger>
<b:EventTrigger
EventName="MediaEnded">
<noesis:StopMediaAction />
<noesis:PlayMediaAction />
</b:EventTrigger>
</b:Interaction.Triggers>
</MediaElement>
<MediaElement
x:Name="ArcherVideoDemo"
Visibility="Collapsed"
IsMuted="True"
Source="/Assets/GUI/Videos/Troop Demos/Archer.mp4"
Margin="8,5,10,10"
Stretch="Fill"
HorizontalAlignment="Center"
VerticalAlignment="Center"
LoadedBehavior="Manual">
<MediaElement.OpacityMask>
<ImageBrush
ImageSource="{StaticResource Misc Elements/Masks/video-mask-rounded-corners}" />
</MediaElement.OpacityMask>
<b:Interaction.Triggers>
<b:EventTrigger
EventName="Loaded">
<noesis:PlayMediaAction />
</b:EventTrigger>
<b:EventTrigger
EventName="MediaEnded">
<noesis:StopMediaAction />
<noesis:PlayMediaAction />
</b:EventTrigger>
</b:Interaction.Triggers>
</MediaElement>
<ControlTemplate.Triggers>
<Trigger
Property="local:PropEx.VideoPath"
Value="TroopType_Peasant">
<Setter
TargetName="PeasantVideoDemo"
Property="Visibility"
Value="Visible"/>
<Setter
TargetName="ArcherVideoDemo"
Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger
Property="local:PropEx.VideoPath"
Value="TroopType_Archer">
<Setter
TargetName="PeasantVideoDemo"
Property="Visibility"
Value="Hidden" />
<Setter
TargetName="ArcherVideoDemo"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is an example of the implementation of the style, as you can see it's simply passed a bound string which then is handled by the style to make visible the correct video at run time using the above style.
Code: Select all
<Grid
x:Name="TroopVideoDemo"
Grid.RowSpan="3"
Grid.Column="4">
<Control
Style="{StaticResource TroopVideoDemo}"
local:PropEx.VideoPath="{Binding BarracksContext.SelectedSquad.DisplayTroop.VideoPath}">
</Control>
</Grid>
Many thanks in advance,
Jack