Menyematkan widget Azure AI Video Indexer di aplikasi Anda

2025-06-21

Artikel ini memperlihatkan bagaimana Anda dapat menyematkan widget Azure AI Video Indexer di aplikasi Anda. Azure AI Video Indexer mendukung penyematan tiga jenis widget ke dalam aplikasi Anda: Insights, Player, dan Editor.

Widget Insight mencakup semua wawasan visual yang diekstrak dari proses pengindeksan video Anda. Widget Insights mendukung parameter URL opsional berikut:

Nama	Definisi	Deskripsi
`widgets`	String-string yang dipisahkan oleh koma	Memungkinkan Anda mengelola wawasan yang ingin ditampilkan. Contoh: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` hanya merender wawasan UI untuk orang dan kata kunci. Opsi yang tersedia: `people`, , `keywordsaudioEffects`, `labels`, `sentiments`, `emotions`, `topics`, `keyframes`, `transcript`, `ocr`, `speakers`, `scenes`, `spokenLanguage`, `observedPeoplenamedEntities`, . `detectedObjects`
`controls`	String-string yang dipisahkan oleh koma	Memungkinkan Anda mengontrol kontrol yang ingin di-render. Contoh: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` hanya merender opsi pencarian dan tombol unduh. Opsi yang tersedia: `search`, `download`, `presets`, `language`.
`language`	Kode bahasa pendek (nama bahasa)	Mengontrol bahasa wawasan. Contoh: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` atau `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Kode bahasa yang pendek	Mengontrol bahasa UI. Nilai defaultnya adalah `en`. Contoh: `locale=de`.
`tab`	Tab yang dipilih secara default	Mengontrol tab Wawasan yang di-render secara default. Contoh: `tab=timeline` merender wawasan dengan tab Garis Waktu yang dipilih.
`search`	string	Memungkinkan Anda mengontrol istilah pencarian awal. Contoh: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` merender wawasan yang difilter oleh kata Azure.
`sort`	String-string yang dipisahkan oleh koma	Memungkinkan Anda mengontrol pengaturan urutan wawasan. Setiap sortir terdiri dari tiga nilai: nama widget, properti, dan urutan, terhubung dengan '_' `sort=name_property_order` Opsi yang tersedia: widget: `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, `scenes`, `namedEntities`, dan `spokenLanguage`. properti: `startTime`, `endTime`, `seenDuration`, `name`, dan `ID`. urutan: menaik dan menurun. Contoh: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` merender label yang diurutkan menurut ID dalam urutan naik dan kata kunci yang diurutkan menurut nama dalam urutan turun.
`location`		Parameter `location` harus disertakan dalam tautan yang disematkan; lihat cara mendapatkan nama wilayah Anda. Jika akun Anda dalam pratinjau, `trial` harus digunakan untuk nilai lokasi. `trial` adalah nilai default untuk `location`.

Anda dapat menggunakan widget Pemutar untuk melakukan streaming video dengan menggunakan laju bit adaptif. Widget Pemutar mendukung parameter URL opsional berikut.

Nama	Definisi	Deskripsi
`t`	Detik dari awal	Membuat pemutar mulai memutar dari titik waktu yang ditentukan. Contoh: `t=60`.
`captions`	Kode bahasa / Array kode bahasa	Mengambil keterangan dalam bahasa yang ditentukan selama pemuatan widget tersedia pada menu Keterangan. Contoh: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Sebuah nilai Boolean	Membuat pemutar dimuat dengan keterangan yang sudah diaktifkan. Contoh: `showCaptions=true`.
`type`		Mengaktifkan skin pemutar audio (bagian video dihapus). Contoh: `type=audio`.
`autoplay`	Sebuah nilai Boolean	Menunjukkan apakah pemutar harus mulai memutar saat video dimuat. Nilai defaultnya adalah `true`. Contoh: `autoplay=false`. Kemampuan untuk menggunakan putar otomatis tunduk pada kebijakan browser web yang digunakan: Firefox, Google Chrome, macOS WebKit
`language`/`locale`	Sebuah kode bahasa	Mengontrol bahasa pemutar. Nilai defaultnya adalah `en-US`. Contoh: `language=de-DE`.
`location`		Parameter `location` harus disertakan dalam tautan yang disematkan; lihat cara mendapatkan nama wilayah Anda. Jika akun Anda dalam pratinjau, `trial` harus digunakan untuk nilai lokasi. `trial` adalah nilai default untuk `location`.
`boundingBoxes`	Deretan kotak pembatas. Opsi: orang (wajah), orang yang diamati, dan objek yang terdeteksi. Pisahkan nilai dengan koma (,).	Mengontrol opsi untuk mengatur kotak pembatas aktif/nonaktif saat menyematkan pemutar. Semua opsi yang disebutkan diaktifkan. Contoh: `boundingBoxes=observedPeople,people,detectedObjects` Nilai default adalah `boundingBoxes=observedPeople,detectedObjects` (hanya orang yang diamati dan kotak pembatas objek yang terdeteksi yang diaktifkan).

Anda dapat menggunakan widget Editor untuk membuat proyek baru dan mengelola wawasan video. Widget Editor mendukung parameter URL opsional berikut.

Nama	Definisi	Deskripsi
`accessToken`^*	string	Menyediakan akses ke video yang hanya ada di akun yang digunakan untuk menyematkan widget. Widget Editor memerlukan parameter `accessToken`.
`language`	Sebuah kode bahasa	Mengontrol bahasa pemutar. Nilai defaultnya adalah `en-US`. Contoh: `language=de-DE`.
`locale`	Kode bahasa yang pendek	Mengontrol bahasa informasi. Nilai defaultnya adalah `en`. Contoh: `language=de`.
`location`		Parameter harus `location` disertakan dalam tautan yang disematkan. Lihat cara mendapatkan nama wilayah Anda. Jika akun Anda dalam pratinjau, `trial` harus digunakan untuk nilai lokasi. `trial` adalah nilai default untuk `location`.

^*Pemilik harus memberikan accessToken dengan hati-hati.

Menyematkan video

Bagian ini membahas penyematan video dengan menggunakan situs web atau dengan merakit URL secara manual ke dalam aplikasi.

Parameter harus location disertakan dalam tautan yang disematkan. Lihat cara mendapatkan nama wilayah Anda. Jika akun Anda dalam pratinjau, trial harus digunakan untuk nilai lokasi. trial adalah nilai default untuk location. Misalnya: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Pengalaman situs web

Untuk menyematkan video, gunakan situs web dengan langkah-langkah berikut.

Masuk ke situs web Azure AI Video Indexer .
Pilih video yang ingin Anda kerjakan dan tekan Putar.
Pilih jenis widget yang Anda inginkan (Insight, Pemutar, atau Editor).
Pilih </> Sematkan.
Salin kode sematan (muncul di Salin kode yang disematkan dalam dialog Bagikan & Sematkan ).
Tambahkan kode ke aplikasi Anda.

Catatan

Berbagi link untuk widget Player atau Insight menyertakan token akses dan memberikan izin baca-saja ke akun Anda.

Menyatukan URL secara manual

Video publik

Anda dapat menyematkan video publik yang menyatukan URL sebagai berikut:

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

Video pribadi

Untuk menyematkan video pribadi, Anda harus melewati token akses (gunakan Dapatkan Token Akses Video di atribut src iframe:

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

Menyediakan kemampuan wawasan pengeditan

Untuk menyediakan kemampuan wawasan pengeditan di widget yang disematkan, Anda harus melewati token akses yang mencakup izin pengeditan. Gunakan permintaan API Dapatkan Token Akses Video dengan &allowEdit=true.

Interaksi widget

Widget Insights dapat berinteraksi dengan video di aplikasi Anda. Bagian ini menunjukkan cara mencapai interaksi ini.

Gambaran umum alur

Saat Anda mengedit transkrip, alur berikut ini akan terjadi:

Anda mengedit transkrip di garis waktu.
Azure AI Video Indexer mendapatkan pembaruan ini dan menyimpannya di dari pengeditan transkrip dalam model bahasa.
Keterangan diperbarui:
- Jika Anda menggunakan widget pemutar Azure AI Video Indexer - widget ini akan diperbarui secara otomatis.
- Jika Anda menggunakan pemutar eksternal - Anda mendapatkan pengguna file teks baru dari panggilan API Dapatkan teks video .

Komunikasi lintas asal

Untuk mendapatkan widget Azure AI Video Indexer untuk berkomunikasi dengan komponen lain:

Menggunakan metode HTML5 komunikasi lintas asal postMessage.
Memvalidasi pesan dari asal VideoIndexer.ai.

Anda bertanggung jawab untuk memvalidasi asal pesan yang berasal dari VideoIndexer.ai jika Anda menerapkan kode pemutar Anda sendiri dan mengintegrasikan dengan widget Insights.

Menyematkan widget di aplikasi atau blog Anda (disarankan)

Bagian ini menunjukkan cara mencapai interaksi antara dua widget Azure AI Video Indexer. Saat pengguna memilih kontrol wawasan di aplikasi Anda, pemutar akan melompat ke momen yang relevan.

Salin kode semat widget Pemutar.
Salin kode semat untuk Insights.
Tambahkan file Mediator untuk menangani komunikasi antara kedua widget:
<script src="https://aka.ms/vi-mediator-file"></script>

Sekarang, ketika pengguna memilih kontrol insight di aplikasi Anda, pemutar melompat ke saat yang relevan.

Untuk informasi selengkapnya, lihat Demo Azure AI Video Indexer - Sematkan kedua Widget.

Jika Anda menggunakan pemutar video selain Video Indexer Player, Anda harus memanipulasi pemutar video secara manual untuk mencapai komunikasi.

Sisipkan pemutar video Anda.

Misalnya, pemutar HTML5 standar:

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

Sematkan widget Insights.

Terapkan komunikasi untuk pemain Anda dengan mendengarkan peristiwa "pesan". Contohnya:

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

Untuk informasi selengkapnya, lihat demo Video Indexer Player + VI Insights.

Menyesuaikan widget yang dapat disematkan

Anda dapat memilih jenis wawasan yang Anda inginkan. Untuk melakukannya, tentukan sebagai nilai ke parameter URL berikut. Ini akan ditambahkan ke kode sematan yang Anda dapatkan (dari API atau dari situs web Azure AI Video Indexer ): &widgets=<list of wanted widgets>.

Nilai yang mungkin tercantum di sini.

Misalnya, jika Anda ingin menyematkan widget yang hanya berisi wawasan orang dan kata kunci, URL sematan iframe menyerupai:

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

Judul jendela iframe juga dapat disesuaikan dengan menyediakan &title=<YourTitle> ke URL iframe. (Ini menyesuaikan nilai <title> HTML).

Misalnya, jika Anda ingin memberikan judul MyInsightspada jendela iframe , URL-nya menyerupai:

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

Perhatikan bahwa opsi ini hanya relevan dalam kasus ketika Anda perlu membuka wawasan di jendela baru.

Jika Anda menyematkan pemutar Azure AI Video Indexer, Anda dapat memilih ukuran pemutar dengan menentukan ukuran iframe.

Contohnya:

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

Secara default, pemutar Azure AI Video Indexer secara otomatis menghasilkan teks tertutup yang didasarkan pada transkrip video. Transkrip diekstrak dari video dengan bahasa sumber yang dipilih saat video diunggah.

Jika ingin menyematkan dengan bahasa lain, Anda bisa menambahkan &captions=<Language Code> ke URL semat pemutar. Jika Anda ingin keterangan ditampilkan secara default, Anda dapat meneruskan &showCaptions=true.

URL sematan kemudian menyerupai:

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

Putar Otomatis

Secara default, pemutar mulai memutar video. Anda dapat memilih untuk tidak melakukannya dengan meneruskan &autoplay=false ke URL sematan sebelumnya.

Sampel kode

Lihat repositori sampel kode yang berisi sampel untuk API dan widget Azure AI Video Indexer:

Berkas/Folder	Deskripsi
`control-vi-embedded-player`	Sematkan Vi Player dan kontrol dari luar.
`custom-index-location`	Sematkan VI Insights dari lokasi eksternal kustom (bisa berupa blok data biner pelanggan).
`embed-both-insights`	Penggunaan dasar VI Insights baik pengguna maupun wawasan.
`customize-the-widgets`	Sematkan widget VI dengan opsi yang disesuaikan.
`embed-both-widgets`	Sematkan VI Player dan Insights dan berkomunikasi di antara mereka.
`url-generator`	Menghasilkan URL semat kustom untuk widget berdasarkan opsi yang ditentukan oleh pengguna.
`html5-player`	Sematkan VI Insights dengan pemutar video HTML5 default.

Browser yang didukung

Untuk mengetahui informasi selengkapnya, lihat browser yang didukung.

Menyematkan dan menyesuaikan widget Azure AI Video Indexer di aplikasi Anda menggunakan paket npmjs

Dengan menggunakan paket @azure/video-analyzer-for-media-widgets kami, Anda dapat menambahkan widget insight ke aplikasi Anda dan menyesuaikannya sesuai dengan kebutuhan Anda.

Alih-alih menambahkan elemen iframe untuk menyematkan widget wawasan, dengan paket baru ini Anda dapat dengan mudah menyematkan & berkomunikasi antara widget kami. Menyesuaikan widget hanya didukung oleh paket ini - semuanya tersedia dalam satu tempat.

Untuk informasi selengkapnya, lihat GitHub resmi kami.

Selain itu, lihat Azure AI Video Indexer CodePen.

Bagikan melalui

Menyematkan widget Azure AI Video Indexer di aplikasi Anda

Jenis widget

Widget Insight

Widget Pemain

Widget Editor