Einbinden in eine Webseite
Nachstehend finden Sie eine minimale Version, wie der edML-Player und die edML-Datei auf einer HTML-Webseite einzubinden sind.
Laden Sie zunächst den edML-Player als zip-Datei herunter und entpacken Sie diese Datei. Kopieren Sie alle Dateien an einen passenden Ort auf Ihrem Webserver. Legen Sie auch die edML-Datei, ihre Kursdatei, sowie alle dazu benötigten (Medien-)Dateien an einem passenden Ort auf Ihrem Webserver ab. Achten Sie darauf, dass die Pfadangaben, wie sie in der edML-Datei angegeben sind, auch auf dem Webserver korrekt bleiben. Im einfachsten Fall verwenden Sie eine zip-Datei, in der sich die (Medien-)Dateien und die edML-Datei befindet. Diese sollte auch in der Online-Version des Players abspielbar sein.
In den Header der HTML-Webseite binden Sie die Datei edmlplayer.compressed.js und edmlplayer.compressed.css mit der entsprechenden Pfadangabe bezogen auf den Ablageort auf Ihren Webserver ein.
<link rel="stylesheet" href="Pfad zu edmlplayer.compress.css"/>
<script src="Pfad zu edmlplayer.compress.js"></script>
Am Ende der HTML-Webseite ergänzen Sie noch den Aufruf des edML-Players. Dies geschieht in Form eines Javascript-Skripts:
<script>
var edmlplayer = new edML_Player("Pfad zur edML-Datei oder zip-Datei");
edmlplayer.play();
</script>
Ein etwas schöneres Aussehen erhält man, wenn man in den HTML-Body ein div-Element mit der id "edml" ergänzt und dieses mit CSS formatiert. Eine einfache Webseite, in der die Player-Dateien und die edML-Datei sich am gleichen Speicherort wie die HTML-Datei befinden, könnte wie folgt aussehen:
<!DOCTYPE html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="edmlplayer.compress.css"/>
<script src="edmlplayer.compress.js"></script>
</head>
<body>
<div id="edml"></div>
</body>
<style>
body,html{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#edml{
height: 100%;
max-height: 100%;
}
</style>
<script>
var edmlplayer = new edML_Player("edmlfile.edml");
edmlplayer.play();
</script>