Add banner to video on playlist in code behind

[Markus]

I do want to add a different banner to each video in a playlist. The banners (blank .png) would be used to make a link if the video is clicked.

Is there a way to connect the banners to the the different video files since every video should take the visitor to a different page.

Last line commented does not seem to be working.

Markus

banner = new MediaPlayerBanner()
                {
                    NavigateURL = "http://www.marktold.com", //this would be different later per file
                    ImageUrl ="/css/images/mediaplayer_blank_banner.png",

                };

                    file = new MediaPlayerVideoFile()
                    {
                        Poster = string.Format(PosterMP4),
                        //Path = string.Format(MP4),
                        AutoPlay = true,

                    };
                    SourceMP4 = new MediaPlayerSource()
                    {
                        Path = MP4,
                    };
                    SourceWEBM = new MediaPlayerSource()
                    {
                        Path = WEBM,
                    };
                    SourceOGV = new MediaPlayerSource()
                    {
                        Path = OGV,
                    };

                    file.Sources.Add(SourceOGV);
                    file.Sources.Add(SourceWEBM);
                    file.Sources.Add(SourceMP4);

                    player.Playlist.Add(file);
                  //  player.Banners.Add(banner);

[Eyup]

Hello Markus,

You can add the following logic to the project provided in this post:
http://www.telerik.com/forums/how-do-you-databind-items-in-a-media-player-playlist#mO3jEUvVl0GpsSTwl0SYrA

MediaPlayerBanner banner = new MediaPlayerBanner()
{
    NavigateURL = "http://en.wikipedia.org/wiki/Video" + videoID,
    ImageUrl = string.Format("~/VideoPosters/poster{0}.jpg", videoID),
    StartTime = 2,
    EndTime = 6,
    ShowCloseButton = true,
    ToolTip = "Details for Video " + videoID
};

player.Banners.Add(banner);
player.Playlist.Add(file);

In addition, you can modify the appearance of the Banner using CSS as demonstrated in this article:
http://www.telerik.com/help/aspnet-ajax/mediaplayer-banners.html

That should do the trick. Please give it a try and let me know about the result.

Regards,
Eyup
Telerik

 

 

[Markus]

Dear Eyup

Thank's for the feedback. A banner is added but when the playlist automatically the banner stays the same. So no match between banner and video.

Would this have to be done clientside as well, and if yes how. 

Markus



http://staging.bskd.ch.mserver5.arvixevps.com/

.

<script type="text/javascript">
     //Put your JavaScript code here.
var isResponse = false;
            function playerReady(sender, args) {
                if (!isResponse) {
                    isResponse = true;
                    sender.titlebar.slideUp();
                    sender.toolbar.hide();
                }
                var selectedFile = $(sender.playlist.get_element()).find(".rmpActive");


                var replay = "PlaylistLoop";
                if (replay == "SingleLoop") {
                    sender.loop();
                }
                else {
                    sender.add_ended(function () {
                        var videoElements = sender.playlist._$listItems;
                        var nextIndex = (selectedFile.index() + 1) % videoElements.length;

                        videoElements[nextIndex].click();
                    });
                }

//                if (selectedFile) {
//                    var playerTitleObj = $(sender.titlebar.get_wrapper()).find("h4");
//                    playerTitleObj.text(selectedFile.text());
//                }
            }
        </script>

 

[Eyup]

Hello Markus,

Yes, your assumption is correct. I am sending the modified version of the sample to demonstrate how you can configure the banner settings on client-side. Please run the attached web site and let me know if it helps you.

Regards,
Eyup
Telerik

 

 

[Markus]

Sorry Eyup

Did not get it to work since I need to get the NavigateURL of the corresponding banner in code behind. 

Here is what I tried with .NavigateURL .URL .href

 <script type="text/javascript">
     //Put your JavaScript code here.
var isResponse = false;
            function playerReady(sender, args) {
                if (!isResponse) {
                    isResponse = true;
                    sender.titlebar.slideUp();
                    sender.toolbar.hide();
                }
                var selectedFile = $(sender.playlist.get_element()).find(".rmpActive");
               
                

                var replay = "PlaylistLoop";
                if (replay == "SingleLoop") {
                    sender.loop();
                }
                else {
                    sender.add_ended(function () {
                        var videoElements = sender.playlist._$listItems;
                        var nextIndex = (selectedFile.index() + 1) % videoElements.length;
                        videoElements[nextIndex].click();

                    });
                }

                var videoElements = sender.playlist._$listItems;
                var nextIndex = (selectedFile.index() + 1) % videoElements.length;
                var newLink = sender._banners[nextIndex].NavigateURL;
                alert("new link index: "  + newLink);
                var bannerLink = $(sender.get_element()).find(".rmpBanner").find("a")[0];
                bannerLink.href = newLink;
                alert("new banner link " + bannerLink.href);
               
                

//                if (selectedFile) {
//                    var playerTitleObj = $(sender.titlebar.get_wrapper()).find("h4");
//                    playerTitleObj.text(selectedFile.text());
//                }
            }
        </script>

[Eyup]

Hi Markus,

Please try making the following modification in the provided sample and let me know about the result:

NavigateURL = "http://en.wikipedia.org/wiki/Video" + i,

JavaScript:

sender._banners[0].navigateUrl = sender._banners[selectedFile.index()].navigateUrl;

Looking forward to hearing from you.

Regards,
Eyup
Telerik

 

 

[Markus]

Dear Eyup

Thanks for the help again. The problem is, that I create my banner in code behind with an for each so there is no + i I could add.

See code below. However it somehow works (untill the first video is displayed again then its one off.

Also when you click a video in the playlist the banner does not get updated. Unfortunately I get an Telerik Site update. So no documentation access.


Can you tell me the how to change the banner when a video in the playlist ist clicked?

Markus

<script type="text/javascript">
     //Put your JavaScript code here.
var isResponse = false;
            function playerReady(sender, args) {
                if (!isResponse) {
                    isResponse = true;
                    sender.titlebar.slideUp();
                    sender.toolbar.hide();
                }
                var selectedFile = $(sender.playlist.get_element()).find(".rmpActive");



                var replay = "PlaylistLoop";
                if (replay == "SingleLoop") {
                    sender.loop();
                }
                else {
                    sender.add_ended(function () {
                        var videoElements = sender.playlist._$listItems;
                        var nextIndex = (selectedFile.index() + 1) % videoElements.length;
                        videoElements[nextIndex].click();

                    });
                }


                sender._banners[0].navigateUrl = sender._banners[selectedFile.index()].navigateUrl;
                sender._banners[0].toolTip = sender._banners[selectedFile.index()].toolTip;
               //alert(sender._banners[0].toolTip);


//                if (selectedFile) {
//                    var playerTitleObj = $(sender.titlebar.get_wrapper()).find("h4");
//                    playerTitleObj.text(selectedFile.text());
//                }
            }
        </script>

private void BuildPlayer()
       {
          //  Literal1.Text += "We ar at build player.<br />";
           player = new RadMediaPlayer()
           {
               ID = "RadMediaPlayer1",
               EnableViewState = false,
               Height = Unit.Pixel(353),
               Width = Unit.Pixel(790),
               OnClientReady = "playerReady",
               AutoPlay = true,
               FullScreen = false

           };


           // Fetch a collection of "live" and "visible" video items.
           var myCollection = GetDataItems();
           var orderedCollection = myCollection.AsEnumerable().OrderBy(x => Guid.NewGuid());
           MediaPlayerVideoFile file;
           MediaPlayerBanner banner;
           MediaPlayerSource SourceMP4;
           MediaPlayerSource SourceWEBM;
           MediaPlayerSource SourceOGV;

           foreach (Telerik.Sitefinity.DynamicModules.Model.DynamicContent videoType in orderedCollection)
           {

              //  Literal1.Text += " We are at for each in collection.<br />";
               ////MP4 is a Related Media Field Type Video -> need to get the ULR of that video to build my HTML5 video player videoType.GetRelatedItems<MediaContent>("MP4").First().MediaUrl
               string MP4 = "some.mp4";
               string WEBM = "some.webm";
               string OGV = "some.ogv";
               string PosterMP4 ="some.gif";
                string PosterWEBM ="some.gif";
                string PosterOGV ="some.gif";
                string theURL = "";

                var theLink = videoType.GetRelatedItems<PageNode>("Link").FirstOrDefault();
                if (theLink != null)
                {
                    theURL = theLink.GetDefaultUrl().ToString() ;
                }

               var VideoMP4 = videoType.GetRelatedItems<MediaContent>("MP4").FirstOrDefault();
               if (VideoMP4 != null)
               {
                   MP4 = VideoMP4.MediaUrl.ToString();
                   PosterMP4 = VideoMP4.ThumbnailUrl.ToString();
               }
               var VideoWEBM = videoType.GetRelatedItems<MediaContent>("WebM").FirstOrDefault();
               if (VideoWEBM != null)
               {
                   WEBM = VideoWEBM.MediaUrl.ToString();
                   PosterWEBM = VideoWEBM.ThumbnailUrl.ToString();
               }
               var VideoOGV = videoType.GetRelatedItems<MediaContent>("OGV").FirstOrDefault();
               if (VideoOGV != null)
               {
                   OGV = VideoOGV.MediaUrl.ToString();
                  PosterOGV = VideoOGV.ThumbnailUrl.ToString();
               }


              //  Literal1.Text +=  " <br /> MP4: " + MP4 + " <br /> WEBM: " + WEBM + " <br /> OGV: " + OGV + "<br /><br />";



                   file = new MediaPlayerVideoFile()
                   {
                       Poster = string.Format(PosterMP4),
                       //Path = string.Format(MP4),
                       AutoPlay = true,

                   };
                   SourceMP4 = new MediaPlayerSource()
                   {
                       Path = MP4,
                   };
                   SourceWEBM = new MediaPlayerSource()
                   {
                       Path = WEBM,
                   };
                   SourceOGV = new MediaPlayerSource()
                   {
                       Path = OGV,
                   };

                   file.Sources.Add(SourceOGV);
                   file.Sources.Add(SourceWEBM);
                   file.Sources.Add(SourceMP4);

                   MediaPlayerBanner theBanner = new MediaPlayerBanner()
                   {
                       NavigateURL = theURL,
                       ImageUrl = "~/images/default-source/designelemente/video-banner.gif",
                       StartTime = 0,
                       EndTime = 10,
                       ShowCloseButton = false,
                       ToolTip = videoType.GetValue("VideoTitel").ToString()
                   };

               player.Playlist.Add(file);
               player.Banners.Add(theBanner);



           }

            //Literal1.Text += player.Banners.Count.ToString();

           player.Load += (s, a) =>
           {
               player.TitleBar.ShareButton.Visible = false;
               player.ToolBar.HDButton.Visible = false;
               player.ToolBar.Visible = true;
               player.TitleBar.Visible = true;
               player.PlaylistSettings.Mode = MediaPlayerPlaylistMode.Buttons;
               player.PlaylistSettings.Position = MediaPlayerPlaylistPosition.Vertical ;

            };



           PlaceHolder1.Controls.Add(player);
       }

[Markus]

Sorry it seems to kind of update. I only have the problem about an index.

This is what happens when the files play

Video 1 -> Banner 1
Video 2 -> Banner 2
Video 3 -> Banner 3

Start looping

Video 1 -> Banner 3
Video 2 -> Banenr 2
Video 3 -> Banner 3

Video 1 -> Banner 3
Video 2 -> Banenr 2
Video 3 -> Banner 3

So somehow when looping and also when clicking on the first video in the playlist it gets the Banner of the last Banner.

Strange.

Markus

[Markus]

Added this code to see what is happening.

You can check this out here: http://staging.bskd.ch.mserver5.arvixevps.com

Somehow it seems that when the selectedFile.Index is 0 the banner added is the last shown in the play list.

I don't know if that makes sense.

if (selectedFile.index() == 0) {
           sender._banners[0].navigateUrl = sender._banners[0].navigateUrl;
           sender._banners[0].toolTip = sender._banners[0].toolTip;
           alert("if");
       }
       else {
           sender._banners[0].navigateUrl = sender._banners[selectedFile.index()].navigateUrl;
           sender._banners[0].toolTip = sender._banners[selectedFile.index()].toolTip;
          alert("else");
       }
       alert("Selected File index: " + selectedFile.index().toString());
       alert("Banner in: " + sender._banners[0].toolTip);

Markus

[Eyup]

Hello Markus,

I would suggest that you open a formal support ticket and send us the modified version of RadMediaPlayerProgrammaticCreationBanners.zip sample to demonstrate the exact problematic behavior. Thus, we will be able to further debug and analyze the project locally and provide an accurate and more-to-point solution.

Regards,
Eyup
Telerik