HTML and CSS Reference
In-Depth Information
Essendo un normale tag HTML5, anche il tag
track
prevede eventi come
load
,
cue-
changed
e
error
, per gestire il caricamento, il cambio del
cue
o l'eventuale errore di
caricamento, oltre a proprietà come
cues
e
activeCues
, per conoscere le
cue
attuali e
quelle attive.
Viste le tracce, un'altra caratteristica che possiamo sfruttare con il tag
video
è la com-
binazione dell'elemento con i CSS, per ottenere player più gradevoli dal punto di vista gra-
fico.
Abbiamo già anticipato nei capitoli precedenti come a ogni elemento che componga il
DOM di una pagina possa essere applicato uno stile in modo esplicito, inline o con fogli
di stile. Il tag
video
non è da meno e, se lo combiniamo con i CSS, possiamo allineare o
applicare effetti sul box del video.
Senza entrare troppo nel dettaglio, possiamo comprenderne la facilità di utilizzo e
apprezzare il risultato, analizzando le poche righe
dell'esempio 9.16
. In questo esempio
definiamo uno stile per il tag
video
e applichiamo alcuni degli stili di CSS3, gestendo
l'arrotondamento dei bordi.
Esempio 9.16
<head>
<style type="text/css">
video
{
box-shadow: 10px 10px 5px #888;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
border: 12px solid blue;
}
</style>
</head>
<body>
<video src="test.mp4" controls>
</video>
</body>
