Menyematkan widget Azure AI Video Indexer di aplikasi Anda

Artikel
03/01/2024

Penting

Karena pengumuman penghentian Azure Media Services, Azure AI Video Indexer mengumumkan penyesuaian fitur Azure AI Video Indexer. Lihat Perubahan yang terkait dengan penghentian Azure Media Service (AMS) untuk memahami apa artinya ini untuk akun Azure AI Video Indexer Anda. Lihat panduan Mempersiapkan penghentian AMS: Pembaruan VI dan migrasi.

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 dipisahkan oleh koma	Memungkinkan Anda mengontrol wawasan yang ingin di-render. Contoh: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` hanya merender wawasan UI orang dan kata kunci. Opsi yang tersedia: `people`, , `audioEffectskeywords`, `labels`, `sentiments`, `emotions`, `topics`, `keyframes`, `transcript`, `ocr`, `speakers`, `scenes`, `spokenLanguage`, `namedEntitiesobservedPeople`, . `detectedObjects`
`controls`	String dipisahkan oleh koma	Memungkinkan Anda mengontrol wawasan 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 menurut kata "Azure".
`sort`	String dipisahkan oleh koma	Memungkinkan Anda mengontrol pengurutan wawasan. Setiap sortir terdiri dari 3 nilai: nama widget, properti, dan urutan, terhubung dengan '_' `sort=name_property_order` Opsi yang tersedia: widget: `keywords`, , `audioEffectslabels`, `sentiments`, `emotions`, `keyframes`, `scenes`, `namedEntities` dan `spokenLanguage`. properti: `startTime`, `endTime`, `seenDuration`, `name` dan `ID`. urutan: asc dan desc. 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 menurut.
`location`		`location` Parameter harus disertakan dalam tautan yang disematkan, lihat cara mendapatkan nama wilayah Anda. Jika akun Anda berada di dalam pratinjau, `trial` akun tersebut 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`.
`language`/`locale`	Sebuah kode bahasa	Mengontrol bahasa pemutar. Nilai defaultnya adalah `en-US`. Contoh: `language=de-DE`.
`location`		`location` Parameter harus disertakan dalam tautan yang disematkan, lihat cara mendapatkan nama wilayah Anda. Jika akun Anda berada di dalam pratinjau, `trial` akun tersebut harus digunakan untuk nilai lokasi. `trial` adalah nilai default untuk `location`.
`boundingBoxes`	Array kotak pembatas. Opsi: orang (wajah), orang yang diamati, dan objek yang terdeteksi. Nilai harus dipisahkan oleh koma (",").	Mengontrol opsi untuk mengatur kotak pembatas aktif/nonaktif saat menyematkan pemutar. Semua opsi yang disebutkan akan 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 wawasan. Nilai defaultnya adalah `en`. Contoh: `language=de`.
`location`		`location` Parameter harus disertakan dalam tautan yang disematkan, lihat cara mendapatkan nama wilayah Anda. Jika akun Anda berada di dalam pratinjau, `trial` akun tersebut 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.

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

Pengalaman situs web

Untuk menyematkan video, gunakan situs web seperti yang dijelaskan di bawah ini:

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).
Klik </> Sematkan.
Salin kode semat (muncul di Salin kode yang disematkan dalam dialog Berbagi & Sematkan).
Tambahkan kode ke aplikasi Anda.

Catatan

Berbagi tautan untuk widget Pemutar atau Wawasan akan memasukkan 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 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 tersebut diperbarui secara otomatis.
- Jika Anda menggunakan pemutar eksternal - Anda mendapatkan pengguna file atas keterangan baru panggilan Dapatkan keterangan 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 di seluruh VideoIndexer.ai asalnya.

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

Menyematkan widget di aplikasi atau blog Anda (disarankan)

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

Salin kode semat widget Pemutar.
Salin kode semat Insights.
Tambahkan file Mediator untuk menangani komunikasi antara kedua widget:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Sekarang, ketika pengguna memilih kontrol wawasan 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="//breakdown.blob.core.windows.net/public/Microsoft%20HoloLens-%20RoboRaid.mp4" type="video/mp4" /> 
   Your browser does not support the video tag.
</video>

Sematkan widget Insights.

Terapkan komunikasi untuk pemutar Anda dengan mendengarkan acara "pesan". Misalnya:

<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 melakukan ini, tentukan sebagai nilai ke parameter URL berikut yang ditambahkan ke kode semat 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 terdiri atas wawasan orang dan kata kunci, URL semat iframe akan terlihat seperti ini:

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 jendela iframe Anda dengan judul "MyInsights", URL akan terlihat seperti ini:

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.

Misalnya:

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

Secara default, pemutar Azure AI Video Indexer memiliki keterangan tertutup yang dibuat secara otomatis 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 semat kemudian akan terlihat seperti ini:

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

Putar Otomatis

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

Sampel kode

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

File/folder	Deskripsi
`control-vi-embedded-player`	Sematkan Vi Player dan kontrol dari luar.
`custom-index-location`	Sematkan VI Insights dari lokasi eksternal kustom (bisa menjadi blob pelanggan).
`embed-both-insights`	Penggunaan dasar VI Insights baik pemutar 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 widget didasarkan pada 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 dalam paket ini - semuanya di satu tempat.

Untuk informasi selengkapnya, lihat GitHub resmi kami.

Untuk informasi tentang cara melihat dan mengedit wawasan Azure AI Video Indexer, lihat Menampilkan dan mengedit wawasan Azure AI Video Indexer.

Selain itu, lihat Azure AI Video Indexer CodePen.

Menyematkan widget Azure AI Video Indexer di aplikasi Anda

Jenis widget

Widget insight

Widget pemutar

Widget Editor

Menyematkan video

Pengalaman situs web

Menyatukan URL secara manual

Video publik

Video pribadi

Menyediakan kemampuan wawasan pengeditan

Interaksi widget

Gambaran umum alur

Komunikasi lintas asal

Menyematkan widget di aplikasi atau blog Anda (disarankan)

Sematkan widget Azure AI Video Indexer Insights dan gunakan pemutar video yang berbeda

Menyesuaikan widget yang dapat disematkan

Widget insight

Widget pemutar

Putar Otomatis

Sampel kode

Browser yang didukung

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

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan:

Menyematkan widget Azure AI Video Indexer di aplikasi Anda

Jenis widget

Widget insight

Widget pemutar

Widget Editor

Menyematkan video

Pengalaman situs web

Menyatukan URL secara manual

Video publik

Video pribadi

Menyediakan kemampuan wawasan pengeditan

Interaksi widget

Gambaran umum alur

Komunikasi lintas asal

Menyematkan widget di aplikasi atau blog Anda (disarankan)

Sematkan widget Azure AI Video Indexer Insights dan gunakan pemutar video yang berbeda

Menyesuaikan widget yang dapat disematkan

Widget insight

Widget pemutar

Putar Otomatis

Sampel kode

Browser yang didukung

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

Konten terkait

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: