Azure video Çözümleyicisi oynatıcı pencere öğesini kullanma

Bu öğreticide, uygulamanız içinde oynatıcı pencere öğesini nasıl kullanacağınızı öğreneceksiniz. Bu kod, kullanıcılarınızın video oynamasını ve bölünmüş bir video dosyasının bölümlerine gözatmasını sağlayan kolay bir embed pencere öğesi. Bunu yapmak için, pencere öğesi eklenmiş bir statik HTML sayfası ve bunun çalışmasını sağlamak için tüm parçalar oluşturacaksınız.

Bu öğreticide şunları yapacaksınız:

  • Belirteç oluşturma
  • Videoları listeleme
  • Video uygulaması kaynağı çalmak için temel URL 'yi al
  • Oynatıcı ile bir sayfa oluşturma
  • Yürütücüye akış uç noktası ve belirteç geçirme

Önkoşullar

Bu öğretici için aşağıdakiler gereklidir:

Video kaynaklarını listeleme

Ardından, video kaynaklarının bir listesini oluşturun. Daha önce kullandığınız hesap uç noktasına bir REST çağrısı yapar ve oluşturduğunuz belirteçle kimlik doğrulaması yaparsınız.

Bir REST API GET isteği göndermenin birçok yolu vardır, ancak bunun için bir JavaScript işlevi kullanacaksınız. Aşağıdaki kod, clientApiEndpointUrl token zaman uyumlu bir istek göndermek için sayfadaki ve alanlarında depoladığınız değerlerle bağlanmış XMLHttpRequest kullanır GET . Daha sonra, videonun ortaya çıkan listesini alır ve videoList sayfada ayarladığınız metin alanında depolar.

function getVideos()
{
    var xhttp = new XMLHttpRequest();
    var getUrl = document.getElementById("clientApiEndpointUrl").value + "/videos?api-version=2021-05-01-preview";
    xhttp.open("GET", getUrl, false);
    xhttp.setRequestHeader("Authorization", "Bearer " + document.getElementById("token").value);
    xhttp.send();
    document.getElementById("videoList").value = xhttp.responseText.toString();
}

Not

clientApiEndPointVe belirteci, belirteç oluşturmadan toplanır

Video Çözümleyicisi oynatıcı bileşeni ekleme

Artık bir istemci API uç nokta URL 'SI, bir belirteç ve bir video adı olduğuna göre, Player 'ı sayfaya ekleyebilirsiniz.

  1. Paketini doğrudan sayfanıza ekleyerek oynatıcı modülünün kendisini dahil edin. Uygulamanıza NPM paket yönünü ekleyebilir ya da aşağıdaki şekilde çalışma zamanında dinamik olarak ekleme yapabilirsiniz:
    <script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets"></script>
    
  2. Belgeye bir AVA-Player öğe ekleyin:
    <ava-player width="720px" id="avaPlayer"></ava-player>
    
  3. Sayfada bulunan video Çözümleyicisi oynatıcı pencere öğesinin bağlantısını alın:
    const avaPlayer = document.getElementById("avaPlayer");
    
  4. Oynatıcıyı, sahip olduğunuz değerlerle yapılandırmak için, burada gösterildiği gibi bunları bir nesne olarak ayarlamanız gerekecektir:
    avaPlayer.configure( {
       token: document.getElementById("token").value,
       clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
       videoName: document.getElementById("videoName").value
    } );
    
  5. Başlamak için videoyu Yürütücüye yükleyin.
    avaPlayer.load();
    

Bölge çekmece bileşeni ekleme

  1. Belgeye bir AVA-Zone-çekmece öğesi ekleyin:
    <ava-zone-drawer width="720px" id="zoneDrawer"></ava-zone-drawer>
    
  2. Sayfada bulunan video Çözümleyicisi bölge çekmecesine bir bağlantı alın:
    const zoneDrawer = document.getElementById("zoneDrawer");
    
  3. Bölge çekmecesini yürütücüye yükleyin:
    zoneDrawer.load();
    
  4. Bölge oluşturup kaydetmek için buraya olay dinleyicileri eklemeniz gerekir:
    zoneDrawer.addEventListener('ZONE_DRAWER_ADDED_ZONE', (event) => {
             console.log(event);
             document.getElementById("zoneList").value = JSON.stringify(event.detail);
         });
    
         zoneDrawer.addEventListener('ZONE_DRAWER_SAVE', (event) => {
             console.log(event);
             document.getElementById("zoneList").value = JSON.stringify(event.detail);
         });
    

Hepsini bir araya getirin

Önceki Web öğelerini birleştiren aşağıdaki statik HTML sayfasını alırsınız. Bu sayfa, bir videoyu görüntülemek için bir hesap uç noktası ve belirteci kullanmanıza olanak sağlar.

<html>
<head>
<title>Video Analyzer Player Widget Demo</title>
</head>
<script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets"></script>
<body>
<script>
    function getVideos()
    {
        var xhttp = new XMLHttpRequest();
        var getUrl = document.getElementById("clientApiEndpointUrl").value + "/videos?api-version=2021-05-01-preview";
        xhttp.open("GET", getUrl, false);
        xhttp.setRequestHeader("Authorization", "Bearer " + document.getElementById("token").value);
        xhttp.send();
        document.getElementById("videoList").value = xhttp.responseText.toString();
    }
    function playVideo() {
        const avaPlayer = document.getElementById("avaPlayer");
        avaPlayer.configure( {
            token: document.getElementById("token").value,
            clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
            videoName: document.getElementById("videoName").value
        } );
        avaPlayer.load();
    
        const zoneDrawer = document.getElementById("zoneDrawer");
        zoneDrawer.load();

        zoneDrawer.addEventListener('ZONE_DRAWER_ADDED_ZONE', (event) => {
            console.log(event);
            document.getElementById("zoneList").value = JSON.stringify(event.detail);
        });

        zoneDrawer.addEventListener('ZONE_DRAWER_SAVE', (event) => {
            console.log(event);
            document.getElementById("zoneList").value = JSON.stringify(event.detail);
        });
    }
</script>
Client API endpoint URL: <input type="text" id="clientApiEndpointUrl" /><br><br>
Token: <input type="text" id="token" /><br><br>
<button type="submit" onclick="getVideos()">Get Videos</button><br><br>
<textarea rows="20" cols="100" id="videoList"></textarea><br><br>
Video name: <input type="text" id="videoName" /><br><br>
<button type="submit" onclick="playVideo()">Play Video</button><br><br>
<textarea rows="5" cols="100" id="zoneList"></textarea><br><br>
<ava-zone-drawer width="720px" id="zoneDrawer">
    <ava-player id="avaPlayer"></ava-player>
</ava-zone-drawer>
</body>
</html>

Sayfayı barındırın

Bu sayfayı yerel olarak test edebilirsiniz, ancak barındırılan bir sürümü test etmek isteyebilirsiniz. bir sayfayı barındırmak için hızlı bir yol yoksa, Azure Depolama ile statik web siteleri kullanarak bunun nasıl yapılacağı hakkında yönergeler bulabilirsiniz. Aşağıdaki adımlar, Bu daha kapsamlı yönergelerin dahadar bir sürümüdür. Bu öğreticide kullanmakta olduğunuz dosyalar için adımlar güncelleştirilir.

  1. Depolama hesabı oluşturma.
  2. Veri yönetimi altında statik Web sitesi' ni seçin.
  3. Depolama hesabında statik Web sitesini etkinleştirin.
  4. Dizin belgesi adı için index.html girin.
  5. Hata belgesi yolu için 404.html girin.
  6. Kaydet’i seçin.
  7. Gösteren birincil uç noktayı unutmayın. Bu Web siteniz olacaktır.
  8. Birincil uç noktanın üzerinde $Web' yi seçin.
  9. üstteki Upload düğmesini kullanarak statik HTML sayfanızı index.html olarak yükleyin. '

Video oynatma

Artık sayfayı barındırdığınıza göre buraya gidip video oynatma adımlarını izleyin.

  1. ISTEMCI API uç nokta URL 'si ve belirteç değerlerini girin.
  2. Videoları al' ı seçin.
  3. Video listesinden bir video adı seçin ve video adı alanına girin.
  4. Videoyu oynat' ı seçin.

Ek ayrıntılar

Aşağıdaki bölümlerde, dikkat edilmesi için bazı önemli ek ayrıntılar yer verilmiştir.

Erişim belirtecini Yenile

Oynatıcı, kayıttan yürütme yetkilendirme belirtecini almak için daha önce oluşturduğunuz erişim belirtecini kullanır. Belirteçlerin süreleri düzenli olarak doluyor ve yenilenmesi gerekir. Yeni bir tane oluşturduktan sonra Player 'ın erişim belirtecini yenilemenin iki yolu vardır:

  • Pencere öğesi metodu etkin olarak çağrılıyor setAccessToken .
    avaPlayer.setAccessToken('<NEW-ACCESS-TOKEN>');
    
  • TOKEN_EXPIREDBu olayı dinleyerek olay üzerinde hareket eder.
    avaPlayer.addEventListener(PlayerEvents.TOKEN_EXPIRED, () => {
        avaPlayer.setAccessToken('<YOUR-NEW-TOKEN>');
    });
    

TOKEN_EXPIREDBelirtecin süresi dolmadan önce olay 5 saniye olur. Bir olay dinleyicisi ayarlıyorsanız, load oynatıcı pencere öğesinde işlevi çağırmadan önce bunu yapmalısınız.

Yapılandırma ayrıntıları

Yukarıdaki oyuncu basit bir yapılandırmaya sahiptir, ancak yapılandırma değerleri için daha geniş bir seçenek kullanabilirsiniz. Desteklenen alanlar şunlardır:

Ad Tür Description
token dize Pencere öğesi için JWT belirtecinizin
videoName string Video kaynağının adı
clientApiEndpointUrl string İstemci API 'si için uç nokta URL 'SI

Kodu uygulamanıza yüklemek için alternatif yollar

Uygulamanıza kodu almak için kullanılan paket bir NPM paketidir. Önceki örnekte, son sürüm çalışma zamanında doğrudan depodan yüklendi. Ancak aşağıdakileri kullanarak paketi indirebilir ve yerel olarak yükleyebilirsiniz:

npm install @azure/video-analyzer/widgets

Ya da bunu TypeScript için bunu kullanarak uygulama kodunuzda içeri aktarabilirsiniz:

import { Player } from '@azure/video-analyzer-widgets';
import { ZoneDrawer } from '@azure/video-analyzer-widgets';

Dinamik olarak bir oynatıcı pencere öğesi oluşturmak istiyorsanız bunu JavaScript için kullanabilirsiniz:

<script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets@latest/dist/global.min.js"></script>

İçeri aktarmak için bu yöntemi kullanırsanız, içeri aktarma tamamlandıktan sonra program aracılığıyla bölge çekmecesini ve oynatıcı nesnelerini oluşturmanız gerekecektir. Yukarıdaki örnekte, HTML etiketini kullanarak modülü sayfaya eklediniz ava-player . Kod aracılığıyla bir bölge çekmece nesnesi ve bir oynatıcı nesnesi oluşturmak için, JavaScript 'de aşağıdakileri yapabilirsiniz:

const zoneDrawer = new window.ava.widgets.zoneDrawer();
document.firstElementChild.appendChild(zoneDrawer);
const playerWidget = new window.ava.widgets.player();
zoneDrawer.appendChild(playerWidget);

Veya, TypeScript ' de:

const avaPlayer = new Player();
const zoneDrawer = new ZoneDrawer();

Daha sonra bunu HTML 'ye eklemeniz gerekir:

document.firstElementChild.appendChild(zoneDrawer);
zoneDrawer.appendChild(playerWidget);

Sonraki adımlar