Blog > Wie integriere ich den 3Q...

07.09.2018
Holm Krämer



Wie integriere ich den 3Q Player in den Quellcode meiner Webseite?

Zur Einbettung unseres HTML5 Video Players in den HTML Code Ihrer Webseite stellen wir Ihnen jeweils ein JavaScript-Snippet oder iframe Code zur Verfügung. Diese erhalten Sie in Ihrem Live- oder OnDemand Projekt unter dem Menüpunkt „Embed-Code“.

Wir bieten beide Embed-Code Varianten an, empfehlen aber die Verwendung des Javascripts. Das Integrationsbeispiel für „Video als Webseiten-Hintergrund“ soll die Lust auf den kreativen Umgang mit unsere leistungsfähigen Playerlösung wecken.

Für Profis stellen wir einen JavaScript-Constructor (3q.js) zur Einbettung und Steuerung des Players bereit. Die entsprechende Dokumentation finden Sie auf Github (https://github.com/3QSDN/3q.js).

Ich zeige im Folgenden die grundlegenden Möglichkeiten der Integration und verwende dazu den Beispiel-Code als Basistemplate für eine HTML-Seite:


<!DOCTYPE html>
<html lang=“de“>
<head>
    <meta charset="utf-8" />
    <title>3q Player- Integration</title>
    <style></style>
</head>
<body>
<p>
	Lorem ipsum dolor sit amet, bene facitis. Mauris ante neque, vehicula quis, 
	convallis sit amet, vestibulum Donec at lorem et elit congue dictum. Cras sapien
	ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est.
<p>
</body>
</html>


Player-Code aus dem Interface kopieren


3Q Interface Embed-Code JavaScript

Die einfachste Variante, unseren Player auf eine Website einzubetten, ist, den Code (siehe Abbildung) aus unserem Interface per "copy-and-paste" in den HTML Code zu kopieren:


<!DOCTYPE html>
<html lang=“de“>
<head>
    <meta charset="utf-8" />
    <title>3q Player- Integration</title>
    <style></style>
</head>
<body>
<h1>Mein Video<h1>

<div id="sdnPlayer_KdtCjwhVDNXPbrY" style="width:100%;height:360px;"></div>
<script type="text/javascript" src="https://playout.3qsdn.com/player/js/sdnplayer.js">
</script><script type="text/javascript" src="https://playout.3qsdn.com/621ee03d-a468-11e8-ae4b-0cc47a188158?js=true&container=sdnPlayer_KdtCjwhVDNXPbrY&width=100%25&height=100%25&layout=responsive"></script>
<p>
	Lorem ipsum dolor sit amet, bene facitis. Mauris ante neque, vehicula quis, 
	convallis sit amet, vestibulum Donec at lorem et elit congue dictum. Cras sapien
	ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est.
<p>
</body>
</html>

3q.js Constructor verwenden

Fortgeschrittenen Anwendern empfehlen wir unseren die Verwendung unseres JavaScript-Constructors 3q.js. Zunächst betten Sie die JavaScript Bibliothek vor dem letzten <body> Tag ein und platzieren ein <div> Tag an die gewünschte Stelle wo der Player erscheinen soll.


<!DOCTYPE html>
<html lang=“de“>
<head>
    <meta charset="utf-8" />
    <title>3q Player- Integration</title>
    <style></style>
</head>
<body>
<h1>Mein Video<h1>
<div id="video1"></div> 
<p>
	Lorem ipsum dolor sit amet, bene facitis. Mauris ante neque, vehicula quis, 
	convallis sit amet, vestibulum Donec at lorem et elit congue dictum. Cras sapien
	ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est.
<p>
<script type="text/javascript" async src="https://playout.3qsdn.com/player/js/sdnplayer.js"></script>
</body>
</html>

Anschließend platzieren Sie in einer JavaScript Datei oder inline im HTML-Code folgendes Snippet zur Initialisierung des Players:


var js3qVideoPlayer;
    (function () {
        var _js3qi = setInterval(function () {
            if (typeof js3q != 'undefined') {
                clearInterval(_js3qi);
                js3qVideoPlayer = new js3q({
                    'data-id': '5c3b0910-8850-11e7-9273-002590c750be',
                    'container': 'video1'
                });
                js3qVideoPlayer.init();
            }
        }, 10);
    })();

Wichtig bei der Initialisierung des Players sind die Parameter "container" und "data-id". Der Parameter container definiert, in welches <div> der Player platziert werden soll. "data-id" definiert welches Video oder Livestream auf der Seite angezeigt werden soll. In unserer Dokumentation finden Sie weitere Konfigurationsparameter, die Sie verwenden können.

So ist es z.B. möglich unseren Player mit Hilfe des 3q.js Constructors dynamisch zu gestalten oder um wichtige Sicherheitsfunktionen zu ergänzen. Gute Beispiele sind die Verwendung von Videos als Hintergrund oder wenn Sie unseren Player ohne Interface (Chromeless) ausliefern möchten.


Player steuern und Daten abrufen

Im vorherigen Beispiel ist zu sehen, wie der Player unter der Variable "js3qVideoPlayer" initialisiert wird. Mit dieser Variable können Sie direkt auf den Player zugreifen und steuern.


js3qVideoPlayer.pause(); 
// Player pausieren

var _currentTime = js3qVideoPlayer.getCurrentTime(); 
// Aktuelle Abspielposition abfragen

Alle Methoden des Players finden Sie hier. Zusätzlich zu direkt Methoden des Players, können Sie sich eine auch eine Funktion erstellen, welche alle Events empfängt, siehe Events.

Mit Nutzung unserer Angebots, stimmen Sie unseren Datenschutzbestimmungen zu.