將FlowPlayer嵌入到Google地圖中InfoWindow

-1

我正在製作一個帶Google地圖的網絡，我想在其中嵌入流式播放器rtmp流視頻到infowindow，但我不知道該怎麼做。我正在讀取數據庫鏈接等屬性，然後創建infowindow。這裏是創建地圖和infowindow的代碼：將FlowPlayer嵌入到Google地圖中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);

這裏是來自流式播放器的示例代碼。

<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？提前致謝！

來源

2015-04-04 johnybiglajs

所以我設法讓它工作 - 看看html變量，flowplayerrr（）函數和bindInfoWindow（）。在點擊某個標記後，一個infowindows會彈出一個閃屏圖像，點擊splash後會加載視頻。

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

}); 

}

來源

2015-04-10 16:28:07 johnybiglajs

將FlowPlayer嵌入到Google地圖中InfoWindow

回答

相關問題