Condividi tramite

Scrittura di plug-in per Azure Media Player

  • Articolo

Un plug-in è JavaScript scritto per estendere o migliorare il lettore. È possibile scrivere plug-in che modificano l'aspetto di Azure Media Player, la relativa funzionalità o anche l'interfaccia con altri servizi. È possibile eseguire questa operazione in due semplici passaggi:

Passaggio 1

Scrivere JavaScript in una funzione come segue:


    (function () {
        amp.plugin('yourPluginName', function (options) {
        var myPlayer = this;
           myPlayer.addEventListener(amp.eventName.ready, function () {
        console.log("player is ready!");
            });
        });
    }).call(this);

È possibile scrivere il codice direttamente nella pagina HTML all'interno <script> di tag o in un file JavaScript esterno. Se si esegue questa operazione, assicurarsi di includere il file JavaScript nella <head> pagina HTML dopo lo script AMP.

Esempio:

    <!--*****START OF Azure Media Player Scripts*****-->
    <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <!--*****END OF Azure Media Player Scripts*****-->
    <!--Add Plugins-->
    <script src="yourPluginName.js"></script>

Passaggio 2

Inizializzare il plug-in con JavaScript in uno dei due modi seguenti:

Metodo 1:

    var myOptions = {
        autoplay: true,
        controls: true,
        width: "640",
        height: "400",
        poster: "",
        plugins: {
            yourPluginName: {
                [your plugin options]: [example options]
           }
        }
    };
    var myPlayer = amp([videotag id], myOptions);

Metodo 2:

    var video = amp([videotag id]);
    video.yourPluginName({[your plugins option]: [example option]});

Le opzioni del plug-in non sono necessarie, incluse queste solo consentono agli sviluppatori di usare il plug-in per configurarne il comportamento senza dover modificare il codice sorgente.

Per ispirazione e altri esempi sulla creazione di un plug-in, vedere la nostra raccolta

Nota

Il codice plug-in modifica dinamicamente gli elementi nel DOM durante la durata dell'esperienza del lettore del visualizzatore, non apporta mai modifiche permanenti al codice sorgente del lettore. Questa è la posizione in cui viene utile una comprensione degli strumenti di sviluppo del browser. Ad esempio, se si vuole modificare l'aspetto di un elemento nel lettore, è possibile trovare il relativo elemento HTML in base al nome della classe e quindi aggiungere o modificare gli attributi da lì. Ecco una risorsa ideale per modificare gli attributi HTML.

Plug-in integrati

Attualmente sono presenti due plug-in bak in AMP: il time-tip e i tasti di scelta rapida. Questi plug-in sono stati originariamente sviluppati per essere plug-in modulari per il lettore, ma ora sono inclusi nel codice sorgente del lettore.