label: string

Default value: "Upload with Clipchamp!"

Der Text auf dem Clipchamp-Button. Dieser Text wird auf dem Button angezeigt, der innerhalb des gegebenen HTML-Elements eingebettet wird.

size: string

Default value: "medium"
Allowed values:
tiny small medium large

Die Größe des eingebetteten Clipchamp-Buttons. Wähle aus vier Größen aus.

title: string

Default value: "Ye' olde video-upload shoppe"

Der Titel der Benutzeroberfläche, die erscheint, nachdem der Benutzer auf den eingebetteten Button klickt. Der Titel wird im oberen Bereich des Popups iframe angezeigt.

logo: string

Default value: "https://api.clipchamp.com/static/button/images/logo.svg"

Die URL des Logo-Bilds für die Benutzeroberfläche. Das Bild wird in der oberen linken Ecke des iframe angezeigt.

color: string

Default value: "#303030"

Bestimmt die Farbe des Clipchamp-Buttons, den Hintergrund der Titelleiste und andere grafische Elemente. Mögliche Werte sind der Name einer Farbe (z.B. blue), ein Hexadezimal kodierter RGB-Farbwert (z.B. #3300cc) oder ein RGB-Farbwert (z.B. rgba(78,24,212,0.5)).

style: object

Default value: undefined

Gestattet die detaillierte Individualisierung der Clipchamp-Benutzeroberfläche mittels CSS. Ein individuelles CSS-Stylesheet kann entweder als URL (style.url-Attribut) oder als String der CSS-Deklarationen enthält (style.text) angegeben werden. In beiden Fällen überlagert diese CSS-Deklaration die Standardeinstellungen aber sie ersetzt diese nicht, auf Bootstrap 3 basierend. Dies bedeutet, dass dein eigenes CSS Styling eine Ebene über dem bestehenden CSS Styling ist und dieses manipulieren kann, so dass bestehende Klassen genutzt, modifiziert und ersetzt werden können. Enterprise Plan.

inline: object

Default value: undefined

Gestattet die flexible Platzierung der Clipchamp API Benutzeroberfläche innerhalb der Webseite, d.h. der <iframe>, der die Clipchamp-Benutzeroberfläche enthält wird innerhalb eines nominierten HTML-Elements auf der Webseite angezeigt (Enterprise plan).

inputs: Array<string>

Default value: ["file", "camera"]
Allowed values:
file camera direct

Quellen, von denen der Benutzer ein Eingabevideo beziehen kann: camera für die Webcam (oder Kamera des Smartphones) und file für das Dateisystem des Computers. Die direct-Option sorgt dafür, dass das Clipchamp API die Eingabevideo-Datei(en) ohne Interaktion des Endbenutzers vom direct.files-Parameter bezieht. Dementsprechend sollte die direct-Option nicht in Kombination mit einer der anderen beiden Optionen (file, camera) verwendet werden. Falls sowohl die direct-Option als auch die file– oder camera-Option im inputs-Array angegeben werden, werden die file und camera-Optionen ignoriert und dem direct.files-Parameter muss ein Array einer (oder mehrerer) Blob-Instanz(en) übergeben werden, die das Eingabevideo (die Eingabevideos) repräsentiert.

output: string

Default value: "dummy"
Allowed values:
dummy blob azure s3 youtube gdrive dropbox

Das Ziel, zu dem wir das Ausgabevideo hochladen. Falls „blob“ angegeben wird, stellen wir das Ausgabevideo Client-seitig als eine Blob-Instanz bereit. Wenn du „youtube“, „dropbox“, „azure“ oder „s3“ angibst, musst du die passenden Zugangsdaten in deinen Clipchamp API-Einstellungen konfigurieren. Die „dummy“-Option generiert kein Ausgabevideo, sondern simuliert das Hochladen des Ausgabevideos und sollte nur zum Testen verwendet werden.

upload: object

Default value: undefined

Einstellungen, die den Prozess des Hochladens eines Ausgabevideos im Detail konfigurieren.

direct: object

Default value: undefined

Extra Parameter, die sich auf die direct-Option bzgl. des input-Parameters beziehen.

enable: Array<string>

Default value: []
Allowed values:
batch fixup-webcam-webm mobile-webcam-format-fallback no-branding no-error-bypass no-hidden-run no-popout no-probe-reject no-thank-you no-user-retry

Schaltet Sonderverhalten des API ein oder aus:

  • batch – erlaubt die Verarbeitung von mehr als einem Eingabevideo, ohne dass nach jedem Eingabevideo weitere Nutzerinteraktionen erforderlich werden.
  • fixup-webcam-webm – „repariert“ WebM-basierte Webcam-Aufnahmen, die ansonsten feherhafte oder fehlende Metadaten bzgl. der zeitlichen Länge (Dauer der Aufnahme) aufweisen. Wenn diese Option gesetzt ist, wird sichergestellt, dass mögliche nachfolgende Verarbeitungsschritte außerhalb des Clipchamp APIs eine standardkonforme WebM-Datei erhalten, bei der die eingebetteten Metadaten korrekt und vollständig sind. Diese Option ist derzeit auf Mobilgeräten ohne Wirkung (d.h., Android-basierte Smartphones, wo die mobile-webcam-format-fallback Option gesetzt ist – siehe da). BETA
  • mobile-webcam-format-fallback – ermöglicht die Kompression von Webcam-Aufnahmen auf Mobilgeräten, sofern das ausgewählte Videoformat nicht unterstützt wird. Diese Option ist derzeit auf Chrome auf Android beschränkt, wo das Clipchamp API WebM-Ausgabevideos erzeugt, die den VP8 oder VP9 Video Codec verwenden.
  • no-branding – Entfernt die Clipchamp Markenbotschaft weitgehend aus der Benutzeroberfläche (abhängig vom Plan deines Clipchamp API Abonnements). Betrifft nicht den eingebetteten Clipchamp-Button – wir empfehlen die Verwendung des individuellen Button APIs (Professional Plan und höher).
  • no-error-bypass – Falls die Konvertierung/Kompression des Eingabevideos aus unterschiedlichen Gründen fehlschlägt, versucht das Clipchamp API unter normalen Umständen dennoch, das Eingabevideo unverändert hochzuladen. Mit dieser Option lässt sich dieses Verhalten abschalten. Der häufigste Grund für fehlgeschlagene Videokonvertierung sind nicht unterstützte Videoformate und -Codecs.
  • no-hidden-run – Option, die dafür sorgt, dass der Upload-Prozess abgebrochen wird, wenn der Benutzer nach Anklicken des „Submit“-Buttons die Clipchamp-Benutzeroberfläche schließt. Das standardmäßige Verhalten ist es, das Ausgabevideo im Hintergrund dennoch hochzuladen.
  • no-popout – Einige Browser blockieren unter bestimmten Umständen die Verwendung bestimmter Browser-Funktionen für eingebetteten Code Dritter (hier: das Clipchamp API). Das Clipchamp API versucht diese Umstände zu erkennen und öffnet die Clipchamp-Benutzeroberfläche in diesen Fällen in einem eigenen Popup-Browserfenster, was diese Probleme vermeidet. Mit gesetzter no-popout-Option wird erzwungen, dass das Clipchamp API immer innerhalb des Browserfensters der Webseite angezeigt wird. Das kann zu funktionalen Einschränkungen, schlechterer Performance, gesteigertem Speicherbedarf und anderen Problemen führen und wird daher nicht empfohlen.
  • no-probe-reject – Wenn das Clipchamp API ein Eingabevideo nicht als Videodatei identifizieren kann, wird die entsprechende Datei normalerweise abgewiesen. Sofern diese Option gesetzt ist, werden auch solche Dateien akzeptiert und direkt dem Upload-Vorgang übergeben.
  • no-thank-you – Entfernt den abschließenden „Dankeschön“-Schritt aus der Clipchamp-Benutzeroberfläche und schließt diese nach Beendigung des Uploads unmittelbar. Sofern beim Upload Fehler auftraten, werden diese weiterhin angezeigt.
  • no-user-retry – Entfernt die Möglichkeit für Endbenutzer, die Auswahl des Eingabe-Videos oder eine Webcam-Aufnahme vor der nachfolgenden Verarbeitung/dem Upload zu wiederholen. Wird diese Option aktiviert, started der Upload unmittelbar nachdem die Webcam-Aufnahme beendet ist, d.h., Benutzer erhalten keine Gelegenheit ihre Aufnahme zu überprüfen und ggf. zu wiederholen.

experimental: Array<string>

Default value: []
Allowed values:
force-popout overlong-recording h264-hardware-acceleration

Schaltet diverses experimentelles Verhalten des Clipchamp APIs an

  • force-popout – Startet die Clipchamp-Benutzeroberfläche immer in einem separaten Popout-Browserfenster. Dies geschieht auch dann, wenn es technisch möglich wäre, die Clipchamp-Benutzeroberfläche ohne funktionale Verluste innerhalb eines iframes auf der einbettenden Webseite anzuzeigen. Darf nicht in Kombination mit der no-popout Option verwendet werden (siehe enable-Parameter).
  • overlong-recording – Erlaubt Webcam-Aufnahmen (oder Aufnahmen mit der Kamera eines Smartphones) ohne zeitliche Beschränkung der Aufnahmedauer (wie sie ansonsten durch das Clipchamp API erzwungen wird). Die Aufnahmedauer kann weiterhin mittels des camera.limit-Parameters beschränkt werden. Webseiten-Betreiber müssen sicherstellen, dass die overlong-recording-Option nur in Browsern gesetzt wird, die lange Aufnahmen problemlos unterstützen (etwa: Chrome, Opera und Firefox).
  • h264-hardware-acceleration – Ermöglicht Hardware-beschleunigte H.264 Videokompression auf einigen Plattformen (derzeit: ChromeOS Computer und Chromebooks mit x86 CPU). Diese Option ist nur in Bezug auf die web Vorlage (Standardeinstellung der preset Option) und das mp4 Format (Standardeinstellung der format-Option) wirksam. Abhängig von der Hardware eines Client-Computers kann so eine mehrfache Beschleunigung der Verarbeitungszeit erzielt werden. Aufgrund des abweichenden Kompressionsverfahrens sind Ausgabevideos nicht identisch und können unterschiedliche Dateigrößen und Qualitätsmerkmale aufweisen. Wir empfehlen daher ggf. die Anpassung des compression-Parameters bis ein akzeptabler Kompromiss aus Dateigröße und Qualität erreicht wird.

dropbox: object

Default value: undefined

Konfigurationseinstellungen für die Verwendung von Dropbox als Upload-Ziel.

youtube: object

Default value: undefined

Konfigurationseinstellungen für die Verwendung von YouTube als Upload-Ziel.

onWebcamStatusChange(status): function

Diese Callback-Funktion wird für eine Reihe von Ereignissen gerufen, die während einer Webcam-Aufnahme auftreten können, wobei status ein String ist, der den neuen Status der Webcam oder der Aufnahme wiederspiegelt:

  • capture_started – Die Webcam oder Kamera des Smartphones wurde erfolgreich angeschaltet und das Videobild wird angezeigt (aber noch nicht aufgenommen)
  • capture_ended – Die Webcam oder Kamera des Smartphones wurde ausgeschaltet und das Videobild wird nicht mehr angezeigt
  • capture_failed – Der Zugriff auf die Webcam oder Kamera des Smartphones ist fehlgeschlagen
  • recording_running – Die Webcam-Aufnahme wurde gestartet oder nach einer vorherigen Pause wieder aufgenommen
  • recording_paused – Die Webcam-Aufnahme wurde unterbrochen und kann entweder wieder aufgenommen oder beendet werden
  • recording_finished – Die Webcam-Aufnahme wurde beendet, wird aber unter Umständen derzeit noch bearbeitet, bevor sie hochgeladen oder als Blob-Instanz deronVideoCreated Callback-Funktion übergeben werden kann
  • recording_cancelled – Die Webcam-Aufnahme wurde durch den Benutzer abgebrochen

Die Überwachung des Status der Webcam oder Kamera des Smartphones wird in Desktop-Browsern unterstützt (und in Chrome auf Android, sofern die mobile-webcam-format-fallback Option im enable Parameter-Array gesetzt ist).

onMetadataAvailable(metadata): function

Diese Callback-Funktion wird für jede Webcam-Aufnahme und jede Eingabevideodatei gerufen, nachdem das Video erfolgreich analysiert wurde. Der metadata-Parameter ist ein JavaScript-Objekt mit den folgenden Attributen:

  • raw – die unverarbeiteten Metadaten, die aus dem Video extrahiert wurden. JavaScript-Objekt mit den folgenden Attributen:
    • format – Informationen über das Videoformat
    • streams – Array von Video-, Audio-, Untertitel-, Datenströmen usw., die im Video vorhanden sind

Bitte beachte, dass die onMetadataAvailable-Funktion mehrfach gerufen wird, wenn der Benutzer eine Webcam-Aufnahme wiederholt. onMetadataAvailable wird ggf. ebenfalls mehrfach aufgerufen, wenn die batch-Option verwendet wird, wo der Benutzer mehr als ein Eingabevideo auswählen kann.

onPreviewAvailable(imageBlob): function

onPreviewAvailable ist eine Callback-Funktion, die mit einem Vorschaubild des Eingabevideos aufgerufen wird, sofern eines generiert werden konnte. Bitte beachte, dass der Parameter eine JavaScript Blob-Instanz ist und keine URL. Das Vorschaubild wird nicht zusammen mit dem Ausgabevideo zum nominierten Upload-Ziel hochgeladen. In einigen Fällen kann kein Vorschaubild generiert werden, etwa wenn das Eingabevideo Fehler aufweist oder unvollständige/ungültige Metadaten besitzt.

onUploadComplete(data): function

Diese Callback-Funktion wird nach erfolgreichem Abschluss des Upload-Vorgangs aufgerufen. Der data-Parameter ist ein JavaScript-Objekt, das Informationen über die hochgeladene Datei enthält. Es gibt zwei generische Attribute, die unabhängig vom Upload-Ziel enthalten sind:

  • filename – der Original-Dateiname des Eingabevideos
  • duration – die zeitliche Länge (Dauer) des Videos. In bestimmten Fällen kann dieses Attribut fehlen.

Weiterhin gibt es eine Reihe von Attributen, die spezifisch für das Upload-Ziel (output-Parameter) sind:

  • Upload nach „youtube“
    • kind – „youtube“
    • id – die Video-ID auf YouTube
    • url – die URL zum Betrachten des Videos
    • embedHtml – ein HTML-Schnipsel, das einen einbettbaren Video-Player mit diesem Video enthält (sofern von YouTube bereitgestellt).
  • Upload nach „azure“
    • kind – „azure“
    • blob – der Name des Blob-Objekts im Azure Blob Store.
  • Upload nach „s3“
    • kind – „s3“
    • key – der Objekt-Key des Dateiobjekts im Amazon S3 Bucket.
  • Upload nach „gdrive“
    • kind – „gdrive“
    • id – die Google Drive Datei-ID
    • name – der Dateiname auf Google Drive.
    • url – eine URL zu der Datei auf Google Drive
    • folder – die Google Drive Ordner-ID, in der sich die Datei befindet oder „root“ falls die Datei ins Wurzelverzeichnis hochgeladen wurde.
  • Upload nach „dropbox“
    • kind – „dropbox“
    • id – die Dropbox Datei-ID
    • name – der Name der Datei auf Dropbox
    • path – der vollständige Dateipfad auf Dropbox
    • link – der öffentliche Link zu der Datei auf Dropbox (erfordert, dass die entsprechende Einstellung in den Clipchamp API-Einstellungen vorgenommen wurde)
  • Verwendung von „blob“ (kein Upload)
    • kind – „blob“
    • data – Array dessen, der onVideoCreated-Ergebnisse

onVideoCreated(blob [,done [,fail [,notify]]]): function

onVideoCreated ist eine Callback-Funktion, die aufgerufen wird, wenn die output-Option auf blob gesetzt ist. Ein JavaScript-Blob Objekt, das die Ausgabevideo-Datei repräsentiert wird als erster Parameter übergeben. Die Blob-Instanz bleibt so lange gültig, bis die onVideoCreated-Funktion signalisiert, dass die zugehörigen Resourcen freigegeben werden können. Dies kann auf drei Arten geschehen:

  1. Falls die Funktionssignatur zumindest den done-Parameter aufweist und entweder der done oder fail Callback gerufen wird, um die erfolgreiche oder erfolglose weitere Verarbeitung des Videos zu signalisieren.
  2. Wenn ein Promise (oder ‚thenable‘-Objekt) von der Funktion zurückgegeben wird, wird gewartet bis dieses Promise „resolved“ oder „rejected“ wird.
  3. Falls die Funktion weder ein Promise/thenable zurückgibt noch einen done-Parameter aufweist, wird eine synchrone Verarbeitung des übergebenen Videos angenommen und die zugrundeliegenden Resourcen werden unmittelbar nach dem Ende des Funktionsaufrufs freigegeben.

So lange die Funktion nicht auf eine der zuvor genannten Arten das Ende der Verarbeitung des Videos signalisiert, wird das Video als im Upload-Vorgang begriffen angesehen. Dabei kann ein Fortschritts-Status entweder über ein Promise das Fortschritts-Ereignisse unterstützt signalisiert werden oder ein notify Callback-Parameter wird mit dem Prozentwert des Fortschritts gerufen. Die Clipchamp-Benutzeroberfläche verwendet diese Fortschritts-Ereignisse, um eine Fortschrittsanzeige anzuzeigen.

onErrorOccurred(error): function

onErrorOccurred ist eine Callback-Funktion, die aufgerufen wird, wenn während Videoaufnahme, Videoverarbeitung oder Video-Upload ein Fehler auftritt. Der error-Parameter ist ein JavaScript-Objekt mit einem Attribut type, das einen der folgenden Werte annehmen kann:

  • webcam_processing, wenn der Fehler während einer Webcam-Aufname autrat;
  • video_processing, wenn der Fehler auftrat, als ein Eingabevideo oder eine Webcam-Aufnahme verarbeitet (konvertiert/komprimiert) wurde, bevor das Video hochgeladen werden konnte;
  • video_uploading, wenn der Fehler auftrat, während das Video zu dem ausgewählten Upload-Ziel hochgeladen wurde;
  • other_unknown, wenn eine andere oder unklare Fehlerursache vorliegt;

Ein zweites (optionales) Attribut message repräsentiert eine Nutzer-lesbare Fehlererklärung. Du kannst den String-Wert des message-Attributs verwenden, um dem Benutzer eine Fehlermeldung anzuzeigen. Ein weiteres, optionales Attribut details ist ein Array, das weitere technische Informationen über den Fehler enthalten kann, etwa JavaScript-Exceptions, Fehlerereignisse und Ähnliches. Du kannst den im details-Attribut übergebenen Wert verwenden, um mögliche Probleme an den Clipchamp Support zu übermitteln (verfügbar im Enterprise Plan). Die onErrorOccurred Callback-Funktion kann unter Umständen mehrfach für die selbe ursprüngliche Hauptursache aufgerufen werden. Bitte beachte, dass das Clipchamp API für einige erwartbare Probleme bereits kompensatorische Maßnahmen an Bord hat. Wenn beispielsweise für ein Eingabevideo keine Metadaten bestimmt werden können, sorgt die no-probe-reject-Option (siehe enable Parameter) dafür, dass die entsprechende Videodatei dennoch hochgeladen wird.

localization: object

Default value: undefined

Eine Tabelle von Strings, die für die Textlokalisierung zur Verfügung stehen. Du kannst diese Option verwenden, um die Clipchamp-Benutzeroberfläche für verschiedene Sprachen anzupassen oder um bestimmte Standardtexte zu ersetzen oder ganz auszublenden.