Osadzanie widżetów usługi Azure AI Video Indexer w aplikacjach

Artykuł
10/09/2024

W tym artykule pokazano, jak osadzać widżety usługi Azure AI Video Indexer w aplikacjach. Usługa Azure AI Video Indexer obsługuje osadzanie trzech typów widżetów w aplikacjach: szczegółowe informacje, odtwarzacz i edytor.

Widżet Szczegółowych informacji zawiera wszystkie szczegółowe informacje wizualne wyodrębnione z procesu indeksowania wideo. Widżet Szczegółowe informacje obsługuje następujące opcjonalne parametry adresu URL:

Nazwisko	Definicja	opis
`widgets`	Ciągi rozdzielone przecinkami	Umożliwia kontrolowanie szczegółowych informacji, które mają być renderowane. Przykład: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` renderuje tylko osoby i słowa kluczowe Szczegółowe informacje o interfejsie użytkownika. Dostępne opcje: `people`, `keywordslabelssentimentsemotionsaudioEffectstopicskeyframesspokenLanguagescenesobservedPeopleocrspeakerstranscript`, . `namedEntitiesdetectedObjects`
`controls`	Ciągi rozdzielone przecinkami	Umożliwia kontrolowanie kontrolek, które mają być renderowane. Przykład: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` renderuje tylko opcję wyszukiwania i przycisk pobierania. Dostępne opcje: `search`, , `presetsdownload`, `language`.
`language`	Krótki kod języka (nazwa języka)	Kontroluje język szczegółowych informacji. Przykład: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` lub `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Krótki kod języka	Steruje językiem interfejsu użytkownika. Domyślna wartość to `en`. Przykład: `locale=de`.
`tab`	Wybrana karta domyślna	Kontroluje kartę Szczegółowe informacje , która jest domyślnie renderowana. Przykład: `tab=timeline` renderuje szczegółowe informacje z wybraną kartą Oś czasu .
`search`	String	Umożliwia kontrolowanie początkowego terminu wyszukiwania. Przykład: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` renderuje szczegółowe informacje filtrowane według słowa "Azure".
`sort`	Ciągi rozdzielone przecinkami	Umożliwia kontrolowanie sortowania szczegółowych informacji. Każdy sortowanie składa się z 3 wartości: nazwa widżetu, właściwość i kolejność, połączone z elementem "_" `sort=name_property_order` Dostępne opcje: widżety: `keywords`, `audioEffectskeyframeslabelssentimentsemotions`, `scenes`, `namedEntities` i .`spokenLanguage` właściwość: `startTime`, , `seenDurationendTime`, `name` i `ID`. order: asc i desc. Przykład: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` renderuje etykiety posortowane według identyfikatora w kolejności rosnącej i słowa kluczowe posortowane według nazwy w kolejności malejącej.
`location`		Parametr `location` musi być uwzględniony w linkach osadzonych. Zobacz , jak uzyskać nazwę regionu. Jeśli twoje konto jest w wersji zapoznawczej, `trial` element powinien być używany dla wartości lokalizacji. `trial` jest wartością domyślną parametru `location` .

Widżet Odtwarzacz umożliwia przesyłanie strumieniowe wideo przy użyciu adaptacyjnej szybkości transmisji bitów. Widżet Odtwarzacz obsługuje następujące opcjonalne parametry adresu URL.

Nazwisko	Definicja	opis
`t`	Sekundy od początku	Sprawia, że gracz zaczyna grać od określonego punktu czasu. Przykład: `t=60`.
`captions`	Kod języka /Tablica kodu języka	Pobiera podpis w określonym języku podczas ładowania widżetu, aby był dostępny w menu Podpisy . Przykład: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Wartość logiczna	Powoduje załadowanie już włączonych napisów. Przykład: `showCaptions=true`.
`type`		Aktywuje skórę odtwarzacza audio (część wideo jest usuwana). Przykład: `type=audio`.
`autoplay`	Wartość logiczna	Wskazuje, czy odtwarzacz powinien rozpocząć odtwarzanie wideo po załadowaniu. Domyślna wartość to `true`. Przykład: `autoplay=false`.
`language`/`locale`	Kod języka	Steruje językiem odtwarzacza. Domyślna wartość to `en-US`. Przykład: `language=de-DE`.
`location`		Parametr `location` musi być uwzględniony w linkach osadzonych. Zobacz , jak uzyskać nazwę regionu. Jeśli twoje konto jest w wersji zapoznawczej, `trial` element powinien być używany dla wartości lokalizacji. `trial` jest wartością domyślną parametru `location` .
`boundingBoxes`	Tablica pól ograniczenia. Opcje: osoby (twarze), obserwowane osoby i wykryte obiekty. Wartości powinny być oddzielone przecinkiem (",").	Określa opcję ustawiania pól ograniczenia na/wył. podczas osadzania odtwarzacza. Wszystkie wymienione opcje zostaną włączone. Przykład: `boundingBoxes=observedPeople,people,detectedObjects` Wartość domyślna to `boundingBoxes=observedPeople,detectedObjects` (włączone są tylko obserwowane osoby i wykryte obiekty ograniczenia).

Możesz użyć widżetu Edytor, aby utworzyć nowe projekty i zarządzać szczegółowymi informacjami wideo. Widżet Edytora obsługuje następujące opcjonalne parametry adresu URL.

Nazwisko	Definicja	opis
`accessToken`^*	String	Zapewnia dostęp do filmów wideo, które znajdują się tylko na koncie używanym do osadzania widżetu. Widżet Edytora wymaga parametru `accessToken` .
`language`	Kod języka	Steruje językiem odtwarzacza. Domyślna wartość to `en-US`. Przykład: `language=de-DE`.
`locale`	Krótki kod języka	Steruje językiem szczegółowych informacji. Domyślna wartość to `en`. Przykład: `language=de`.
`location`		Parametr `location` musi być uwzględniony w linkach osadzonych. Zobacz , jak uzyskać nazwę regionu. Jeśli twoje konto jest w wersji zapoznawczej, `trial` element powinien być używany dla wartości lokalizacji. `trial` jest wartością domyślną parametru `location` .

^*Właściciel powinien zapewnić accessToken ostrożność.

Osadzanie klipów wideo

W tej sekcji omówiono osadzanie filmów wideo przy użyciu witryny internetowej lub ręcznie tworząc adres URL w aplikacjach.

Parametr location musi być uwzględniony w linkach osadzonych. Zobacz , jak uzyskać nazwę regionu. Jeśli twoje konto jest w wersji zapoznawczej, trial element powinien być używany dla wartości lokalizacji. trial jest wartością domyślną parametru location . Na przykład: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Środowisko witryny internetowej

Aby osadzić klip wideo, użyj witryny internetowej zgodnie z poniższym opisem:

Zaloguj się do witryny internetowej usługi Azure AI Video Indexer .
Wybierz wideo, z którym chcesz pracować, i naciśnij przycisk Odtwórz.
Wybierz żądany typ widżetu (szczegółowe informacje, odtwarzacz lub edytor).
Kliknij </> osadź.
Skopiuj kod osadzania (zostanie wyświetlony w oknie dialogowym Kopiowanie osadzonego kodu w oknie dialogowym Udostępnianie i osadzanie ).
Dodaj kod do aplikacji.

Uwaga

Udostępnianie linku dla widżetu Player lub Insights będzie zawierać token dostępu i przyznać uprawnienia tylko do odczytu twojemu kontu.

Ręczne składanie adresu URL

Publiczne filmy wideo

Publiczne klipy wideo można osadzić w następujący sposób:

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

Prywatne filmy wideo

Aby osadzić prywatne wideo, musisz przekazać token dostępu (użyj polecenia Pobierz token dostępu wideo w atrybucie src elementu iframe:

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

Udostępnianie możliwości edytowania szczegółowych informacji

Aby zapewnić możliwości edytowania szczegółowych informacji w osadzonym widżecie, należy przekazać token dostępu zawierający uprawnienia do edycji. Użyj polecenia Get Video Access Token with &allowEdit=true.

Interakcje z widżetami

Widżet Szczegółowe informacje może wchodzić w interakcję z wideo w aplikacji. W tej sekcji pokazano, jak zrealizować taką interakcję.

Przegląd przepływu

Podczas edytowania transkrypcji następuje następujący przepływ:

Transkrypcja jest edytowana na osi czasu.
Usługa Azure AI Video Indexer pobiera te aktualizacje i zapisuje je w pliku z edycji transkrypcji w modelu językowym.
Podpisy są aktualizowane:
- Jeśli używasz widżetu odtwarzacza usługi Azure AI Video Indexer — zostanie on automatycznie zaktualizowany.
- Jeśli używasz odtwarzacza zewnętrznego — otrzymujesz nowy plik podpisów, wywołując wywołanie Pobierz podpisy wideo.

Komunikacja między źródłami

Aby pobrać widżety usługi Azure AI Video Indexer do komunikowania się z innymi składnikami:

Używa metody postMessageHTML5 komunikacji między źródłami.
weryfikuje komunikaty w źródle videoIndexer.ai.

Jeśli implementujesz własny kod odtwarzacza i integrujesz się z widżetami szczegółowych informacji, twoim zadaniem jest zweryfikowanie źródła komunikatu pochodzącego z VideoIndexer.ai.

Osadzanie widżetów w aplikacji lub blogu (zalecane)

W tej sekcji pokazano, jak osiągnąć interakcję między dwoma widżetami usługi Azure AI Video Indexer, dzięki czemu gdy użytkownik wybierze kontrolkę wglądu w aplikację, gracz przejdzie do odpowiedniego momentu.

Skopiuj kod osadzania widżetu Player.
Skopiuj kod osadzania szczegółowych informacji.
Dodaj plik mediatora do obsługi komunikacji między dwoma widżetami:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Teraz, gdy użytkownik wybierze kontrolkę wglądu w aplikację, gracz przejdzie do odpowiedniego momentu.

Aby uzyskać więcej informacji, zobacz pokaz usługi Azure AI Video Indexer — osadzanie obu widżetów.

Jeśli używasz odtwarzacza wideo innego niż Odtwarzacz video Indexer, musisz ręcznie manipulować odtwarzaczem wideo, aby osiągnąć komunikację.

Wstaw odtwarzacz wideo.

Na przykład standardowy odtwarzacz HTML5:

<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>

Osadź widżet Szczegółowych informacji.

Zaimplementuj komunikację dla odtwarzacza z nasłuchiwaniem w oczekiwaniu na zdarzenie „message”. Na przykład:

<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>

Aby uzyskać więcej informacji, zobacz pokaz usługi Video Indexer Player + VI Insights.

Dostosowywanie osadzalnych widżetów

Możesz wybrać żądane typy szczegółowych informacji. W tym celu określ je jako wartość następującego parametru adresu URL, który został dodany do kodu osadzania, który otrzymasz (z interfejsu API lub z witryny internetowej usługi Azure AI Video Indexer): &widgets=<list of wanted widgets> .

Możliwe wartości są wymienione tutaj.

Jeśli na przykład chcesz osadzić widżet zawierający tylko informacje o osobach i słowach kluczowych, adres URL osadzania elementu iframe będzie wyglądać następująco:

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

Tytuł okna elementu iframe można również dostosować, podając &title=<YourTitle> adres URL elementu iframe. (Dostosowuje wartość HTML <title> ).

Jeśli na przykład chcesz nadać okno elementu iframe tytuł "MyInsights", adres URL będzie wyglądać następująco:

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

Ta opcja ma zastosowanie tylko w przypadkach, gdy trzeba otworzyć szczegółowe informacje w nowym oknie.

Jeśli osadzasz odtwarzacz usługi Azure AI Video Indexer, możesz wybrać rozmiar odtwarzacza, określając rozmiar elementu iframe.

Na przykład:

> [!VIDEO https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/]>/<videoId>/" frameborder="0" allowfullscreen />

Domyślnie odtwarzacz usługi Azure AI Video Indexer automatycznie wygenerował napisy, które są oparte na transkrypcji wideo. Transkrypcja jest wyodrębniona z wideo przy użyciu języka źródłowego wybranego podczas przekazywania wideo.

Jeśli chcesz osadzić przy użyciu innego języka, możesz dodać &captions=<Language Code> go do adresu URL odtwarzacza osadzania. Jeśli chcesz domyślnie wyświetlić podpisy, możesz przekazać polecenie &showCaptions=true.

Adres URL osadzania będzie wyglądać następująco:

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

Autoodtwarzanie

Domyślnie odtwarzacz zacznie odtwarzać wideo. Nie można wybrać, przekazując &autoplay=false do poprzedniego adresu URL osadzania.

Przykłady kodu

Zobacz repozytorium przykładów kodu, które zawiera przykłady dla interfejsu API i widżetów usługi Azure AI Video Indexer:

Plik/folder	opis
`control-vi-embedded-player`	Osadź odtwarzacz VI i steruj nim spoza.
`custom-index-location`	Osadzanie szczegółowych informacji VI z niestandardowej lokalizacji zewnętrznej (może być klientem obiektu blob).
`embed-both-insights`	Podstawowe użycie funkcji VI Insights zarówno odtwarzacza, jak i szczegółowych informacji.
`customize-the-widgets`	Osadź widżety VI z dostosowanymi opcjami.
`embed-both-widgets`	Osadź odtwarzacz VI i szczegółowe informacje i komunikują się między nimi.
`url-generator`	Generuje niestandardowy adres URL osadzania widżetów na podstawie opcji określonych przez użytkownika.
`html5-player`	Osadź szczegółowe informacje VI przy użyciu domyślnego odtwarzacza wideo HTML5.

Obsługiwane przeglądarki

Aby uzyskać więcej informacji, zobacz obsługiwane przeglądarki.

Osadzanie i dostosowywanie widżetów usługi Azure AI Video Indexer w aplikacji przy użyciu pakietu npmjs

Korzystając z naszego pakietu @azure/video-analyzer-for-media-widgets , możesz dodać widżety szczegółowych informacji do aplikacji i dostosować je zgodnie z potrzebami.

Zamiast dodawać element iframe w celu osadzenia widżetu szczegółowych informacji, dzięki temu nowemu pakietowi można łatwo osadzać i komunikować się między naszymi widżetami. Dostosowywanie widżetu jest obsługiwane tylko w tym pakiecie — wszystko w jednym miejscu.

Aby uzyskać więcej informacji, zobacz naszą oficjalną witrynę GitHub.

Zapoznaj się również z witryną Azure AI Video Indexer CodePen.

Udostępnij za pośrednictwem

Osadzanie widżetów usługi Azure AI Video Indexer w aplikacjach

Typy widżetów

Widżet szczegółowych informacji

Widżet Player

Widżet edytora

Osadzanie klipów wideo

Środowisko witryny internetowej

Ręczne składanie adresu URL

Publiczne filmy wideo

Prywatne filmy wideo

Udostępnianie możliwości edytowania szczegółowych informacji

Interakcje z widżetami

Przegląd przepływu

Komunikacja między źródłami

Osadzanie widżetów w aplikacji lub blogu (zalecane)

Osadzanie widżetu usługi Azure AI Video Indexer Insights i używanie innego odtwarzacza wideo

Dostosowywanie osadzalnych widżetów

Widżet szczegółowych informacji

Widżet Player

Autoodtwarzanie

Przykłady kodu

Obsługiwane przeglądarki

Osadzanie i dostosowywanie widżetów usługi Azure AI Video Indexer w aplikacji przy użyciu pakietu npmjs

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Osadzanie widżetów usługi Azure AI Video Indexer w aplikacjach

Typy widżetów

Widżet szczegółowych informacji

Widżet Player

Widżet edytora

Osadzanie klipów wideo

Środowisko witryny internetowej

Ręczne składanie adresu URL

Publiczne filmy wideo

Prywatne filmy wideo

Udostępnianie możliwości edytowania szczegółowych informacji

Interakcje z widżetami

Przegląd przepływu

Komunikacja między źródłami

Osadzanie widżetów w aplikacji lub blogu (zalecane)

Osadzanie widżetu usługi Azure AI Video Indexer Insights i używanie innego odtwarzacza wideo

Dostosowywanie osadzalnych widżetów

Widżet szczegółowych informacji

Widżet Player

Autoodtwarzanie

Przykłady kodu

Obsługiwane przeglądarki

Osadzanie i dostosowywanie widżetów usługi Azure AI Video Indexer w aplikacji przy użyciu pakietu npmjs

Powiązana zawartość

Opinia

Dodatkowe zasoby