# SDK IVS Player: integrazione di Video.js In questo documento sono descritte le funzioni più importanti disponibili nel lettore Video.js di Amazon Interactive Video Service (IVS). **Ultima versione dell'integrazione del lettore Video.js:** 1.52.0 ([Note di rilascio](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#may14-26-player-web-ll)) ## Nozioni di base Il supporto Amazon IVS per Video.js viene implementato tramite la [tecnologia](https://videojs.com/guides/tech/) di Video.js. Forniamo supporto attraverso tag di script e attraverso un modulo npm. Amazon IVS supporta le versioni Video.js 7.6.6 e 7\* e 8\* successive. Tenere presente che quando si crea un'istanza del lettore, [l'opzione sources](https://videojs.com/guides/options/#sources) di Video.js non è supportata. Invece, è possibile creare un'istanza del lettore normalmente e chiamare la funzione `src()` di Video.js. Se la riproduzione automatica è abilitata, il flusso inizierà la riproduzione; in caso contrario, utilizzare `play()` per avviare la riproduzione. ### Demo La seguente demo live mostra come utilizzare l'integrazione di Video.js con i tag script dalla nostra rete di distribuzione di contenuti (CDN): [Integrazione del lettore Video.js per Amazon IVS](https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276). ### Configurazione con tag di script Per configurare la tecnologia Amazon IVS utilizzando il tag `script`: 1. Includere il seguente tag (per l'ultima versione dell'integrazione del lettore). ``` ``` 1. Registrare la tecnologia utilizzando la funzione `registerIVSTech`: ``` registerIVSTech(videojs); ``` dove `videojs` è l'oggetto fornito da Video.js. 1. Quando si crea un'istanza del lettore, aggiungere `AmazonIVS`come prima tecnologia nell'opzione `techOrder`. Quando si crea un'istanza del lettore, [l'opzione sources](https://videojs.com/guides/options/#sources) di Video.js non è supportata. Invece, per impostare l'origine si può creare normalmente un'istanza del lettore e poi richiamare la funzione `src()` di Video.js su di essa. Se la riproduzione automatica è abilitata, il flusso inizierà la riproduzione; in caso contrario, utilizza `play()` per avviare la riproduzione. ### Codice di esempio In questo esempio, `PLAYBACK_URL` è il flusso di origine che si desidera caricare. Nell'esempio viene utilizzata la versione più recente del lettore Amazon IVS. ```

``` ### Configurazione con NPM Per utilizzare il lettore Amazon IVS tramite npm: 1. Installare il pacchetto npm [video.js](https://www.npmjs.com/package/video.js/v/7.6.6) o assicurarsi che il progetto abbia qualche altro accesso alla libreria Video.js. 1. Installare il pacchetto npm `amazon-ivs-player`: ``` npm install amazon-ivs-player ``` 1. Una volta pronti a registrare la tecnologia Amazon IVS, importare la funzione `registerIVSTech`: ``` import { registerIVSTech } from 'amazon-ivs-player'; ``` 1. Registra la tecnologia utilizzando la funzione `registerIVSTech`: ``` registerIVSTech(videojs, options); ``` dove: + `videojs` è l'oggetto fornito da Video.js. + `options` sono le opzioni per il livello tecnico di Amazon IVS. Le opzioni supportate sono: + `wasmWorker`: l'URL in cui è ospitato il file `amazon-ivs-wasmworker.min.js`. + `wasmBinary`: l'URL in cui è ospitato il file `amazon-ivs-wasmworker.min.wasm`. I file worker si trovano nella cartella `node_modules/` in `amazon-ivs-player/dist/`. Per utilizzare il lettore IVS, questi file dovranno essere disponibili. 1. Quando si crea un'istanza del lettore, aggiungere `AmazonIVS` come prima tecnologia nell'opzione `techOrder`: ``` const player = videojs('videojs-player', { techOrder: ["AmazonIVS"] }); ``` ### TypeScript Se si sta usando TypeScript, il nostro pacchetto npm include i seguenti tipi da poter importare e utilizzare. + `VideoJSEvents`, che descrive la struttura restituita da `getIVSEvents()`. + `VideoJSIVSTech`, che descrive l'interfaccia di un'istanza del lettore che utilizza la tecnologia `AmazonIVS`. Ciò può [aggiungersi](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) al tipo `VideoJsPlayer` utilizzato dal pacchetto npm [@types/video.js](https://www.npmjs.com/package/@types/video.js). + `TechOptions`, che descrive l'interfaccia che definisce le opzioni di configurazione che è possibile inviare a `registerIVSTech()`. Per ulteriori informazioni su questi tipi, consultare [SDK Amazon IVS Player: Documentazione di riferimento per il Web](https://aws.github.io/amazon-ivs-player-docs/1.52.0/web/). ## Eventi Per ascoltare gli eventi Video.js standard, utilizzare la funzione [on](https://docs.videojs.com/docs/api/player.html#Methodson) del lettore Video.js. Per ascoltare gli eventi specifici di Amazon IVS, aggiungere e rimuovere i listener di eventi sul lettore Web Amazon IVS: ``` player.getIVSPlayer().addEventListener(event, callback); player.getIVSPlayer().removeEventListener(event, callback); ``` dove `callback` è un callback definito e `event` è una delle seguenti opzioni: `PlayerEventType` o `PlayerState`. Per ulteriori informazioni sugli eventi, consultare [SDK Amazon IVS Player: Documentazione di riferimento per il Web](https://aws.github.io/amazon-ivs-player-docs/1.52.0/web/). ## Errori Per errori generali Video.js, ascoltare l'evento `error` generico sul lettore: ``` player.on("error", callback); ``` Per gli errori specifici di Amazon IVS, ascoltare il lettore Amazon IVS per i propri errori: ``` let playerEvent = player.getIVSEvents().PlayerEventType; player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback); ``` Il callback riceverà un oggetto con i seguenti campi: | Campo | Descrizione | | --- | --- | | `type` | Il tipo di errore. Corrisponde agli eventi `ErrorType`. Per ulteriori informazioni, consultare [SDK Amazon IVS Player: Documentazione di riferimento per il Web](https://aws.github.io/amazon-ivs-player-docs/1.52.0/web/). | | `code` | Il codice di errore. | | `source` | L'origine dell'errore. | | `message` | Un messaggio di errore leggibile dall'utente. | ## Plug-in Forniamo un plugin che crea un interruttore dell'interfaccia utente per le qualità disponibili. Per poter essere utilizzato, questo plugin deve essere caricato includendo il file `amazon-ivs-quality-plugin.min.js` se si sta usando la nostra tecnologia tramite il seguente tag `script` (per l'ultima versione di lettore IVS): ``` ``` Se si utilizza npm, importare il `registerIVSQualityPlugin` dal modulo `amazon-ivs-player`: ``` import { registerIVSQualityPlugin } from 'amazon-ivs-player'; ``` Quindi, una volta creata un'istanza del lettore Video.js, per registrarlo e abilitarlo saranno necessarie le seguenti chiamate: ``` registerIVSQualityPlugin(videojs); // where videojs is the video.js variable player.enableIVSQualityPlugin(); // where player is the instance of the videojs player ``` Questa operazione creerà un pulsante di menu dell'interfaccia utente che consente di selezionare una qualità per il flusso. ### Plugin e TypeScript Se si sta usando TypeScript, il nostro pacchetto npm include il tipo `VideoJSQualityPlugin` da poter importare e utilizzare con il nostro plugin. I plugin sono essenzialmente misti, quindi l'interfaccia di questo tipo deve essere utilizzata come [tipo di intersezione](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) con l'interfaccia TypeScript `VideoJSIVSTech`. ## Policy di sicurezza dei contenuti L'API Video.js di Amazon IVS è configurata per funzionare sulle pagine che utilizzano le policy di sicurezza dei contenuti (CSP). Consultare la sezione "Utilizzo della policy di sicurezza dei contenuti" nella [SDK IVS Player: guida per il web](web-content-security-policy.md). ## Funzioni ### Riproduzione L'API Video.js di Amazon IVS supporta le interfacce necessarie per l'uso interno da parte del framework Video.js. È probabile che l'applicazione client non necessiti di utilizzare direttamente questi metodi, poiché Video.js esegue l'integrazione necessaria e presenta un'interfaccia standard. Tuttavia, se necessario, un modo per accedere ai metodi interni di Video.js e del lettore Amazon IVS consiste nell'utilizzare l'oggetto del lettore Video.js in modo da ottenere l'handle dell'oggetto necessario alla tecnologia. Per accedere all'API, recuperare l'istanza del lettore Video.js come si farebbe normalmente: ``` let player = videojs("videoTagId"); //replace videoTagId with your