Support Kontaktieren Sie Support | Systemstatus Systemstatus
Inhalt der Seite

    Cue-Points hinzufügen

    In diesem Beispiel erfahren Sie, wie Sie einem Video programmgesteuert mithilfe der CMS-API Cue-Points hinzufügen.

    Einführung

    Cue-Points sind angegebene Orte auf der Video-Timeline. Wenn das Video wiedergegeben wird, wird jedes Mal, wenn ein Cue-Point erreicht wird, automatisch eine Veranstaltung übertragen. Mit der Player-API können Sie diese Ereignisse abhören und jede gewünschte Aktion ausführen. Darüber hinaus können Sie alle Cue-Point-Informationen aus den im mediainfo Player-Objekt gespeicherten Videometadaten lesen, wodurch Sie die Cue-Points auf der Video-Timeline auf irgendeine Weise markieren können, wenn Sie möchten.

    Es gibt zwei Arten von Cue-Points:

    • Ad Cue-Points: Diese werden verwendet, um Orte zu markieren, an denen eine Anzeigenanfrage gestellt werden soll (wenn das Video und der Player für Werbung aktiviert sind).
    • Code-Cue-Points: Diese werden verwendet, um mit der Player-API Maßnahmen zu ergreifen - einige typische Anwendungen sind die Anzeige einer Art von Call-to-Action (CTA) oder das Anzeigen eines Bildes oder Textes in Bezug auf Videoinhalte, möglicherweise als Video-Overlay oder auf der Seite um den Player.

    Überblick über die Implementierung

    Sie können Cue-Points im Studio Media-Modulhinzufügen. Sie können sie auch mithilfe der CMS-API hinzufügen, die wir in diesem Beispiel verwenden werden.

    HTTP-Methode

    Cue-Points können entweder beim Erstellen des Videos oder später mit einer Aktualisierungsanfragehinzugefügt werden. In diesem Beispiel fügen wir sie einem vorhandenen Video hinzu, indem wir eine Videoaktualisierungsanfrage stellen, was bedeutet, dass Sie die PATCH Methode verwenden.

    Endpunkt

    Der Endpunkt für die Update-Videoanfrage ist:

              https://cms.api.brightcove.com/v1/accounts/account_id/videos/video_id

    Anfrage Body

    Der Anfragetext ist ein JSON-Objekt, das viele Elemente von Videometadaten enthalten kann. Hier schauen wir uns einfach das cue_points Feld an, das auf ein Array von Cue-Point-Objekten eingestellt ist, wie im folgenden Beispiel:

              {
              "cue_points": [
                  {
                    "name": "Ad Cue Point",
                    "type": "AD",
                    "time": 2.0,
                    "metadata": null,
                    "force_stop": false
                  },
                  {
                    "name": "Code Cue Point",
                    "type": "CODE",
                    "time": 4.0,
                    "metadata": "The metadata might be text or the url for an image to display",
                    "force_stop": true
                  }
                ]
              }

    Cue-Point-Objekt

    Im Folgenden finden Sie eine Beschreibung der Felder für Cue-Point-Objekte.

    Cue-Point-Objekt
    Feld Art Erforderlich Beschreibung
    name string Nein Ein beliebiger Name - dies kann nützlich sein, um einen bestimmten Cue-Point in Ihrem Player-API-Code zu identifizieren
    type string yes Muss sein AD oder CODE
    time Nummer yes Zeit für den Cue-Point in Sekunden nach Beginn des Videos [1]
    metadata string Nein Jede Zeichenfolge mit bis zu 128 Einzelbyte-Zeichen - dies könnte für Ihren Cue-Point-Event-Handler nützlich sein, z. B. den Text für ein Overlay oder die Position eines anzuzeigenden Bildes
    force_stop Boolesch Nein Ob das Video angehalten werden soll, wenn der Cue-Point erreicht force_stop ist (wird vom Brightcove Player ignoriert und es gibt derzeit keine Pläne, es zu unterstützen, aber Sie können das Video manuell in Ihrem Cue-Point-Event-Handler anhalten)

    Hinweise

    • [ 1] Technisch gesehen ist der Cue-Point aktiv, bis der nächste Cue-Point erreicht ist - daher sehen Sie im Cue-Points-Array, das Sie vom Brightcove Player abrufen können, ein startTime und endTime sowie bei a time für den Cue-Point.

    Anmeldedaten für die Authentifizierung

    Um das zu verwenden, benötigen CMS API Sie die richtigen Anmeldeinformationen.

    Der einfachste Weg, um Anmeldeinformationen zu erhalten, ist in den meisten Fällen der Abschnitt Studio-Admin-API-Authentifizierung (erfordert Administratorberechtigungen für Ihr Konto). Weitere Informationen finden Sie unter Verwalten von API-Authentifizierungsanmel In den meisten Fällen möchten Sie wahrscheinlich nur Berechtigungen für alle CMS API Operationen erhalten:

    CMS API Berechtigungen
    CMS API Berechtigungen

    Wenn die von Ihnen benötigten Berechtigungen in Studio nicht verfügbar sind oder wenn Sie sie lieber direkt aus der OAuth-API beziehen möchten, verwenden Sie die unten aufgeführten Dokumente Ihrer Wahl für Client-Anmeldeinformationen . Für welche Option Sie sich auch entscheiden, Sie müssen nach den korrekten Betriebsberechtigungen fragen. Folgendes kann mit cURL oder Postman verwendet werden, um alle Berechtigungen für die CMS-API zu erhalten:

              "operations": [
                "video-cloud/video/all",
                "video-cloud/playlist/all",
                "video-cloud/sharing-relationships/all",
                "video-cloud/notifications/all"
              ]

    Beispiel-App

    Finden Sie den gesamten mit diesem Beispiel verknüpften Code in diesem GitHub-Repository.

    Siehe das Pen CMS API Beispiel: Fügen Sie Cue-Points von Brightcove Learning Services ( @rcrooks1969 ) auf CodePenhinzu.

    Verwenden des CodePen

    • Schalten Sie die tatsächliche Anzeige der App ein, indem Sie auf die Schaltfläche Ergebnis klicken.
    • Klicken Sie auf die Tasten HTML/CSS/JS , um EINEN der Codetypen anzuzeigen.
    • Klicke auf CodePen in der oberen rechten Ecke auf Bearbeiten , um diesen CodePen in dein eigenes Konto einzufügen.
    • Finden Sie den gesamten mit diesem Beispiel verknüpften Code in diesem GitHub-Repository.

    Proxy-Code

    Um Ihre eigene Version der Beispiel-App auf dieser Seite zu erstellen, müssen Sie Ihren eigenen Proxy erstellen und hosten. (Die von Brightcove Learning Services verwendeten Proxys akzeptieren nur Anfragen von Brightcove-Domänen.) Ein Beispiel-Proxy, der dem von uns verwendeten sehr ähnlich ist, aber ohne die Prüfungen, die Anfragen von Nicht-BrightCove-Domänen blockieren, kann in diesem GitHub-Repositorygefunden werden. Dort finden Sie auch grundlegende Anweisungen zur Verwendung und eine ausführlichere Anleitung zum Erstellen von Apps rund um den Proxy unter Using the REST APIs.


    Seite zuletzt aktualisiert am 29 Sep. 2020