kaltura editor app embed
1.0.0
Stärken Sie Ihre Apps mit Videobearbeitungsfunktionen im Browser, um die Erstellung und Weitergabe von Videos in Ihren Anwendungen zu vereinfachen und zu vereinfachen.
Bei diesem Repo handelt es sich um eine Referenz-NodeJS-App, die zeigt, wie die Kaltura-Editor-Anwendung in eine Hosting-NodeJS-App eingebettet wird.
Dies ist eine sehr einfache, auf Node Express basierende App (generiert mit Express Generator).
Zu den Funktionen der Kaltura Editor-App gehören : Ermöglichen Sie Endbenutzern das Erstellen von Videoclips, Unterstützung für Cue-Points, Untertitel und Multi-Stream-Inhalte, Audiodiagramm zur Erkennung stiller Bereiche, Schneiden langer Videos in der Mitte, Kompatibel mit Desktop- und Tablet-Browsern, Einfach zu verwenden und auf Barrierefreiheit bedacht , Anpassbar mit CSS, Einfache Integration in jede Web-App mithilfe der sicheren Iframe-API, Erstellen und Bearbeiten interaktiver In-Video-Quiz, Verwenden zum Festlegen von Cue-Points für dynamische Anzeigen, Erstellen von Hotspot-Overlays, die die Aktion fördern und mehr. Um mehr über die Funktionen des Kaltura Editors zu erfahren, schauen Sie sich die Schulungsvideos zum Kaltura Editor an.
npm installconfig.template.json nach config.jsonconfig.json , konfigurieren Sie es gemäß den Anweisungen und entfernen Sie alle KommentareDEBUG=kaltura-editor-app-embed:* npm startset DEBUG=kaltura-editor-app-embed:* & npm startindexindex.pug -Ansicht)Die App wird als Iframe wie folgt geladen:
<iframe src="//cdnapisec.kaltura.com/apps/kea/[v<kea_version>|latest]/index.html"></iframe>
Ersetzen Sie
v<kea_version>durchlatest, um immer die neueste produktionsbereite [stabile] Version zu laden, oder legen Sie eine bestimmte Version fest (die Liste der in der Produktion verfügbaren Versionen finden Sie im offiziellen Änderungsprotokoll).
Zum Beispiel;
<iframe src="//cdnapisec.kaltura.com/apps/kea/v2.28.11/index.html"></iframe><iframe src="//cdnapisec.kaltura.com/apps/kea/latest/index.html"></iframe>Wichtig : Laden Sie die index.html nicht direkt, sie sollte nur in einem iFrame geladen werden.
Die Integration der Kaltura Editor-Anwendung erfolgt durch die Einbettung eines iFrames in Ihre Webanwendung. Die Kommunikation mit der Editor-App (Aufrufen von Aktionen und Reagieren auf Ereignisse) erfolgt über die postMessage-API.
In diesem Repository finden Sie auch vollständige Referenzimplementierungsbeispiele (im Verzeichnis „reference-samples“ bzw. im jeweiligen Programmiersprachenverzeichnis).
Der Kaltura-Editor erwartet eine Kaltura-Sitzung (KS) in 3 PostMessage-Ereignissen:
userId übergeben, die die richtige userId in Ihrem System darstellt. Diese userId ist Eigentümer der neu erstellten Einträge (bei Verwendung von „Speichern unter“ oder beim Erstellen eines neuen Quiz).sview:<entryId> ein, um alle besonderen Einschränkungen der Zugriffskontrolle zu umgehen.edit:<entryId> hinzu.edit:<entryId> hinzu. userId , um eine anonyme Vorschau des bearbeiteten Eintrags anzuzeigen (dadurch wird sichergestellt, dass er sich bei der Beantwortung eines Quiz während der Vorschau während der Vorschautests nicht als echter Benutzer registriert).sview:<entryId> ein, um alle besonderen Einschränkungen der Zugriffskontrolle zu umgehen.disableentitlementforentry:<entryId> ein, um spezielle Berechtigungseinstellungen für die Vorschausitzung zu umgehen.setrole:PLAYBACK_BASE_ROLE ein, damit diese Sitzung keine anderen Aktionen als die Wiedergabeaktionen ausführen darf, die für die Vorschau des neuen Eintrags erforderlich sind. Richten Sie in Ihrem Code, in den der Editor-iFrame eingebettet ist, einen Listener für postMessages ein, um mit der Editor-API zu kommunizieren:
var initParamsListener = window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
postMessageDataenthält den zu verarbeitenden postMessage-Ereignisnamen (messageType) und alle relevantendata.
Wenn der Editor bereit ist, löst er das kea-bootstrap PostMessage-Ereignis aus. Fangen Sie dieses Ereignis ab und rufen Sie als Reaktion die kea-config postMessage auf, um die Initialisierungsparameter an die Editor-App zu übergeben:
if ( postMessageData . messageType === 'kea-bootstrap' ) {
e . source . postMessage ( {
'messageType' : 'kea-config' ,
'data' : { /* ADD HERE ALL THE EDITOR INITIALIZATION PARAMS */ }
} , e . origin )
} Im Datenattribut der kea-config postMessage müssen Sie die Initialisierungsparameter übergeben. Nachfolgend finden Sie eine detaillierte Übersicht aller verfügbaren Parameter.
service_url : Die URL des Kaltura-Dienstes, der bei API-Anfragen verwendet werden soll (Basis-API-Endpunkt), normalerweise https://www.kaltura.com/ .partner_id : Die zu verwendende Kaltura-Konto-ID (auch bekannt als partnerId).ks : Die generierte Kaltura-Sitzungszeichenfolge, mit der sich der Editor authentifiziert.entry_id : Die ID des Videoeintrags, der bearbeitet (ein Quiz zuschneiden oder bearbeiten) oder geklont (einen neuen Clip erstellen oder für ein neues Quiz klonen) soll.player_uiconf_id : Die Kaltura Player-Instanz-UICONF-ID, die für den Bearbeitungsansicht-Player verwendet werden soll (Sie finden sie auf der Registerkarte „KMC Studio“). Stellen Sie sicher, dass der von Ihnen verwendete Player NICHT für die automatische Wiedergabe konfiguriert ist (stellen Sie sicher, dass in der Player-Konfiguration autoPlay=false eingestellt ist, oder verwenden Sie Studio, um den Player zu bearbeiten und deaktivieren Sie die automatische Wiedergabe in den Haupteinstellungen).load_thumbnail_with_ks : Ein boolescher Wert (Standardwert ist „false“), der angibt, ob ein KS an die Miniaturansichts-URL angehängt werden soll, falls Ihr Konto so konfiguriert ist, dass ein KS für Miniaturansichts-URLs erforderlich ist (nicht empfohlen, da dies das Zwischenspeichern von Miniaturansichten verhindert). tabs : Die anzuzeigenden Editor-Anwendungsregisterkarten und ihre jeweiligen Berechtigungen zum Aktivieren.
edit – Die Registerkarte „Video zuschneiden und beschneiden“ wird angezeigt. Unterstützte Berechtigungen sind: 'clip' (ermöglicht „Speichern unter“, um einen neuen Videoclip zu erstellen) und 'trim' (ermöglicht „Speichern“, um die Quellvariante des geladenen Videoeintrags zu ändern).quiz – Aktiviert die Registerkarte zum Erstellen/Bearbeiten von Quiz. Die grundlegende aktivierte Funktion ist der Fragetyp „Multiple Choice“. Unterstützte Berechtigungen: 'quiz' (schließen Sie dies immer ein, wenn Sie das Quiz aktivieren möchten), 'questions-v2' („Fragetypen „Reflection Point““ und „Wahr/Falsch“), 'questions-v3' („Offene Frage“-Typ). )hotspots – Aktiviert die Registerkarte „Hotspots“, die das Hinzufügen von Call-to-Action-Overlays zum Video ermöglichtadvertisements – Aktiviert die Registerkarte „Mid-Roll-Anzeigen“.Hinweis: Ein neuer Quiz-Eintrag wird automatisch erstellt, wenn der Benutzer auf der Registerkarte „Quiz-Erstellung“ auf die Schaltfläche „Start“ klickt.
Das folgende Beispiel zeigt eine Registerkartenkonfiguration aller verfügbaren Registerkarten und Berechtigungen (Quiz, Ausschneiden und Zuschneiden):
'tabs' : {
'edit' : {
name : 'edit' ,
permissions : [ 'clip' , 'trim' ] ,
userPermissions : [ 'clip' , 'trim' ] ,
showOnlyExpandedView : true ,
showSaveButton : false ,
showSaveAsButton : false
} ,
'quiz' : {
name : 'quiz' ,
permissions : [ 'quiz' , 'questions-v2' , 'questions-v3' ] ,
userPermissions : [ 'quiz' ]
} ,
'advertisements' : {
name : 'advertisements' ,
permissions : [ 'CUEPOINT_MANAGE' , 'FEATURE_DISABLE_KMC_KDP_ALERTS' ] ,
showSaveButton : false
} ,
'hotspots' : {
name : 'hotspots' ,
showSaveButton : false
}
} Der Editor ermöglicht das Ausblenden der Schaltflächen „Speichern“ und „Speichern unter“, damit die Hosting-App stattdessen ihre eigenen Schaltflächen anzeigen kann:
editor – zeigt showSaveButton an, um die Schaltfläche „Speichern“ (Zuschneiden) auszublenden, und showSaveAsButton um die Schaltfläche „Speichern unter“ (Clip) auszublendenhotspos und advertisements – zeigen showSaveButton an, um die Schaltfläche „Speichern“ auszublenden (diese Registerkarten erstellen keinen neuen Eintrag). Der tab Parameter: Der erste Tab zum Starten der aktuellen Anwendungssitzung auf:
editor für den Videoclip oder die Registerkarte „Zuschneiden“.quiz für die Registerkarte „In-Video-Quiz“.advertisements für die Registerkarte „Mid-Roll-Anzeigen“.hotspots – für die Registerkarte Call-to-Action-Hotspots. help_link : Eine vollständige URL, die für „Gehe zum Benutzerhandbuch“ in der Hilfekomponente des Editors verwendet werden soll (Sie können das Standardhandbuch als Referenz verwenden: https://knowledge.kaltura.com/node/1912 ).css_url : Eine vollständige URL zu einer zusätzlichen CSS-Datei zum Überschreiben von Stilregeln.preview_player_uiconf_id : Die Kaltura Player-Instanz, die für die Vorschau verwendet werden soll. Bei Nichtbestehen kommt der Hauptspieler zum Einsatz. Die Sprache wird nach Priorität eingestellt:
locale_url – Benutzerdefinierte Gebietsschemadatei, vollständige URL zu einer JSON-Datei mit Übersetzungen.language_code – Unterstützter Sprachcode (z. B. en ).language_code=en ) wird als Standardgebietsschema verwendet (sofern nichts anderes konfiguriert ist). Da die Generierung von Sitzungen nur auf der Serverseite erfolgen sollte (um Ihre geheimen API-Schlüssel oder Anmeldeinformationen nicht preiszugeben), empfehlen wir die Erstellung eines Backend-Dienstes, der aufgerufen wird, wenn der Editor einen neuen KS anfordert, und der den benötigten KS für jedes Ereignis zurückgibt.
postMessageData.data.entryId enthält die ID des neu erstellten Eintrags (übergeben Sie ihn an Ihren KS-Generierungsdienst und geben Sie einen KS mit entsprechenden Anzeige- und Bearbeitungsrechten zurück).messageType: 'kea-ks' um den neuen KS für den Editor festzulegen. if ( postMessageData . messageType === 'kea-get-ks' ||
postMessageData . messageType === 'kea-get-preview-ks' )
{
var getKsUrl = 'https://example.com/editor-ks-service/' + '?entryId=' + postMessageData . data . entryId + '&action=' + postMessageData . messageType ;
$ . getJSON ( getKsUrl , null )
. done ( function ( responseData ) {
e . source . postMessage ( {
messageType : 'kea-ks' ,
data : responseData . ks
} , e . origin ) ;
} )
. fail ( function ( jqxhr , textStatus , error ) {
var err = textStatus + ", " + error ;
console . log ( "Get KS for Edit Request Failed: " + err ) ;
} ) ;
}kea-get-ks – Nachdem ein neuer Clip- oder Quiz-Videoeintrag erstellt wurde, um den KS auf die neu erstellten Eintragsberechtigungen zurückzusetzen.kea-get-preview-ks – Wenn der Benutzer eine Vorschau des Eintrags anfordert, um die Berechtigungen auf einen berechtigten anonymen Betrachter festzulegen. Diese postMessage-Ereignisse werden als Reaktion auf Nutzungsaktionen in der Editor-App ausgelöst. Behandeln Sie diese Ereignisse in Ihrer Hosting-Anwendung, um den Workflow zwischen dem Editor und Ihrer Anwendung fortzusetzen. Zum Beispiel:
kea-trimming-started Wird beim Initiieren einer Trim-Aktion gesendet. postMessageData.data.entryId enthält die ID des Eintrags, der gekürzt wird. Erwartete Antwort: eine kea-trim-message wobei message.data der (lokalisierte) anzuzeigende Text ist.
if ( postMessageData . messageType === 'kea-trimming-started' ) {
e . source . postMessage ( {
messageType : 'kea-trim-message' ,
data : 'You must approve the media replacement in order to be able to watch the trimmed media'
} , e . origin )
}kea-trimming-done Wird gesendet, wenn eine Trim-Aktion abgeschlossen ist. postMessageData.data.entryId enthält die ID des gekürzten Eintrags.
if ( postMessageData . messageType === 'kea-trimming-done' ) {
console . log ( 'processing of entry with id ' + message . data . entryId + ' is complete' ) ;
}kea-clip-created Wird bei der Clip-Erstellung gesendet. Das data enthält die ursprüngliche Eintrags-ID, die ID des neuen Clips und den Namen des neuen Eintrags. Erwartete Antwort: eine kea-clip-message , wobei message.data der (lokalisierte) Text ist, der dem Benutzer angezeigt wird, nachdem der neue Clip erstellt wurde.
if ( postMessageData . messageType === 'kea-clip-created' ) {
var message = 'A new video clip named "' + postMessageData . data . newEntryName + '" (id: ' + postMessageData . data . newEntryId + ') was created from ' + postMessageData . data . originalEntryId ;
e . source . postMessage ( {
'messageType' : 'kea-clip-message' ,
'data' : message
} , e . origin ) ;
}kea-quiz-updated Wird gesendet, wenn ein In-Video-Quiz-Eintrag aktualisiert wurde. message.data enthält die Eintrags-ID des aktualisierten Kaltura-Eintrags.
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-quiz-created Wird gesendet, wenn ein neuer In-Video-Quiz-Eintrag erstellt wurde. message.data enthält die Eintrags-ID des erstellten Kaltura-Eintrags.
if ( postMessageData . messageType === 'kea-quiz-created' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-get-display-name Anforderung, den Anzeigenamen des Benutzers für den Besitzer des geladenen Eintrags abzurufen. Das data enthält die entsprechende Benutzer-ID. Erwartete Antwort: ein kea-display-name , wobei message.data der Benutzeranzeigename ist, der in der Editor-App angezeigt werden soll.
if ( postMessageData . messageType === 'kea-get-display-name' ) {
//use the userId to get display name from your service
var getUserDisplaynameUrl = 'kedit-displayname-service/?userId=' + postMessageData . data . userId ;
$ . getJSON ( getKsUrl , null )
. done ( function ( responseData ) {
e . source . postMessage ( {
messageType : 'kea-display-name' ,
data : responseData . displayName
} , e . origin ) ;
} )
. fail ( function ( jqxhr , textStatus , error ) {
var err = textStatus + ", " + error ;
console . log ( "Failed to retrieve the user display name: " + err ) ;
e . source . postMessage ( {
messageType : 'kea-display-name' ,
data : postMessageData . data . userId
} , e . origin ) ;
} ) ;
}kea-go-to-media Wird empfangen, wenn der Benutzer außerhalb der Anwendung navigiert werden soll (z. B. wenn die Bearbeitung abgeschlossen ist). Das data enthält die Eintrags-ID. Die Hostanwendung sollte zu einer Seite navigieren, auf der die bearbeiteten Medien angezeigt werden.
if ( postMessageData . messageType === 'kea-go-to-media' ) {
console . log ( "Redirecting to the new media: " + postMessageData . data ) ;
var videoPath = "https://example.com/video/" ; //replace with your real service path for video playbacl pages
var redirectUrl = videoPath + "?entryId=" postMessageData . data ;
$ ( location ) . attr ( 'href' , redirectUrl ) ;
}kea-{tab-name}-tab-loaded Diese Nachricht wird aufgerufen, wenn der Benutzer zu einer anderen Registerkarte in der Editor-App wechselt. Dies ist nützlich, wenn das Hosten einer App kontextbezogener sein muss. Ersetzen Sie {tab-name} durch den gewünschten Tab-Namen.
Beispiel:
window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
// make sure we are in editor tab.
if ( postMessageData . messageType === 'kea-editor-tab-loaded' ) {
// do stuff here after tab is loaded
}
} )Unterstützte Veranstaltungen:
kea-quiz-tab-loadedkea-editor-tab-loadedkea-advertisements-tab-loadedkea-hotspots-tab-loadedkea-do-saveKann von der Hosting-Anwendung gesendet werden, wenn ein Speicherdialog an den Benutzer gestartet und der Speichervorgang gestartet werden soll (unterstützte Registerkarten: Anzeigen, Hotspots und Editor). Im Editor entspricht die Aktion „Speichern“ dem Vorgang „Trimmen“.
Beispiel:
// listen to postMessages on the window
window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
// make sure we are in editor tab.
if ( postMessageData . messageType === 'kea-editor-tab-loaded' ) {
// attach a click event to a button (id==saveButton) in the hosting app.
// when the button is clicked, call the editor app's save function
saveButton . addEventListener ( 'click' , function ( ) {
e . source . postMessage ( { messageType : 'kea-do-save' } , e . origin ) ;
} ) ;
}
} )kea-do-save-asKann von der Hosting-Anwendung gesendet werden, wenn ein Dialogfeld „Speichern unter“ für den Benutzer gestartet und der neue Videoclip-Prozess gestartet werden soll (unterstützte Registerkarte: Editor). Im Editor entspricht die Aktion „Speichern“ der Aktion „Ausschneiden“. Diese Aktion ermöglicht auch die Übergabe einer Referenz-ID, die als Teil der Antwort zum geklonten Eintrag hinzugefügt wird.
Hinweis: Um das Festlegen des Feldes „referenceId“ zu unterstützen, muss die von der Editor-App verwendete Kaltura-Sitzung eine Benutzerrolle mit den folgenden aktivierten Berechtigungen verwenden:
BASE_USER_SESSION_PERMISSION,CONTENT_INGEST_REFERENCE_MODIFY,CONTENT_INGEST_CLIP_MEDIA
Beispiel:
// listen to postMessages on the window
window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
// make sure we are in editor tab.
if ( postMessageData . messageType === 'kea-editor-tab-loaded' ) {
// Start the clipping process (will prompt user)
// And pass optional reference id param to keep reference to the external hosting app entry id.
// useful for cases where the hosting app was closed while clipping.
saveButton . addEventListener ( 'click' , function ( ) {
e . source . postMessage ( {
messageType : 'kea-do-save-as' ,
data : { referenceId : referenceId }
} , e . origin ) ;
} ) ;
}
} ) Sie können mehr über Kaltura erfahren und eine kostenlose Testversion starten unter: http://corp.kaltura.com
Kontaktieren Sie uns über Twitter @Kaltura oder per E-Mail: [email protected]
Wir würden uns freuen, von Ihnen zu hören!
Der gesamte Code in diesem Projekt wird unter der AGPLv3-Lizenz veröffentlicht, es sei denn, im entsprechenden Bibliothekspfad ist eine andere Lizenz für eine bestimmte Bibliothek angegeben.
Copyright © Kaltura Inc. Alle Rechte vorbehalten.
Sehen Sie sich die Liste der in diesem Projekt verwendeten Open-Source-Bibliotheken von Drittanbietern an.
