2 Replies Latest reply on Sep 26, 2014 12:31 AM by wertyuifg

    Loading videos dynamically - how to integrate data from json file into video placeholder at Stage

    wertyuifg

      Hi!


      Working on a website where I want to display a larger selection of videos. Found a tutorial wtih a great script for loading content dynamically from a json file;

       

      $.getJSON("data/press.json", function(data)

               {

                 for(var i=0; i<data.length; i++)

                   {

                            var s = sym.createChildSymbol("slide", "Stage");

                            s.$("photo").css({"background-image":"url('"+data[i].image+"')"});

                            s.$("title").html(data[i].title);

                            s.$("headtext").html(data[i].headtext);

                            s.getSymbolElement().css({"position":"absolute",

                            "left" : "50px",

                            "top" : i*200+50+"px"});

                 }

       
      The content in json file looks like this,


      [

      {

        "image" : "images/poster_.jpg",

        "title" : "my test",

         "date" : "my date",

        "headtext" : "my main text",

        "video" : "http://www....."

      },

      ]

       


      Unfortunately there is nothing about video in the script above.

       

      Does anyone know how I can,


      1/ pick the data from my variable "video" in my json file (guess the script needs a line like:    s.$("video").html(data[i].video);     or something)

       

      2/ dynamically put into my video placeholder where my show video script is,

      -----

      var youtube = $("<iFrame/>");

      var url = "https://www.youtube.com.....;"


      sym.$("video").append(youtube);

      youtube.attr('type','text/html');

      youtube.attr('width','640');

      youtube.attr('height','360');

      youtube.attr('src',url);

      -------

       

      Most greatful for all kind of advice

       

      Best regards

      Bengt, informel.se

        • 1. Re: Loading videos dynamically - how to integrate data from json file into video placeholder at Stage
          dharmk Adobe Employee

          Looking at the code of your JSON's success handler, it seems you want to create a list of such items on stage, with multiple video elements too. You can create the required iframes in the JSON's success handler and set the src attribute as per the incoming JSON data's video attribute. One way of doing it could be as follows:

           

          $.getJSON("data/press.json", function(data)

                   {

                     for(var i=0; i<data.length; i++)

                       {

                                var s = sym.createChildSymbol("slide", "Stage");

                                s.$("photo").css({"background-image":"url('"+data[i].image+"')"});

                                s.$("title").html(data[i].title);

                                s.$("headtext").html(data[i].headtext);

                                s.getSymbolElement().css({"position":"absolute",

                                "left" : "50px",

                                "top" : i*200+50+"px"});

           

                              //Assuming you have a placeholder called video in the symbol slide

                              var youtube = $("<iframe/>").attr('width','640').attr('height','360');

                              youtube.attr('src',data[i].video);

                              s.$("video").html(youtube);

                     }

          }

          • 2. Re: Loading videos dynamically - how to integrate data from json file into video placeholder at Stage
            wertyuifg Level 1

            Hi dharmk!

            Like a firework my webpage exploded in a cascade of videos loaded from data in my json file.

             

            Thank you so much for these few lines of code that turned failure to success.

             

            Best regards

             

            /Bengt