HTML5 video: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m clean up |
|||
| (8 versioni intermedie di 8 utenti non mostrate) | |||
Riga 197:
Secondo una nota di YouTube, l'elemento <kbd><video></kbd> attualmente non soddisfa tutte le esigenze del sito. La ragione principale di ciò è l'assenza di un formato standard, la mancanza di un sistema di protezione del contenuto e l'incapacità di mostrare i video a schermo intero. Anche [[Hulu]] non ha adottato l'HTML5 per l'impossibilità di adattare la banda disponibile all'utente e di proteggere i contenuti mostrati. Inoltre pure [[Netflix]] non ha adottato l'HTML5 per motivi analoghi.
L'11 gennaio 2011 il progetto Chromium di Google
Nell'aprile 2011 Google
==Uso di più formati video contemporaneamente==
Riga 216:
== Piattaforma esterna o interna ==
Un video si può incorporare ospitandolo sul server del proprio sito web ("self [[hosting]]") o su una piattaforma esterna ([[YouTube]], [[Vimeo]],...)<ref>{{Cita web|url=https://www.liquidlight.co.uk/blog/youtube-videos-vs-self-hosted-which-one-is-better-for-you/|titolo=YouTube videos vs self-hosted: Which one is better for you?|sito=Liquid Light|lingua=en|accesso=
{| class="wikitable"
|+
Riga 230:
|Tempi di caricamento della pagina più lunghi
|Dispositivi e browser diversi richiedono formati di file diversi. I servizi di terze parti sono in grado di convertire il file video.
|Tramite appositi servizi web il video è scaricabile<ref>{{Cita web|url=https://www.freemake.com/it/free_video_downloader/|titolo=FREE YouTube Downloader - Scaricare Video da Youtube Gratis -Download Veloce - YouTube to MP4|sito=Freemake|lingua=it|accesso=
|-
|Nessuno può scaricare, eliminare o vietare il video
Riga 261:
== Confronto con altre tecniche ==
Alcune animazioni create con varie tecniche visivamente sono identiche o molto simili ad un video incorporato con il tag <code><video></code>. Ogni tecnica ha pro e contro, a seconda delle proprie esigenze<ref>{{Cita web|url=https://www.hippani.com/?S=AnimatorGallery&P=AnimatorGalleryView&RecordId=82|titolo=HTML Animation vs GIF vs Video - Hippani
{| class="wikitable"
|+
Riga 271:
|-
|PRO: semplicità di creazione,
adattabilità ai diversi dispositivi, salvabile dall'utente con tasto destro del [[mouse]], nessuna programmazione
CONTRO: possibilità molto limitate, nessuna interattività
Riga 293:
necessaria non sempre facile
|PRO: possibilità molto ampie con utilizzo di software avanzati di animazione come [[Adobe Premiere Pro|Premiere]] e [[Adobe After Effects|After effects]], adattabile
a tutti i dispositivi, possibilità di stop e ripresa del video da qualsiasi punto, sottotitoli in tutte le lingue, nessuna programmazione
CONTRO: nessuna interattività, file spesso pesanti, video scaricabile dall'utente con tasto destro del [[mouse]]
Riga 299:
== Sottotitoli ==
Si possono creare sottotitoli in tutte le lingue a scelta dell'utente, visibili durante il video e anche scaricabili in formato TXT o altro<ref>{{Cita web|url=https://downsub.com/|titolo=Download subtitles from Youtube, Viki, Viu, Vlive and more|sito=downsub.com|lingua=en|accesso=
<video id="video" controls preload="metadata">
<source src="video/uno.mp4" type="video/mp4">
Riga 310:
=== Stili CSS dei sottotitoli ===
Si possono formattare i sottotitoli con diversi stili. Le principali proprietà CSS per farlo sono<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video|titolo=Adding captions and subtitles to HTML5 video - Developer guides {{!}} MDN|sito=developer.mozilla.org|accesso=
* <code>color</code>
Riga 331:
== Uso come sfondo di un altro elemento HTML ==
[[File:Video-background-css.png|alt=Esempio di video di sfondo in un DIV|miniatura|200x200px|Esempio di video di sfondo in un DIV]]
Un video HTML5 si può inserire come sfondo di un altro elemento HTML, come un paragrafo, un DIV, o anche dell'intero sito web e fare in modo che sia responsivo. Se inserito come sfondo però, esattamente come un'immagine o un gradiente CSS 3, non potrà essere salvato dall'utente con tasto destro del mouse e "salva col nome" poiché sarà un video di decorazione e non di contenuto<ref>{{Cita web|url=https://css-tricks.com/full-page-background-video-styles/|titolo=Full Page Background Video Styles|sito=CSS-Tricks|data=
#myVideo {
position: fixed;
Riga 351:
== Formattazione ==
Con [[CSS|CSS 3]], [[Canvas (elemento HTML)|Canvas]], [[Scalable Vector Graphics|SVG]] e [[WebGL]] è possibile formattare il video incorporato con <code><video></code> e aggiungere effetti vari senza agire direttamente sul video con [[Adobe Premiere Pro|Adobe Premiere]] o altri software<ref>{{Cita web|url=http://thenewcode.com/1020/HTML5-Video-Effects-with-CSS-Blend-Modes|titolo=HTML5 Video Effects with CSS Blend Modes|autore=Dudley Storey|sito=the new code|lingua=en|accesso=
=== Elementi animati davanti al video ===
Riga 385:
=== Filtri ===
Si possono aggiungere filtri davanti al video<ref>{{Cita web|url=https://codepen.io/jakob-e/pen/Qjpowv|titolo=filtri}}</ref> anche in modalità sfondo responsivo
==== CSS 3 ====
Riga 432:
=== Maschere ===
Si possono creare maschere SVG o CSS3 ossia forme geometriche con all'interno un video<ref>{{Cita web|url=http://mrbool.com/working-with-scalable-vector-graphics-svg-in-html5-video-element/27811|titolo=Working with Scalable Vector Graphics (SVG) in HTML5 Video Element|sito=mrbool.com|accesso=10 febbraio 2021|dataarchivio=6 maggio 2021|urlarchivio=https://web.archive.org/web/20210506115341/http://mrbool.com/working-
==== SVG ====
Riga 446:
=== Editing video con Canvas ===
Si possono fare manipolazioni grazie a HTML5 Canvas come per esempio l'effetto [[Chroma key|Chroma Key]]<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas|titolo=Manipulating video using canvas - Web APIs {{!}} MDN|sito=developer.mozilla.org|accesso=
var processor;
Riga 465:
=== Transizioni WebGL ===
Si possono creare transizioni tra un video e l'altro con [[WebGL]]<ref>{{Cita web|url=https://tympanus.net/codrops/2020/10/07/webgl-video-transitions-with-curtains-js/|titolo=WebGL Video Transitions with Curtains.js|autore=Team Codrops|sito=Codrops|data=7 ottobre 2020
const curtains = new Curtains({
container: "canvas",
Riga 490:
=== Formattazione del video player ===
Si può modificare anche il video player che mostra il video (ossia i bottoni, la barra di avanzamento del video, il contorno...)<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics|titolo=Video player styling basics - Developer guides {{!}} MDN|sito=developer.mozilla.org|accesso=
.controls button {
border:none;
Riga 525:
* {{cita web|1=https://www.whatwg.org/specs/web-apps/current-work/multipage/video.html|2=Informazioni sul tag <kbd><video></kbd> dell'HTML5.|lingua=en|accesso=16 aprile 2011|urlarchivio=https://web.archive.org/web/20100420024047/http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html|dataarchivio=20 aprile 2010|urlmorto=sì}}
{{Interfacce web}}
{{Portale|internet}}
| |||