Nello script #50 abbiamo visto come utilizzare le Fullscreen API di HTML5:
https://www.html5italia.com/script/50/Visualizzare-Contenuti-Fullscreen-HTML5.aspx
Al momento della pubblicazione dello script, IE non aveva ancora un supporto per questa feature, che è stata aggiunta nella recente versione 11.
Dato che queste specifiche non sono ancora stabili, il relativo codice viene attivato attraverso un vendor prefix da tutti i browser a disposizione: quello che vedremo in questo script è l'implementazione delle specifiche fatta da IE11.
L'esempio riportato nello script #50 diventa questo di seguito, dove sono omessi gli altri vendor prefix, per semplicità:
$("#fullscreenDiv").bind('click', function (evt) { var docElm = evt.target; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } //... });
Come comportamento predefinito, al click sull'elemento, verrà aperto il relativo contenuto in full screen: IE11, però, applica un colore nero di sfondo, che può essere cambiato. E' sufficiente utilizzare uno stile CSS come quello riportato, per controllarne il colore:
:-ms-fullscreen { background: white; color: red; }
Le API lavorano in maniera tale che qualsiasi elemento possa essere messo in full screen: c'è da sottolineare, però, che solo il video viene automaticamente esteso fino a coprire l'intera area, mentre tutti gli altri elementi restano della dimensione impostata.
Di default gli iframe non sono consentiti ed è necessario impostare sul tag l'attributo allowfullscreen per richiederne l'accesso alle Fullscreen API.
L'utente può uscire dal fullscreen premendo sul pulsante ESC, oppure invocando il metodo msExitFullscreen.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Configurare lo startup di applicazioni server e client con .NET Aspire
Gestione ciclo di vita in .NET Aspire
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Centralizzare gli endpoint AI Foundry con Azure API Management
Integrare SQL Server in un progetto .NET Aspire
Ridurre il reflow cambiando il CSS
Gestione dei nomi con le regole @layer in CSS
Fornire parametri ad un Web component HTML
Utilizzare i variable font nel CSS
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Gestire progetti .NET + React in .NET Aspire
Utilizzare DeepSeek R1 con Azure AI
I più letti di oggi
- Eseguire query con LINQ to SQL
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestione file Javascript in Blazor con .NET 9
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- #VS2017 Community è già disponibile al download da questa pagina https://aspit.co/bgb
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!