HTML5 video: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Riga 243:
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=2017-05-28|lingua=en|accesso=2021-02-10}}</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=2021-02-10}}</ref>.
=== Elementi animati davanti al video ===
<syntaxhighlight lang="css">
@keyframes overlay {
Line 384 ⟶ 405:
);
</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=2021-02-10}}</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==
| |||