Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
In diesem Artikel wird gezeigt, wie Sie Azure AI Video Indexer-Widgets in Ihre Apps einbetten können. Azure AI Video Indexer unterstützt das Einbetten von drei Arten von Widgets in Ihre Apps: Insights, Player und Editor.
Typen von Widgets
Einsichten-Widget
Ein Insights-Widget enthält alle visuellen Einblicke, die aus Ihrem Videoindizierungsprozess extrahiert wurden. Das Insights-Widget unterstützt die folgenden optionalen URL-Parameter:
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 UI-Einblicke zu Personen und Stichwörtern gerendert.Verfügbare Optionen: people , keywords , audioEffects , labels , sentiments , emotions , topics , keyframes , transcript , ocr , speakers , scenes , spokenLanguage , observedPeople , namedEntities , detectedObjects . |
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: search , download , presets , language . |
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. Der Standardwert ist 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 |
Schnur | Ermöglicht die Festlegung des ersten Suchbegriffs. Beispiel: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure Rendert die vom Wort Azure gefilterten Einblicke. |
sort |
Durch Komma getrennte Zeichenfolgen | Ermöglicht es Ihnen, die Sortierung einer Erkenntnis zu steuern. Jede Sorte besteht aus drei Werten: Widgetname, Eigenschaft und Reihenfolge, verbunden mit '_' sort=name_property_order Verfügbare Optionen: Widgets: keywords , audioEffects , labels , sentiments , emotions , keyframes , scenes , 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 stellt die Labels nach ID in aufsteigender Reihenfolge dar und die Schlüsselwörter nach Name in absteigender Reihenfolge sortiert. |
location |
Der parameter location muss in die eingebetteten Verknüpfungen aufgenommen werden; weitere Informationen zum Abrufen des Namens Ihrer Region finden Sie unter. Wenn sich Ihr Konto in der Vorschauphase befindet, sollte trial als Standortwert verwendet werden.
trial ist der Standardwert für den Parameter location . |
Playerwidget
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 Sprachcode-Array | 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 | Ermöglicht das Laden des Players mit bereits aktivierten Untertiteln. Beispiel: showCaptions=true . |
type |
Aktiviert eine Skin für den Audio-Player (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. Der Standardwert ist true .Beispiel: autoplay=false . Die Möglichkeit, die automatische Wiedergabe zu verwenden, unterliegt der Richtlinie des verwendeten Webbrowsers: Firefox, Google Chrome, macOS WebKit |
language /locale |
Ein Sprachcode | Dient zum Steuern der Sprache des Players. Der Standardwert ist en-US .Beispiel: language=de-DE . |
location |
Der parameter location muss in die eingebetteten Verknüpfungen aufgenommen werden; weitere Informationen zum Abrufen des Namens Ihrer Region finden Sie unter. 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 Begrenzungsrahmen. Optionen: Personen (Gesichter), beobachtete Personen und erkannte Objekte. Trennen Sie Werte durch ein Komma (,). |
Steuert die Option zum Aktivieren/Deaktivieren von Begrenzungsrahmen beim Einbetten des Players. Alle erwähnten Optionen sind aktiviert. Beispiel: boundingBoxes=observedPeople,people,detectedObjects Der Standardwert ist boundingBoxes=observedPeople,detectedObjects (es sind nur Begrenzungsrahmen der beobachteten Personen und erkannten Objekte aktiviert). |
Editor-Widget
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 * |
Schnur | 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. Der Standardwert ist en-US .Beispiel: language=de-DE . |
locale |
Ein kurzer Sprachcode | Steuert die Sprache, in der Erkenntnisse angezeigt werden. Der Standardwert ist en .Beispiel: language=de . |
location |
Der location Parameter muss in die eingebetteten Verknüpfungen eingeschlossen werden. Erfahren Sie , wie Sie den Namen Ihrer Region abrufen. 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 die Website oder durch manuelles Erstellen der URL.
Der location
Parameter muss in die eingebetteten Verknüpfungen eingeschlossen werden. Erfahren Sie , wie Sie den Namen Ihrer Region abrufen. 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
Die Website-Benutzeroberfläche
Um ein Video einzubetten, verwenden Sie die Website mit den folgenden Schritten.
- Melden Sie sich bei der Azure AI 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 Widgettyp (Insights, Player oder Editor) aus.
- Wählen Sie </> Einbetten aus.
- 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 eine API-Anforderung zum Abrufen von Videozugriffstoken mit &allowEdit=true
.
Interaktion von Widgets
Das Insights-Widget kann mit einem Video in Ihrer App interagieren. In diesem Abschnitt wird veranschaulicht, wie Sie diese Interaktion erreichen.
Überblick über Flows
Beim Bearbeiten der Transkripte findet der folgende Flow statt:
Sie bearbeiten das Transkript auf der Zeitachse.
Azure KI 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 AI Video Indexer verwenden, wird es automatisch aktualisiert.
- Wenn Sie einen externen Player verwenden, erhalten Sie eine neue Untertitelungsdatei über einen Aufruf der API Videountertitel abrufen.
Ursprungsübergreifende Kommunikation
So erhalten Sie Azure AI Video Indexer-Widgets für die Kommunikation mit anderen Komponenten:
- Verwendung der HTML5-Methode
postMessage
für die ursprungsübergreifende Kommunikation. - Überprüfung der Nachricht für den VideoIndexer.ai-Ursprung
Es liegt in Ihrer Verantwortung, den Ursprung der Nachricht zu überprüfen, die von VideoIndexer.ai stammt, wenn Sie Ihren eigenen Spielercode implementieren und in Insights-Widgets integrieren.
Einbetten von Widgets in Ihre App oder Ihren Blog (empfohlen)
In diesem Abschnitt wird gezeigt, wie Sie die Interaktion zwischen zwei Azure AI Video Indexer-Widgets erzielen. Wenn Benutzende in Ihrer App das Steuerelement für Erkenntnisse auswählen, springt der Player zum relevanten Moment.
- Kopieren Sie den Einbettungscode des Player-Widgets.
- Kopieren Sie den Insights-Einbettungscode.
- Fügen Sie die Mediator-Datei für die Kommunikation zwischen den beiden Widgets hinzu:
<script src="https://aka.ms/vi-mediator-file"></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 im Azure AI Video Indexer – Einbetten beider Widgets-Demo.
Einbetten des Azure AI Video Indexer Insights-Widgets und Verwenden eines anderen Videoplayers
Wenn Sie einen anderen Videoplayer als Videoindexer Player verwenden, müssen Sie den Videoplayer manuell bearbeiten, um die Kommunikation zu erreichen.
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="//vi-static-prod-gdh6d4ggexcmgua5.b01.azurefd.net/public/Microsoft%20HoloLens-%20RoboRaid.mp4" type="video/mp4" /> Your browser does not support the video tag. </video>
Betten Sie das Insights-Widget ein.
Implementieren Sie die Kommunikation für Ihren Player, indem Sie auf das Ereignis „message“ lauschen. Zum 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 im Video Indexer Player + VI Insights Demo.
Anpassen von für die Einbettung geeigneten Widgets
Einsichten-Widget
Sie können die gewünschte Art von Erkenntnissen auswählen. Geben Sie sie dazu als Wert für den folgenden URL-Parameter an. Es wird dem einbettungscode hinzugefügt, den Sie abrufen (aus der API oder von der Azure AI Video Indexer-Website ): &widgets=<list of wanted widgets>
.
Die möglichen Werte sind hier aufgeführt.
Wenn Sie beispielsweise ein Widget einbetten möchten, das nur Personen und Schlüsselwörter-Einblicke enthält, ähnelt die iframe-Einbettungs-URL:
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>
.)
Wenn Sie z. B. Ihrem iframe-Fenster den Titel MyInsights
zugeben 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.
Playerwidget
Wenn Sie den Azure AI Video Indexer Player einbetten, können Sie die Größe des Players auswählen, indem Sie die Größe des iframes angeben.
Zum Beispiel:
> [!VIDEO https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/]>/<videoId>/" frameborder="0" allowfullscreen />
Standardmäßig generiert der Azure AI Video Indexer Player Untertitel automatisch, 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 Einbettungs-URL sieht dann wie folgt aus:
https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/?captions=en-us
Automatische Wiedergabe
Standardmäßig startet der Player die Wiedergabe des Videos. Sie können dies verhindern, indem Sie &autoplay=false
an die vorhergehende URL für die Einbettung übergeben.
Codebeispiele
Sehen Sie sich das Codebeispiel-Repository an, das Beispiele für die Azure AI Video Indexer-API und Widgets enthält:
Datei/Ordner | Beschreibung |
---|---|
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. |
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 AI Video Indexer Widgets in Ihrer App mithilfe des npmjs-Pakets
Mit unserem paket "@azure/video-analyzer-for-media-widgets " können Sie Ihrer App die Insights-Widgets hinzufügen und entsprechend Ihren Anforderungen anpassen.
Anstatt ein iframe-Element hinzuzufügen, um das Insights-Widget einzubetten, können Sie mit diesem neuen Paket ganz einfach zwischen unseren Widgets einbetten und kommunizieren. Das Anpassen Ihres Widgets wird nur in diesem Paket unterstützt – alles an einem Ort.
Weitere Informationen finden Sie in unserem offiziellen GitHub.
Zugehöriger Inhalt
Sehen Sie sich auch Azure AI Video Indexer CodePen an.