I have a CollectionView that has a VideoPlayer element in its DataTemplate taken from Xamarin Forms sample projects. On iOS, the video player rendered uses AVPlayer to play video.
I also have a button that when pressed, adds more items to the ItemSource of the CollectionView.
If I play the first, say, three items and pause them all on random frame/time, and then press this add more items button, the frozen image frames on these three AVPlayer instances on iPhone get shuffled/switched in some weird order.
In more detail:
If the first item of the CollectionView has some animated cartoon video paused, and the second item has some sports game video paused, and the third item has some forest images video paused, when I press the add more items button, and some new items get added to the ItemSource of the CollectionView, I see the sports game video frame moved to the first item's AVPlayer instance, the forest images video frame moved to second item's AVPlayer instance and the animated cartoon frame is moved to third item's AVPlayer instance.
After these have been 'shuffled', if I unpause the first item, it plays its original video of animated cartoon, and same goes with item two and three. The only problem, as I understand it, is that somewhere in the caching / cell reusing mechanism of CollectionView, the cached frames of AVPlayer are switched in some order when new items are added to the CollectionView.
This problem happens exclusively with AVPlayer. Any other element, does not reproduce this behavior. I have tried with ffimageloading's CahcedImage, simple labels and other elements, but it is only AVPlayer's rendered, paused frame images that get shuffled.
I realize this issue probably has some deep roots that won't be solved on Xamarin Forms level, but just wanted to try my luck here.
My code for the CollectionView is pretty basic:
<CollectionView ItemsSource="{Binding ScrollArticles}"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
RemainingItemsThreshold="5"
RemainingItemsThresholdReachedCommand="{Binding LoadMoreItems}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
ItemsLayout="VerticalList"
x:Name="CategoryItemsListView"
VerticalScrollBarVisibility="Always"
Scrolled="CategoryItemsListView_OnScrolled"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<elements:VideoPlayer Margin="0,0,0,15" Source={Binding video_url}>
</elements:VideoPlayer>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The same exact code, when having the VideoPlayer element replaced with any other element, say Image, behaves as it should.
Another thing is that the same exact VideoPlayer code does not do this when implemented inside ListView (with CachingStrategy=RecycleElement) instead of CollectionView. But unfortunately, ListView lacks a lot of features such as determining the center most item when scrolling etc.
