将FlowPlayer嵌入谷歌地图信息窗口

embed FlowPlayer into Google Maps InfoWindow

本文关键字：信息 信息窗 窗口 谷歌地图 FlowPlayer      更新时间：2023-09-26

我正在用谷歌地图制作一个网站，我想把流播放器rtmp流视频嵌入到信息窗口中，但我不知道该怎么做。我正在从数据库中读取链接等属性，然后创建信息窗口。以下是创建地图和信息窗口的代码：

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>

那么我该如何在信息窗口中实现播放器呢？提前感谢！

所以我设法让它工作起来——看看html变量、flowplayerrr（）函数和bindInfoWindow（）。点击某个标记后，会弹出一个带有飞溅图像的信息窗口，点击飞溅后，会加载视频。

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'
}
});
});
}
相关文章：