Add banner to video on playlist in code behind

10 posts, 0 answers
  1. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 09 May 2014 Link to this post

    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);
  2. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 14 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 14 May 2014 in reply to Eyup Link to this post

    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>
     
  5. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 19 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 19 May 2014 in reply to Eyup Link to this post

    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>
  7. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 22 May 2014 Link to this post

    Hi Markus,

    Please try making the following modification in the provided sample and let me know about the result:
    JavaScript:
    sender._banners[0].navigateUrl = sender._banners[selectedFile.index()].navigateUrl;

    Looking forward to hearing from you.

    Regards,
    Eyup
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 23 May 2014 in reply to Eyup Link to this post

    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);
           }

  9. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 23 May 2014 in reply to Markus Link to this post

    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
  10. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 23 May 2014 in reply to Markus Link to this post

    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
  11. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 26 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017