Einbetten von Video Indexer-Widgets in Ihre Apps

Artikel
09/26/2022
10 Minuten Lesedauer

In diesem Artikel wird gezeigt, wie Sie Video Indexer-Widgets in Ihre Apps einbetten können. Azure Video Indexer unterstützt das Einbetten von drei Arten von Widgets in Ihre Apps: Kognitive Erkenntnisse, Player und Editor.

Ab Version 2 enthält die Basis-URL des Widgets die Region des angegebenen Kontos. Ein Konto in der Region „USA, Westen“ generiert z.B.: https://www.videoindexer.ai/embed/insights/.../?location=westus2.

Ein Widget vom Typ „Kognitive Erkenntnisse“ enthält alle visuellen Erkenntnisse, die für Sie aus dem Prozess der Videoindizierung extrahiert wurden. Für das Widget vom Typ „Kognitive Erkenntnisse“ werden die folgenden optionalen URL-Parameter unterstützt:

Name	Definition	BESCHREIBUNG
`widgets`	Durch Komma getrennte Zeichenfolgen	Ermöglicht das Steuern der Erkenntnisse, die Sie rendern möchten. Beispiel: Mit `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` werden nur Benutzeroberflächenerkenntnisse für Personen und Stichwörter gerendert. Verfügbare Optionen: Personen, animierte Figuren, Stichwörter, audioEffects, Bezeichnungen, Stimmungen, Gefühle, Themen, KeyFrames, gesprochener Text, OCR, Referenten, Szenen, spokenLanguage; observedPeople und benannte Entitäten.
`controls`	Durch Komma getrennte Zeichenfolgen	Ermöglicht das Steuern der Steuerelemente, die Sie rendern möchten. Beispiel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` rendert nur die Suchoption und die Herunterladen-Schaltfläche. Verfügbare Optionen: Suchen, Herunterladen, Voreinstellungen, Sprache.
`language`	Ein kurzer Sprachcode (Sprachname)	Steuert die Sprache für Erkenntnisse. Beispiel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` oder `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Ein kurzer Sprachcode	Steuert die Sprache der Benutzeroberfläche. Standardwert: `en`. Beispiel: `locale=de`.
`tab`	Die Registerkarte, die standardmäßig ausgewählt ist	Steuert die Registerkarte Erkenntnisse, die standardmäßig gerendert wird. Beispiel: `tab=timeline` rendert Erkenntnisse, während die Registerkarte Zeitachse ausgewählt ist.
`search`	String	Ermöglicht die Festlegung des ersten Suchbegriffs. Beispiel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` rendert die Erkenntnisse gefiltert nach dem Wort „azure“.
`sort`	Durch Komma getrennte Zeichenfolgen	Ermöglicht es Ihnen, die Sortierung einer Erkenntnis zu steuern. Jede Sortierung besteht aus drei Werten: Widgetname, Eigenschaft und Reihenfolge, verbunden durch '_' `sort=name_property_order` Verfügbare Optionen: Widgets: Schlüsselwörter, audioEffects, Bezeichnungen, Gefühle, Emotionen, Keyframes, Szenen, namedEntities und spokenLanguage. Eigenschaft: startTime, endTime, seenDuration, Name und ID. Reihenfolge: asc und desc. Beispiel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` rendert die nach ID sortierten Bezeichnungen in aufsteigender Reihenfolge und Schlüsselwörter sortiert nach dem Namen in absteigender Reihenfolge.
`location`		Der Parameter `location` muss in den eingebetteten Links enthalten sein. Siehe hierzu Abrufen des Namens Ihrer Region. Wenn sich Ihr Konto in der Vorschauphase befindet, sollte `trial` als Standortwert verwendet werden. `trial` ist der Standardwert für den Parameter `location`.

Sie können das Player-Widget zum Streamen von Videos verwenden, indem Sie eine adaptive Bitrate verwenden. Das Player-Widget unterstützt die folgenden optionalen URL-Parameter.

Name	Definition	BESCHREIBUNG
`t`	Sekunden ab Start	Aktiviert die Wiedergabe durch den Player ab dem angegebenen Zeitpunkt. Beispiel: `t=60`.
`captions`	Ein Sprachcode / Ein Sprachcodearray	Ruft die Beschriftungen beim Laden des Widgets in der angegebenen Sprache ab, damit sie im Menü für die Beschriftungen verfügbar sind. Beispiel: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Ein boolescher Wert	Dient zum Laden des Players mit bereits geladenen Beschriftungen. Beispiel: `showCaptions=true`.
`type`		Aktiviert ein Design für den Audioplayer (der Videoteil wird entfernt). Beispiel: `type=audio`.
`autoplay`	Ein boolescher Wert	Gibt an, ob der Player beim Laden mit der Wiedergabe des Videos beginnen soll. Standardwert: `true`. Beispiel: `autoplay=false`.
`language`/`locale`	Ein Sprachcode	Dient zum Steuern der Sprache des Players. Standardwert: `en-US`. Beispiel: `language=de-DE`.
`location`		Der Parameter `location` muss in den eingebetteten Links enthalten sein. Siehe hierzu Abrufen des Namens Ihrer Region. Wenn sich Ihr Konto in der Vorschauphase befindet, sollte `trial` als Standortwert verwendet werden. `trial` ist der Standardwert für den Parameter `location`.
`boundingBoxes`	Array von Optionen für Begrenzungsrahmen: Personen (Gesichter) und beobachtete Personen. Werte müssen durch ein Komma (,) getrennt werden.	Steuert die Option zum Aktivieren/Deaktivieren von Begrenzungsrahmen beim Einbetten des Players. Alle erwähnten Optionen werden aktiviert. Beispiel: `boundingBoxes= observedPeople, people` Der Standardwert ist `boundingBoxes= observedPeople` (nur der Begrenzungsrahmen für beobachtete Personen ist aktiviert).

Mit dem Editor-Widget können Sie neue Projekte erstellen und Erkenntnisse aus Videos verwalten. Das Editor-Widget unterstützt die folgenden optionalen URL-Parameter.

Name	Definition	BESCHREIBUNG
`accessToken`^*	String	Bietet Zugriff auf Videos, die sich nur in dem Konto befinden, das zum Einbetten des Widgets verwendet wurde. Das Editor-Widget erfordert den Parameter `accessToken`.
`language`	Ein Sprachcode	Dient zum Steuern der Sprache des Players. Standardwert: `en-US`. Beispiel: `language=de-DE`.
`locale`	Ein kurzer Sprachcode	Steuert die Sprache, in der Erkenntnisse angezeigt werden. Standardwert: `en`. Beispiel: `language=de`.
`location`		Der Parameter `location` muss in den eingebetteten Links enthalten sein. Siehe hierzu Abrufen des Namens Ihrer Region. Wenn sich Ihr Konto in der Vorschauphase befindet, sollte `trial` als Standortwert verwendet werden. `trial` ist der Standardwert für den Parameter `location`.

^*Der Besitzer sollte beim Bereitstellen von accessToken Vorsicht walten lassen.

Einbetten von Videos

In diesem Abschnitt wird das Einbetten von Videos in Apps erläutert. Hierfür gibt es zwei Möglichkeiten: über das Portal oder durch manuelles Erstellen der URL.

Der Parameter location muss in den eingebetteten Links enthalten sein. Siehe hierzu Abrufen des Namens Ihrer Region. Wenn sich Ihr Konto in der Vorschauphase befindet, sollte trial als Standortwert verwendet werden. trial ist der Standardwert für den Parameter location. Beispiel: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Portal

Gehen Sie im Portal wie hier beschrieben vor, um ein Video einzubetten:

Melden Sie sich bei der Azure Video Indexer-Website an.
Wählen Sie das Video aus, mit dem Sie arbeiten möchten, und drücken Sie Wiedergabe.
Wählen Sie den gewünschten Widget-Typ aus (Kognitive Erkenntnisse, Player oder Editor).
Klicken Sie auf </> Einbetten.
Kopieren Sie den Einbindungscode (wird in Einbindungscode kopieren im Dialogfeld Teilen und einbetten angezeigt).
Fügen Sie Ihrer App den Code hinzu.

Hinweis

Die Freigabe eines Links für das Player- oder Insights-Widget umfasst das Zugriffstoken und gewährt Ihrem Konto schreibgeschützte Berechtigungen.

Manuelles Erstellen der URL

Öffentliche Videos

Wenn Sie öffentliche Videos einbetten möchten, können Sie die URL wie folgt erstellen:

https://www.videoindexer.ai/embed/[insights | player]/<accountId>/<videoId>

Private Videos

Wenn Sie ein privates Video einbetten möchten, müssen Sie ein Zugriffstoken übergeben. Verwenden Sie hierzu Get Video Access Token im Attribut src des iframe-Elements:

https://www.videoindexer.ai/embed/[insights | player]/<accountId>/<videoId>/?accessToken=<accessToken>

Bereitstellen von Funktionen zur Bearbeitung von Erkenntnissen

Um Funktionen zur Bearbeitung von Erkenntnissen in Ihrem eingebetteten Widget bereitzustellen, müssen Sie ein Zugriffstoken übergeben, das Berechtigungen zur Bearbeitung enthält. Verwenden Sie Get Video Access Token mit &allowEdit=true.

Interaktion von Widgets

Das Widget „Kognitive Erkenntnisse“ kann mit einem Video in Ihrer App interagieren. In diesem Abschnitt wird veranschaulicht, wie Sie diese Interaktion erreichen.

Widget „Kognitive Erkenntnisse“

Übersicht über den Ablauf

Beim Bearbeiten der Transkripte findet der folgende Flow statt:

Sie bearbeiten das Transkript auf der Zeitachse.
Azure Video Indexer ruft diese Updates ab und speichert sie im Bereich Aus Transkriptbearbeitungen des Sprachmodells.
Die Beschriftungen werden aktualisiert:
- Wenn Sie das Player-Widget von Azure Video Indexer verwenden, wird es automatisch aktualisiert.
- Wenn Sie einen externen Player verwenden, erhalten Sie eine neue Beschriftungsdatei über das Abrufen von Videobeschriftungen.

Ursprungsübergreifende Kommunikation

Der Video Indexer-Dienst geht wie folgt vor, um für Azure Video Indexer-Widgets die Kommunikation mit anderen Komponenten zu ermöglichen:

Verwendung der HTML5-Methode postMessage für die ursprungsübergreifende Kommunikation.
Überprüfung der Nachricht für den VideoIndexer.ai-Ursprung

Wenn Sie Ihren eigenen Playercode implementieren und die Integration mit Widgets vom Typ „Kognitive Erkenntnisse“ durchführen, sind Sie selbst dafür verantwortlich, den Ursprung der Nachricht von „VideoIndexer.ai“ zu überprüfen.

Einbetten von Widgets in Ihre App oder Ihren Blog (empfohlen)

In diesem Abschnitt wird veranschaulicht, wie Sie die Interaktion zwischen zwei Azure Video Indexer-Widgets so konfigurieren, dass der Player zum relevanten Moment springt, wenn ein Benutzer in Ihrer App das Steuerelement für Erkenntnisse auswählt.

Kopieren Sie den Einbettungscode des Player-Widgets.
Kopieren Sie den Einbettungscode von „Kognitive Erkenntnisse“.
Fügen Sie die Mediator-Datei für die Kommunikation zwischen den beiden Widgets hinzu:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Wenn ein Benutzer in Ihrer App jetzt das Steuerelement für Erkenntnisse auswählt, springt der Player zum relevanten Moment.

Weitere Informationen finden Sie in der Demo Azure Video Indexer – Einbetten beider Widgets.

In diesem Abschnitt wird veranschaulicht, wie Sie die Interaktion zwischen einem Widget vom Typ „Kognitive Erkenntnisse“ und einer Azure Media Player-Instanz per AMP-Plug-In einrichten.

Fügen Sie ein Azure Video Indexer-Plug-In für den AMP-Player hinzu:
<script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

Instanziieren Sie Azure Media Player mit dem Azure Video Indexer-Plug-In.

// Init the source.
function initSource() {
    var tracks = [{
    kind: 'captions',
    // To load vtt from VI, replace it with your vtt URL.
    src: this.getSubtitlesUrl("c4c1ad4c9a", "English"),
    srclang: 'en',
    label: 'English'
    }];
    myPlayer.src([
    {
        "src": "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
        "type": "application/vnd.ms-sstr+xml"
    }
    ], tracks);
}

// Init your AMP instance.
var myPlayer = amp('vid1', { /* Options */
    "nativeControlsForTouch": false,
    autoplay: true,
    controls: true,
    width: "640",
    height: "400",
    poster: "",
    plugins: {
    videobreakedown: {}
    }
}, function () {
    // Activate the plug-in.
    this.videobreakdown({
    videoId: "c4c1ad4c9a",
    syncTranscript: true,
    syncLanguage: true,
    location: "trial" /* location option for paid accounts (default is trial) */
    });

    // Set the source dynamically.
    initSource.call(this);
});

Kopieren Sie den Einbettungscode von „Kognitive Erkenntnisse“.

Nun können Sie mit Azure Media Player kommunizieren.

Weitere Informationen finden Sie in der Demo zu Azure Media Player und Video Indexer-Erkenntnisse.

Wenn Sie einen anderen Videoplayer als Azure Media Player verwenden, müssen Sie den Videoplayer manuell bearbeiten, um die Kommunikation zu ermöglichen.

Fügen Sie Ihren Videoplayer ein.

Dies kann z. B. ein HTML5-Standardplayer sein:

<video id="vid1" width="640" height="360" controls autoplay preload>
   <source src="//breakdown.blob.core.windows.net/public/Microsoft%20HoloLens-%20RoboRaid.mp4" type="video/mp4" /> 
   Your browser does not support the video tag.
</video>

Betten Sie das Widget „Kognitive Erkenntnisse“ ein.

Implementieren Sie die Kommunikation für Ihren Player, indem Sie auf das Ereignis „message“ lauschen. Beispiel:

<script>

    (function(){
    // Reference your player instance.
    var playerInstance = document.getElementById('vid1');

    function jumpTo(evt) {
      var origin = evt.origin || evt.originalEvent.origin;

      // Validate that the event comes from the videoindexer domain.
      if ((origin === "https://www.videoindexer.ai") && evt.data.time !== undefined){

        // Call your player's "jumpTo" implementation.
        playerInstance.currentTime = evt.data.time;

        // Confirm the arrival to us.
        if ('postMessage' in window) {
          evt.source.postMessage({confirm: true, time: evt.data.time}, origin);
        }
      }
    }

    // Listen to the message event.
    window.addEventListener("message", jumpTo, false);

    }())    

</script>

Weitere Informationen finden Sie in der Demo zu Azure Media Player und Video Indexer-Erkenntnisse.

Hinzufügen von Untertiteln

Wenn Sie Azure Video Indexer-Erkenntnisse in Ihren eigenen Azure Media Player einbetten, können Sie die GetVttUrl-Methode verwenden, um Untertitel abzurufen. Sie können auch eine JavaScript-Methode aus dem Azure Video Indexer-AMP-Plug-In getSubtitlesUrl abrufen (wie bereits gezeigt).

Anpassen von für die Einbettung geeigneten Widgets

Sie können die gewünschte Art von Erkenntnissen auswählen. Geben Sie sie dazu als Wert für den folgenden URL-Parameter an, der dem abgerufenen Einbettungscode hinzugefügt wird (aus der API oder der Web-App): &widgets=<list of wanted widgets>.

Die möglichen Werte sind people, animatedCharacters , keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes und namedEntities.

Wenn Sie z. B. ein Widget einbetten möchten, das nur Erkenntnisse zu Personen und Stichwörtern enthalten soll, sieht die iframe-URL für die Einbettung wie folgt aus:

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords

Der Titel des iframe-Fensters kann auch angepasst werden, indem für die iframe-URL &title=<YourTitle> angegeben wird. (Dient zum Anpassen des HTML-Werts <title>.)

Falls Sie Ihrem iframe-Fenster beispielsweise den Titel „MyInsights“ geben möchten, sieht die URL wie folgt aus:

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?title=MyInsights

Beachten Sie, dass diese Option nur in Fällen relevant ist, in denen Sie die Erkenntnisse in einem neuen Fenster öffnen müssen.

Wenn Sie den Azure Video Indexer-Player einbetten, können Sie die Größe des Players wählen, indem Sie die iframe-Größe angeben.

Beispiel:

<iframe width="640" height="360" src="https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/" frameborder="0" allowfullscreen />

Standardmäßig verfügt der Azure Video Indexer-Player über automatisch generierte Untertitel, die auf dem Transkript des Videos basieren. Das Transkript wird aus dem Video mit der Quellsprache extrahiert, die beim Hochladen des Videos ausgewählt wurde.

Wenn das Einbetten mit einer anderen Sprache erfolgen soll, können Sie &captions=<Language Code> zur Player-URL hinzufügen. Falls die Untertitel standardmäßig angezeigt werden sollen, können Sie &showCaptions=true übergeben.

Die URL für die Einbettung sieht dann wie folgt aus:

https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/?captions=en-us

Automatische Wiedergabe

Standardmäßig beginnt der Player mit der Wiedergabe des Videos. Sie können dies verhindern, indem Sie &autoplay=false an die vorhergehende URL für die Einbettung übergeben.

Codebeispiele

Im Repository mit den Codebeispielen finden Sie Beispiele für die Azure Video Indexer-API und -Widgets:

Datei/Ordner	BESCHREIBUNG
`azure-media-player`	Laden eines Azure Video Indexer-Videos in einem benutzerdefinierten Azure Media Player
`azure-media-player-vi-insights`	Einbetten von VI-Erkenntnissen in einen benutzerdefinierten Azure Media Player.
`control-vi-embedded-player`	Einbetten von VI Player und dessen Steuerung von außen.
`custom-index-location`	Einbetten von VI-Erkenntnissen aus einem benutzerdefinierten externen Speicherort (kann ein Blob eines Kunden sein).
`embed-both-insights`	Grundlegende Verwendung von VI-Informationen, sowohl Player als auch Erkenntnisse.
`embed-insights-with-AMP`	Einbetten eines VI-Widgets vom Typ „Kognitive Erkenntnisse“ mit einem benutzerdefinierten Azure Media Player.
`customize-the-widgets`	Einbetten von VI-Widgets mit benutzerdefinierten Optionen.
`embed-both-widgets`	Einbetten von VI-Player und -Erkenntnissen und Kommunizieren zwischen den Widgets.
`url-generator`	Generiert benutzerdefinierte Einbindungs-URLs für Widgets auf der Grundlage der vom Benutzer angegebenen Optionen.
`html5-player`	Einbetten von VI-Erkenntnissen in einen standardmäßigen HTML5-Videoplayer.

Unterstützte Browser

Weitere Informationen finden Sie unter Unterstützte Browser.

Einbetten und Anpassen von Azure Video Indexer-Widgets in Ihrer App mithilfe eines npm-Pakets

Mit unserem NPM-Paket @azure/video-analyzer-for-media-widgets können Sie Ihrer App die Insights-Widgets hinzufügen und entsprechend Ihren Anforderungen anpassen.

Statt ein iframe-Element zum Einbetten der Insight-Widgets hinzuzufügen, können Sie mit diesem neuen Paket die Einbettung und die Kommunikation zwischen unseren Widgets erledigen. Das Anpassen Ihres Widgets wird nur in diesem Paket unterstützt – alles an einem Ort.

Weitere Informationen finden Sie in unserem offiziellen GitHub.

Nächste Schritte

Weitere Informationen zum Anzeigen und Bearbeiten von Azure Video Indexer-Erkenntnissen finden Sie in unter Anzeigen und Bearbeiten von Azure Video Indexer-Erkenntnissen.

Sehen Sie sich auch Azure Video Indexer CodePen an.

Einbetten von Video Indexer-Widgets in Ihre Apps

Typen von Widgets

Widget „Kognitive Erkenntnisse“

Player-Widget

Editor-Widget

Einbetten von Videos

Portal

Manuelles Erstellen der URL

Öffentliche Videos

Private Videos

Bereitstellen von Funktionen zur Bearbeitung von Erkenntnissen

Interaktion von Widgets

Übersicht über den Ablauf

Ursprungsübergreifende Kommunikation

Einbetten von Widgets in Ihre App oder Ihren Blog (empfohlen)

Einbetten des Widgets „Kognitive Erkenntnisse“ und Verwenden von Azure Media Player zum Wiedergeben der Inhalte

Einbetten des Azure Video Indexer-Widgets vom Typ „Kognitive Erkenntnisse“ und Verwenden eines anderen Videoplayers

Hinzufügen von Untertiteln

Anpassen von für die Einbettung geeigneten Widgets

Widget „Kognitive Erkenntnisse“

Player-Widget

Automatische Wiedergabe

Codebeispiele

Unterstützte Browser

Einbetten und Anpassen von Azure Video Indexer-Widgets in Ihrer App mithilfe eines npm-Pakets

Nächste Schritte