Vous pouvez utiliser des applications playground pour intégrer des URL externes dans votre lecteur. Ces URL peuvent être des URL hébergées sur le Web ou des URL d'intranet local. Tant que votre lecteur a accès à l'URL via son réseau connecté, vous êtes en sécurité. Ce que vous devez faire est de créer une simple page HTML avec un iFrame dedans. L'iFrame sera en plein écran et pointera en interne vers l'adresse dont vous avez besoin.
Exemple 1 : Intégration de Google Maps avec iFrame
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="https://www.google.com/maps" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%">
</iframe>
</body>
</html>
Dans l'exemple ci-dessus, vous pouvez voir une application intégrant Google Maps. Une fois que vous chargez cette application dans votre lecteur, vous verrez une expérience Google Maps en plein écran.
Exemple 2 : Implémentation native avec données de trafic en direct
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
<title>Live Google Traffic Data</title>
<style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<div id="map"> </div>
<script>
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: {lat: 34.04924594193164, lng: -118.24104309082031} }); var trafficLayer = new google.maps.TrafficLayer(); trafficLayer.setMap(map); }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Ci-dessus se trouve un autre exemple où vous pouvez superposer des données de trafic en direct sur une carte sur votre lecteur. Dans ce cas, une implémentation native est utilisée au lieu d'un iFrame. Les applications Playground peuvent héberger leurs fonctionnalités. Idéalement, l'application devrait récupérer uniquement les données nécessaires à partir de sources externes, mettre en cache localement pour des raisons de résilience de connexion. Héberger l'interface Web complète dans un emplacement distant et la présenter via un iFrame devrait être considéré comme un dernier recours. Voir ici pour plus de détails sur la documentation de Google Traffic Layer.