-1

I am making a web with google maps, where I want to embed flowplayer rtmp stream video to infowindow, but i dont know ho to do it. I am reading attributes like links from database and then creating infowindow. Here is code of creating map and infowindow :

function initialize() {

//here were map properties and custom icons, unnecesary for problem 

var infoWindow = new google.maps.InfoWindow;
downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var id = markers[i].getAttribute("id");
      var name = markers[i].getAttribute("name");
      var type = markers[i].getAttribute("type");
      var link = markers[i].getAttribute("link");
      var html = '    !!! PLAYER HERE !!!'

      // youtube video works
      // var html = '<iframe width="560" height="315" src="'+link+'" frameborder="0" allowfullscreen></iframe>'


      var point = new google.maps.LatLng(
          markers[i].getAttribute("lang"),
        markers[i].getAttribute("lati"));
     var icon = customIcons[type] || {};

      var marker = new google.maps.Marker({
        map:map,
        position: point,
        title: name,
        icon: icon.icon,
      });

     bindInfoWindow(marker, map, infoWindow, html);

    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}



function downloadUrl(url, callback) {

  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

 function doNothing() {}

 google.maps.event.addDomListener(window, 'load', initialize);

And here is example code from flowplayer.

<head>

 <!-- flowplayer javascript component -->
 <script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js">  </script>

</head>
 <body>
 </div>
 <!-- widescreen container, 560x240 (clip dimensions) * 1.15, center splash -->
 <div id="wowza" style="width:644px;height:276px;margin:0 auto;text-       align:center">
 <img src="/media/img/player/splash_black.jpg" height="276" width="548" />
 </div>

<script>
 $f("wowza", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {

 clip: {
    url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4',
    scaling: 'fit',
    // configure clip to use hddn as our provider, referring to our rtmp plugin
    provider: 'hddn'
},

// streaming plugins are configured under the plugins node
plugins: {

    // here is our rtmp plugin configuration
    hddn: {
        url: "flowplayer.rtmp-3.2.13.swf",

        // netConnectionUrl defines where the streams are found
        netConnectionUrl: 'rtmp://r.demo.flowplayer.netdna-cdn.com/play'
    }
},
canvas: {
    backgroundGradient: 'none'
}
});
</script> 
</body>

So how do I implement player into infowindow? Thanks in advance!

johnybiglajs
  • 3
  • 3

1 Answers1

0

So I managed to get it working - look at html variable, flowplayerrr() function and bindInfoWindow(). After click on certain marker a infowindows pops up with splash image, after you click on splash, video loads.

downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var id = markers[i].getAttribute("id");
      var name = markers[i].getAttribute("name");
      var type = markers[i].getAttribute("type");
      var link = markers[i].getAttribute("link");
      var html = 
      '<head>'+
        '<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>'+
       '</head>'+ 
       '<body>'+ 
       '<div id="container" style="width:300px;height:300px;margin:0 auto;text-align:center">'+
       '<div id="wowza" style="width:280px;height:280px;margin:0 auto;text-align:center">'+
      '<img src="/images/splash/'+type+'.png" height="280" width="280" style="cursor:pointer" />'+
      '</div>'+
      '</div>'+
      '</body>';

     bindInfoWindow(marker, map, infoWindow, html);

    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
    flowplayerrr();
    map.setCenter(marker.getPosition());
  });
}


function flowplayerrr() {
$.getScript("http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js", function(){

 $f("wowza", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {

clip: {
    url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4',
    scaling: 'scale',
    // configure clip to use hddn as our provider, referring to our rtmp plugin
    provider: 'hddn'
},

// streaming plugins are configured under the plugins node
plugins: {


    // here is our rtmp plugin configuration
    hddn: {
        url: "flowplayer.rtmp-3.2.13.swf",

        // netConnectionUrl defines where the streams are found
        netConnectionUrl: 'rtmp://r.demo.flowplayer.netdna-cdn.com/play'
    }

},
canvas: {
    backgroundGradient: 'none'
}
});

});

}
johnybiglajs
  • 3
  • 3