HTML5 video: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m clean up |
|||
| (24 versioni intermedie di 15 utenti non mostrate) | |||
Riga 1:
'''HTML5 video''' è un elemento introdotto nelle specifiche dell'[[HTML5]] con lo scopo di aprire nuovi standard sulla riproduzione di filmati e video, tutto ciò in sostituzione all'[[Elemento HTML#Altri elementi|elemento <
Ciò comporta che i browser rispettanti l'HTML5 non necessitano di player proprietari (come [[Adobe Flash Player]]) per riprodurre video incorporati tramite il tag <code><video></code>.
Riga 6:
==Specifiche==
L'HTML5 prevede una serie di attributi da aggiungere al tag di apertura <
* <
* <
* <
* <
* <
* <
* <
* <
* <
* <
Tra i tag di apertura (<
Il seguente frammento di codice HTML5 inserisce un video in formato [[WebM]] nella pagina e mostra l'uso degli attributi visti precedentemente (nell'esempio sono mostrati tutti, nella realtà si inseriscono solo quelli desiderati).
Riga 61:
! colspan="4" | Formati video supportati
|-
! colspan="1" style="width: 15%;" |
! colspan="1" style="width: 15%;" |
! colspan="2" style="width: 15%;" |
|-
! style="width: 15%;" | [[Theora]]
Riga 120:
| [[Windows 10]]
| 20.10240.16384.0 <small>(29 luglio 2015)</small>
| {{
| {{sit|Da 1.0}}
| {{not}}
Riga 195:
A maggio 2010 i video HTML5 non erano così diffusi come i video Flash, sebbene alcuni siti avessero cominciato ad utilizzare in via sperimentale i video in HTML5, tra cui [[Dailymotion]] (usando i formati Theora e Vorbis), [[YouTube]] (sia in H.264 che in WebM) e [[Vimeo]] (in H.264).
Secondo una nota di YouTube, l'elemento <
L'11 gennaio 2011 il progetto Chromium di Google
Nell'aprile 2011 Google
==Uso di più formati video contemporaneamente==
Nell'attesa che l'HTML5 Working Group stabilisca una volta per tutte quale debba essere il formato video ufficiale per l'elemento <
Ad esempio, supponendo di voler inserire in una pagina il video "esempio" nei tre formati [[Theora]], [[H.264]] e [[WebM]], si deve utilizzare il seguente codice:
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}}</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">
<source src="video/uno.webm" type="video/webm">
<track label="English" kind="subtitles" srclang="en" src="captions/vtt/uno-en.vtt" default>
<track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/uno-de.vtt">
<track label="Español" kind="subtitles" srclang="es" src="captions/vtt/uno-es.vtt">
</video>
</syntaxhighlight>
=== 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=10 febbraio 2021}}</ref>:
* <code>color</code>
* <code>opacity</code>
* <code>visibility</code>
* <code>text-decoration</code>
* <code>text-shadow</code>
* <code>background</code>
* <code>outline</code>
* <code>font</code>
* <code>white-space</code>
Esempio:<syntaxhighlight lang="css">
::cue(v[voice='Test']) {
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 ===
<syntaxhighlight lang="css">
@keyframes overlay {
30% {
left: 0;
width: 50%;
}
50% {
background: #00f;
}
80% {
left: 80%;
width: 20%;
}
100% {
left: 60%;
width: 40%;
background: #00f;
}
}
figure#fashion {
display: inline-block;
position: relative;
font-size: 0;
margin: 0;
}
figure#fashion video {
width: 100%;
</syntaxhighlight>
=== 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">
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
transform: translateX(-50%) translateY(-50%);
}
</syntaxhighlight>
==== SVG ====
<syntaxhighlight lang="html5">
<video autoplay="true" id="vid" controls="controls" loop="loop">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm" type="video/ogg"/>
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm" type="video/mp4"/>
</video>
<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurEffect">
<feGaussianBlur stdDeviation="4"/>
</filter>
<filter id="turbulence">
<feTurbulence baseFrequency=".01" type="fractalNoise" numOctaves="3" seed="23" stitchTiles="stitch"/>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="10,3" result="outBlur"/>
</filter>
<filter id="inverse">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>
</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-with-scalable-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 ====
<syntaxhighlight lang="html">
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <mask> <text id="text" x="10" y="140" font-size="150" font-weight="bold" font-family="Verdana" fill="white">HELLO</text> </mask> </defs> <use xlink:href="#text"/> </svg>
</syntaxhighlight>
==== CSS 3 ====
<syntaxhighlight lang="css">
video { mask:url('#vmask'); box-image:url('text.svg'); margin:100px; }
</syntaxhighlight>
=== 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=10 febbraio 2021}}</ref>.<syntaxhighlight lang="javascript">
var processor;
processor.doLoad = function doLoad() {
this.video = document.getElementById('video');
this.c1 = document.getElementById('c1');
this.ctx1 = this.c1.getContext('2d');
this.c2 = document.getElementById('c2');
this.ctx2 = this.c2.getContext('2d');
let self = this;
this.video.addEventListener('play', function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
},
</syntaxhighlight>
=== 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|lingua=en|accesso=10 febbraio 2021}}</ref>.<syntaxhighlight lang="javascript">
const curtains = new Curtains({
container: "canvas",
pixelRatio: Math.min(1.5, window.devicePixelRatio),
});
const params = {
vertexShaderID: "vertexShader",
fragmentShaderID: "fragmentShader",
uniforms: {
transition: {
name: "uTransition",
type: "1f",
value: 0,
},
},
};
const multiTexturesPlane = new Plane(
curtains,
[...document.getElementsByClassName("plane")],
params
);
</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 222 ⟶ 523:
==Collegamenti esterni==
* {{cita web|
{{Interfacce web}}
{{Portale|internet}}
[[Categoria:
| |||