Nagivate through image,HTML,video contents in sfrotator

[Santhosh Kumar]

Hi,

I use sfRotator to bind a series of images and navigate through them for a learning application. The images are stored in a database and bound to the control. This works fine.

Now I have a requirement that along with images, there would be HTML content (with javascript to show popups) as part of the slideshow. There could be videos and animated gifs added in future.

Is there a way to do achieve this using the SfRotator or any other control:

Example:

Slide 1: image

Slide 2: image

slide 3: HTML content (with one or more pages and javascript on each page). The user shall to be able to navigate through each HTML page by swiping before moving to the next slide (slide 4)

slide 4: image

slide 5: video

slide 6: Animated GIF etc.

Thanks

Santhosh

[Suganya Sethuraman]

Hi Santhosh,

We have analysed your requirement. We have achieved your requirement using ItemTemplate of the SfRotator as shown in the following code snippet,

Code snippet

Xaml

<rotator:SfRotator x:Name="rotator"

                           NavigationDelay="2000"

                           ItemsSource="{Binding URLCollection}"

                           SelectedIndex="2"

                           NavigationDirection="Horizontal"

                           NavigationStripMode="Dots"

                           BackgroundColor="#ececec">

    <rotator:SfRotator.ItemTemplate>

        <DataTemplate>

            <WebView Source="{Binding URL}"/>

        </DataTemplate>

    </rotator:SfRotator.ItemTemplate>

</rotator:SfRotator>

We can load the HTML and other video content in the item template layout. We have prepared the sample for HTML page load in SfRotator.

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman.

Attachment: SfRotatorDemo_4b2a3574.zip

[Santhosh Kumar]

Dear Suganya,

The example satisfies for HTML content. But my requirement is like this:

1. First element is an image.
2. second element is a HTML page
3. Third element is a video.

In this case, how can I provide different containers in the item template or is there a way to show different media in the same container (webview in this case)?

Thanks

Santhosh

[Suganya Sethuraman]

Hi Santhosh,

We have analysed your requirement. We have achieved your requirement using ItemContent of the SfRotatorItem as shown in the following code snippet,

Code snippet

 

            // Rotator Item as WebView

 

            SfRotatorItem itemLabel = new SfRotatorItem();

            List<SfRotatorItem> rotatorItem = new List<SfRotatorItem>();

            WebView webView = new WebView();

            webView.Source = "https://help.syncfusion.com/xamarin/rotator/populating-data";

            webView.BackgroundColor = Color.Aqua;

            webView.VerticalOptions = LayoutOptions.Center;

            itemLabel.ItemContent = webView;

            rotatorItem.Add(itemLabel);

 

            // Rotator Item as Image

 

            SfRotatorItem itemImage = new SfRotatorItem();

            Image image = new Image();

            image.Source = ImageSource.FromFile("movie1.png");

            image.Aspect = Aspect.AspectFit;

            image.VerticalOptions = LayoutOptions.Center;

            image.HeightRequest = 400;

            image.WidthRequest = 400;

            itemImage.ItemContent = image;

            rotatorItem.Add(itemImage);

 

            // Rotator Item as Video

 

            SfRotatorItem itemVideo = new SfRotatorItem();

            MediaElement mediaElement = new MediaElement();

            mediaElement.Source = "https://sec.ch9.ms/ch9/dd38/b6a43ca8-243f-4f6a-87bc-c86142dadd38/AsyncPart2_mid.mp4";

            mediaElement.AutoPlay = true;

            mediaElement.IsLooping = true;

            itemVideo.ItemContent = mediaElement;

            rotatorItem.Add(itemVideo);

Please have a modified sample from the attachment.

Please check and let us know if you have any concerns.

Regards,
Suganya Sethuraman.

Attachment: SfRotatorDemo_44db3cab.zip

[Santhosh Kumar]

Hi,

The solution given above works for me but i have a couple of problems now.

I have a sequence of images, htmls and video files to be opened in a certain order. All these files are local files stored on the device. The problems are :

1. If the video file is the first or last slide in the sequence, then it opens and plays. If it happens to be in the middle of the sequence (2 to n-1) then the file doesn't open and shows a blank page.
2. When the file does play (from the 1st and last position), it plays in the background for all the slides. For example, the video is in the first position but we could hear the audio even for the other slides (image or html).
3. The autoplay of mediaelement is set to false but the video plays automatically.

The expected functionality is similar to Amazon where one can see different images and videos of a particular product.

Thanks

Santhosh

[AhamedAliNishad JahirHussain]

 

Hi Santhosh Kumar,

 

Query 1: If the video file is the first or last slide in the sequence, then it opens and plays. If it happens to be in the middle of the sequence (2 to n-1) then the file doesn't open and shows a blank page.

 

Regarding the above query, we suggest a workaround to resolve this issue by updating the MediaElement within an asynchronous method with a 300ms delay, as demonstrated in the following code snippet. Now it works fine in the middle slide and show the media element.

 

 

Code Snippet :

 

Mainpage.xaml.cs   

private async void InitializeRotator()

       {

           SfRotatorItem itemLabel = new SfRotatorItem();

           List<SfRotatorItem> rotatorItem = new List<SfRotatorItem>();

 

 

           SfRotatorItem itemImage3 = new SfRotatorItem();

           Image image3 = new Image();

           image3.Source = ImageSource.FromFile("movie1.png");

           image3.Aspect = Aspect.AspectFit;

           image3.VerticalOptions = LayoutOptions.Center;

           image3.HeightRequest = 400;

           image3.WidthRequest = 400;

           itemImage3.ItemContent = image3;

           rotatorItem.Add(itemImage3);

 

 

           SfRotatorItem itemImage = new SfRotatorItem();

           Image image = new Image();

           image.Source = ImageSource.FromFile("movie1.png");

           image.Aspect = Aspect.AspectFit;

           image.VerticalOptions = LayoutOptions.Center;

           image.HeightRequest = 400;

           image.WidthRequest = 400;

           itemImage.ItemContent = image;

           rotatorItem.Add(itemImage);

 

           await Task.Delay(300);

 

           SfRotatorItem itemVideo = new SfRotatorItem();

           mediaElement = new MediaElement();

           mediaElement.Source = " https://sec.ch9.ms/ch9/dd38/b6a43ca8-243f-4f6a-87bc-c86142dadd38/AsyncPart2_mid.mp4";

           mediaElement.AutoPlay = false;

           mediaElement.IsLooping = true;

           itemVideo.ItemContent = mediaElement;

           rotatorItem.Add(itemVideo);

 

 

           SfRotatorItem itemImage1 = new SfRotatorItem();

           Image image1 = new Image();

           image1.Source = ImageSource.FromFile("movie1.png");

           image1.Aspect = Aspect.AspectFit;

           image1.VerticalOptions = LayoutOptions.Center;

           image1.HeightRequest = 400;

           image1.WidthRequest = 400;

           itemImage1.ItemContent = image1;

           rotatorItem.Add(itemImage1);

 

 

           rotator.ItemsSource = rotatorItem;

       }

 

 

Query 2 & 3: When the file does play (from the 1st and last position), it plays in the background for all the slides. For example, the video is in the first position but we could hear the audio even for the other slides (image or html) and the autoplay of mediaelement is set to false but the video plays automatically.

 

Regarding the above query, we have reviewed your query and implemented a workaround. We now stop and play the MediaElement based on the index in the SelectedIndexChanged method. Additionally, we have set the AutoPlay property of the MediaElement to false to ensure it functions correctly, as demonstrated in the following code snippet:

 

Code Snippet: 

     private void rotator_SelectedIndexChanged(object sender, SelectedIndexChangedEventArgs e)

       {

           if(e.Index == 0 || e.Index == 1 || e.Index == 3)

           {

               mediaElement.Stop();

           }

           else

           {

               mediaElement.Play();

           }

       }

 

 

We have made these modifications to the sample for your reference. Please review the attached sample and let us know the details.

 

Regards,

Ahamed Ali Nishad.

Attachment: SfRotatorDemo_44db3cab_1fddba5a.zip

[Santhosh Kumar]

Dear Ahamed,

Thank you. This worked but the enforced delay in adding the MediaElement does not help my use case.

But I replaced mediaeelement with another player and things started working smoothly without the delay.

Thank you for the support.

Santhosh

[Preethi Rajakandham]

Hi Santhosh,

You're welcome. We are glad to know that the reported problem has been resolved. Please let us know if you require any further assistance on this, we will be happy to assist you. 

Regards,

Preethi R