Skip to content Skip to sidebar Skip to footer

Riprodurre filmati con Video Player nella build WebGL di Unity

Una delle problematiche più ricorrenti nelle build WebGL in Unity è che il componente Video Player produce diverse problematiche che non si riscontrano in Editor e nemmeno nelle build Windows, iOS o Android. Uno degli errori più comuni nasce dal fatto che non si riescono ad eseguire i filmati.

Questo perché possono esserci diverse componenti che bloccano la riproduzione eseguendola in un browser web. Di seguito alcuni consigli per riuscire ad eseguire i video in una esportazione WebGL di Unity:

  • Nel componente Video Player utilizzare sempre la proprietà Render Mode impostata su Render Texture (con la conseguente creazione di un oggetto Render Texture associato)
  • Nel componente Video Player non utilizzare la funzione “Play On Awake” ma eseguire la riproduzione da script attraverso la funzione .Play() dopo una prima interazione dell’utente (alcuni browser non eseguono video senza una prima interazione).
  • Nel componente Video Player impostare la proprietà Source su URL ed indicare un percorso remoto valido (questo perchè Unity dichiara espressamente che la proprietà Video Clip non è supportata in WebGL)
  • Verificare che non vi siano conflitti CORS nell’accesso a video quando si esegue la build WebGL nel browser (utilizzare i Developer Tools premendo il tasto F12 e controllando la Console javascript). Vedere sotto.

Configurare un server Windows per abilitare la funzionalità CORS

Di base le applicazioni web eseguite su server Windows non sono configurare per permettere meccanismi di condivisione dei files tra domini (CORS) Questo approccio purtroppo blocca l’esecuzione di filmati dal parte del componente Video Player di Unity. Per abilitare tale possibile basta aggiungere le seguenti righe nel file web.config dell’applicazione server Windows.

<system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*"/>
                <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS"/>
                <add name="Access-Control-Allow-Headers" value="Content-Type,Authorization"/>
            </customHeaders>
        </httpProtocol>
</system.webServer>

Configurare un server Linux per abilitare la funzionalità CORS

Per applicazioni su Server Linux basta aggiungere le seguente righe nel file .htaccess nella root principale.

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"