Question

我正在制作一个带谷歌地图的网站，我想将流媒体rtmp流视频嵌入到infowindow，但我不知道怎么做。我正在读取数据库中的链接等属性，然后创建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);

这是来自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>

那么如何将玩家实施到infowindow？提前谢谢！

Answer 1

所以我设法让它工作 - 看看html变量，flowplayerrr（）函数和bindInfoWindow（）。单击某个标记后，infowindows会弹出启动图像，点击启动后，视频会加载。

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

});

}

将FlowPlayer嵌入到Google Maps InfoWindow中

1 个答案: