Wikipedia

HTML5 video: differenze tra le versioni

Naviga nella cronologia in modo interattivo
← Differenza precedente
Contenuto cancellato Contenuto aggiunto
VisualeWikitesto
Inseritore (discussione | contributi)
1 733 modifiche
Aggiornamento della voce
m clean up
 
(16 versioni intermedie di 10 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 haannunciò annunciatola cherimozione rimuoverà ildel supporto ai codec chiusi (in particolare l'H.264) dai futuri rilasci di Chrome. L'annuncio specificava che la decisione era stata presa per aiutare la diffusione di un HTML5 libero da brevetti, favorendo l'uso dei codec open source VP8 e Theora.
 
Nell'aprile 2011 Google haannunciò annunciatola checonversione YouTube convertiràdi tutti i suoi video di YouTube in WebM cominciando dal 30% di quelli più visti.
 
==Uso di più formati video contemporaneamente==
Riga 214:
</video>
</pre>
 
== 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=10 febbraio 2021}}</ref><ref>{{Cita web|url=https://www.invisibleharness.com/self-hosting-video-pros-cons/|titolo=Self-Hosting Video Content -Pros and Cons|autore=Tim Neighbors|sito=Video Production by Invisible Harness|data=6 luglio 2017|lingua=en|accesso=10 febbraio 2021}}</ref><ref>{{Cita web|url=https://usabilla.com/blog/website-usability-youtube-player-vs-self-hosted-video/|titolo=Website Usability: YouTube Player vs. Self-Hosted Video|sito=The latest Voice of Customer and CX trends {{!}} Usabilla Blog|data=4 agosto 2015|lingua=en|accesso=10 febbraio 2021}}</ref><ref>{{Cita web|url=https://smallbusiness.chron.com/tumblr-vs-wordpress-bands-38682.html|titolo=Tumblr vs. Wordpress for Bands|sito=Small Business - Chron.com|accesso=10 febbraio 2021}}</ref>.
{| class="wikitable"
|+
! colspan="2" |Server proprio
! colspan="2" |Piattaforma esterna
|-
|PRO
|CONTRO
|PRO
|CONTRO
|-
|Totale privacy e controllo
|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=10 febbraio 2021}}</ref>
|-
|Nessuno può scaricare, eliminare o vietare il video
|Se l'hosting privato non è particolarmente performante, la riproduzione può essere carente
|Larghezza di banda molto più alta dei comuni hosting privati
|Meno privacy e controllo
|-
|Nessun logo o [[Watermark (informatica)|watermark]]
|Riproduzione più lenta e meno affidabile
|Riproduzione più veloce
|Aspetto non completamente personalizzabile
|-
|Colori / aspetto completamente personalizzabili
|Nessuna promozione aggiuntiva al di fuori di ciò che il sito
ospitante fornisce
|Il video non si fermerà finché non sarà finito, indipendentemente dalla velocità di Internet dell'utente
|Possibili [[Watermark (informatica)|watermark]]
|-
|Si mantengono i visitatori sulla propria pagina
|Potenziali clienti possono finire per caso sul video se si trova su una piattaforma esterna. Ciò non accade su un hosting privato
|Potenziali clienti possono finire per caso sul video
|Annunci di aziende esterne durante il video
|-
|Nessun annuncio o video suggerito alla fine del video
|SEO più limitata delle piattaforme
famose
|SEO migliore (le piattaforme famose sono meglio indicizzate dei siti web privati)
|Possibile eliminazione del video se non risponde a certe regole
|}
 
== 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|lingua=EN|accesso=10 febbraio 2021}}</ref><ref>{{Cita web|url=https://webglfundamentals.org/webgl/lessons/webgl-animation.html|titolo=WebGL - Animation|sito=webglfundamentals.org|lingua=en|accesso=10 febbraio 2021}}</ref><ref>{{Cita web|url=https://codemyui.com/tag/canvas/|titolo=15 Canvas Animation Inspiration - HTML & CSS Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀|sito=codemyui.com|lingua=en|accesso=10 febbraio 2021}}</ref>:[[File:Animation-confronto-web.png|alt=Con diverse tecniche si può ottenere lo stesso risultato animato|centro|miniatura|650x650px|Con diverse tecniche si può ottenere lo stesso risultato animato]]
{| class="wikitable"
|+
![[Graphics Interchange Format|GIF]]
![[CSS Animations|CSS animation]]
![[Canvas (elemento HTML)|Canvas]]\[[WebGL]]
![[Scalable Vector Graphics|SVG]]
!<video>
|-
|PRO: semplicità di creazione,
adattabilità ai diversi dispositivi, salvabile dall'utente con tasto destro del [[mouse]], nessuna programmazione
 
CONTRO: possibilità molto limitate, nessuna interattività
|PRO: possibilità ampie, poco peso in KB, interattività
CONTRO: non sempre adattabile
 
a tutti i dispositivi, programmazione
 
necessaria non sempre facile
|PRO: possibilità ampie, realismo 3D, interattività
CONTRO: non sempre adattabile
 
a tutti i dispositivi, programmazione
 
necessaria non sempre facile
|PRO: possibilità ampie, nessun vincolo alla qualità in pixel, interattività
CONTRO: non sempre adattabile
 
a tutti i dispositivi, programmazione
 
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]]
|}
 
== 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=10 febbraio 2021-02-}}</ref><ref>{{Cita web|url=https://savesubs.com/it|titolo=Scarica i sottotitoli da Youtube, Facebook, Viki, Dailymotion e altro|sito=savesubs.com|lingua=it|accesso=10 febbraio 2021}}</ref>:<syntaxhighlight lang="html">
<video id="video" controls preload="metadata">
<source src="video/uno.mp4" type="video/mp4">
Line 227 ⟶ 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=2021-02-10 febbraio 2021}}</ref>:
 
* <code>color</code>
Line 243 ⟶ 326:
color:#ccc;
background:#0055dd;
}
</syntaxhighlight>
 
== 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=28 maggio 2017|lingua=en|accesso=10 febbraio 2021}}</ref>.<syntaxhighlight lang="css">
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
 
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</syntaxhighlight>
 
== 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=10 febbraio 2021}}</ref>.
 
=== Elementi animati davanti al video ===
=== Elementi animati davanti al video<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=2021-02-10}}</ref> ===
<syntaxhighlight lang="css">
@keyframes overlay {
Line 281 ⟶ 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 <ref>{{Cita web|url=https://codepen.io/ygjack/pen/xrqQjR|titolo=filtri}}</ref><ref>{{Cita web|url=https://codepen.io/chriscoyier/pen/zbakI|titolo=filtri svg}}</ref>(seppia, [[Vignettatura|vignetteatura]], sfocatura...):
 
==== CSS 3 ====
<syntaxhighlight lang="css">
html { box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }
html { min-width: 100%; min-height: 100%;}
body {
margin:0;
background-color:#282828;
}
 
h1 { font-size: 24px; font-weight:300; font-family: sans-serif; padding:10px 30px; color: gold; -webkit-font-smoothing: antialiased;
position:absolute; z-index: 1; bottom:0; right:0; background: rgba(0,0,0,0.4); }
 
video {
position: fixed;
Line 336 ⟶ 429:
</feComponentTransfer>
</filter>
<filter id="convolve">
<feConvolveMatrix order="3" kernelMatrix="1 -1 1 -1 -0.01 -1 1 -1 1" edgeMode="duplicate" result="convo"/>
</filter>
<filter id="convoblur">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
<feConvolveMatrix order="3" kernelMatrix="1 -1 1 -1 -0.01 -1 1 -1 1" edgeMode="none" result="convo"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="convo"/>
</feMerge>
</filter>
<filter id="blackandwhite">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</syntaxhighlight>
 
=== 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-02with-10scalable-vector-graphics-svg-in-html5-video-element/27811|urlmorto=sì}}</ref><ref>{{Cita web|url=https://codepen.io/yoksel/full/fsdbu/|titolo=svg}}</ref>.
 
==== SVG ====
Line 369 ⟶ 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=2021-02-10 febbraio 2021}}</ref>.<syntaxhighlight lang="javascript">
var processor;
 
Line 388 ⟶ 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-10-07|lingua=en-US|accesso=10 febbraio 2021-02-10}}</ref>.<syntaxhighlight lang="javascript">
const curtains = new Curtains({
container: "canvas",
Line 411 ⟶ 488:
);
</syntaxhighlight>
 
=== 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=10 febbraio 2021}}</ref>. Un esempio con il CSS:<syntaxhighlight lang="css">
.controls button {
border:none;
cursor:pointer;
background:transparent;
background-size:contain;
background-repeat:no-repeat;
}
.controls progress {
display:block;
width:100%;
height:81%;
margin-top:0.125rem;
border:none;
color:#00ccff;
border-radius:2px;
}
</syntaxhighlight>
 
== Esempi ==
<gallery>
File:Canvas-chroma-key.png|alt=Esempio di effetto Chroma Key in un video fatto con Canvas.|Esempio di effetto Chroma Key in un video fatto con [[Canvas (elemento HTML)|Canvas]].
File:Video-mask-CSS-SVG.png|alt=Esempio di maschera SVG in un video (con CSS3 si può ottenere lo stesso effetto)|Esempio di maschera SVG in un video (con CSS3 si può ottenere lo stesso effetto)
File:Video-filter-CSS-SVG-Sub.png|alt=Esempio di filtro SVG (con CSS3 si può ottenere lo stesso effetto)|Esempio di filtro SVG (con CSS3 si può ottenere lo stesso effetto)
</gallery>
 
==Note==
Line 421 ⟶ 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}}
 
Estratto da "https://it.wikipedia.org/wiki/HTML5_video"