HTML5 video: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Aggiornamento della voce |
|||
Riga 214:
</video>
</pre>
== 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=2021-02-10}}</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=2021-02-10}}</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>
== Formattazione ==
Con [[CSS|CSS 3]], [[Canvas (elemento HTML)|Canvas]], [[Scalable Vector Graphics|SVG]] e [[WebGL]] è possibile formattare il video incorporato con <video> e aggiungere effetti vari.
=== 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 {
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">
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;
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>
<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=2021-02-10}}</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=2021-02-10}}</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=2020-10-07|lingua=en-US|accesso=2021-02-10}}</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>
==Note==
| |||