I want to show a video player in eachcell in Listview in XAMARIN forms. Please suggest me.

VinaySharma123VinaySharma123 ✭✭Member ✭✭

Please let me know. Guys, I need some sort of suggestion.

Answers

  • PaulDistonPaulDiston ✭✭✭✭ USUniversity ✭✭✭✭

    What have you tried so far?

  • VinaySharma123VinaySharma123 ✭✭ Member ✭✭

    Hi Paul, thanks for your response.

  • VinaySharma123VinaySharma123 ✭✭ Member ✭✭
    edited August 2018

    inside each cell of the list view, I've tried to bring Video player using the code here.

      <video:VideoPlayer x:Name="videoPlayer"
                               Grid.Row="0"
                               Source="{Binding Source={x:Reference listView},
                                                Path=SelectedItem.VideoSource}" />
    

    This player inside a list view. However, it didn't work. !

    I'm trying to do this layout. It's like Music.ly Home Page. Similarly, this app would work.

    Would highly appreciate if any directions can be provided.

  • VinaySharma123VinaySharma123 ✭✭ Member ✭✭
    edited August 2018

    Not sure why URL's and the code is not showing up in my response.

    Hi Paul,

    Thanks for your response.

    inside each cell of the list view, I've tried to bring Video player using the code here. (https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/video-player/source-bindings).

      <video:VideoPlayer x:Name="videoPlayer"
                               Grid.Row="0"
                               Source="{Binding Source={x:Reference listView},
                                                Path=SelectedItem.VideoSource}" />
    

    This player inside a list view. However, it didn't work. !

    I'm trying to do this layout. It's like Music.ly Home Page. Similarly, this app would work. Please refer the link (https://us.v-cdn.net/5019960/uploads/editor/90/jw0awfilemxp.png "")

    Would highly appreciate if any directions can be provided.

  • PaulDistonPaulDiston ✭✭✭✭ USUniversity ✭✭✭✭

    Have you been able to get a simple video player working?

  • VinaySharma123VinaySharma123 ✭✭ Member ✭✭

    yes, But I want it in each listview cell. This is not working

  • PaulDistonPaulDiston ✭✭✭✭ USUniversity ✭✭✭✭

    Why do you think it is not working? What code are you trying?

  • VinaySharma123VinaySharma123 ✭✭ Member ✭✭
    edited August 2018
    <?xml version="1.0" encoding="utf-8" ?>  
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                 xmlns:local="clr-namespace:VideoPlayerApp"  
                 x:Class="VideoPlayerApp.MainPage"  
                 xmlns:forms="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"  
                 Title="Video Player">  
      <ListView ItemsSource="{Binding PersonList}" Grid.Row="8">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
       <StackLayout>  
                             <Label  Text="{Binding Link}" FontSize="14"   />
                <forms:VideoView HeightRequest="202"  
                                 WidthRequest="202"  
                                 />  
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
    
    
    
    
            </StackLayout>  
        </ContentPage.Content>  
    
    </ContentPage>   
    
  • VinaySharma123VinaySharma123 ✭✭ Member ✭✭

    Please refer to the attachment. This is what I've tried.

  • PaulDistonPaulDiston ✭✭✭✭ USUniversity ✭✭✭✭
    edited August 2018

    What does the PersonList look like? Also you need to Bind the source of the VideoView to a property in the PersonList objects.

    How are you setting the source for the VideoView?

  • VinaySharma123VinaySharma123 ✭✭ Member ✭✭

    Personlist is my model from where I will populate the link of the videos but I don't know how I bind video player with a model.
    That is the main issue.

  • PaulDistonPaulDiston ✭✭✭✭ USUniversity ✭✭✭✭

    As you have defined an ItemTemplate, each of the elements in the PersonList collection is represented by the ItemTemplate, so you bind to the PersonList element object :-

    <forms:VideoView HeightRequest="202" WidthRequest="202" Source="{Binding Link}"/>

    You already do something very similar for the Label's Text property.

  • JenineJenine Member

    Thanks, Paul, For answering my colleague's post.

    We are trying to achieve the following.

    1. List having videos, List View Cell is customized to show full-screen video preview while user stop and look @ it.
    2. We are stuck @ list view cell is not previewing videos smoothly. It takes time to load and hang the user interface.
    3. We are trying to achieve using Xamarin Forms

    is Xamarin Form have any limitation in rendering videos in list view custom cell?

    any suggestion is much appreciated.

  • Soundman32Soundman32 ✭✭ USMember ✭✭

    @Jenine - so there is NOT a problem with the list view component, it's just that the videos take time to load and display?

  • JenineJenine Member

    Yes, you are right. Just wondering how to show using Xamarin.Forms a list of videos responsive similar to music.ly.

  • AdrianKnightAdrianKnight ✭✭✭✭ USMember ✭✭✭✭

    @Jenine I can't use MediaManager because it has no .NET Standard support, but if you are on Android, try using ExoPlayer (I think they have a separate package you could pull in for that). Don't use the old stock video player on Android devices.

  • gaurangmakwanagaurangmakwana Member

    @Jenine Were you able to load the videos in list view smoothly? I am facing the same problem.
    Can you please share with us if you found any solution for the same.

  • mallikarjun_patalamallikarjun_patala ✭✭ Member ✭✭

    I need to design audio and Video player in listview cell same like Above screenshot. Should I take Separate layout of Listview. We receive Either Audio or video From the API.

    Please share inputs.

    Thanks in advance.

Sign In or Register to comment.