Skip to content

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>
In dieser einfachen Version erzeugt der edML-Player ein div-Element im HTML-Body, welches die gesamte Bildschirmhöhe und -breite einnimmt.

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>