Commit 0bc87868 authored by Brendan Long's avatar Brendan Long

Add stylesheets for 608 and 708 captions from this spec:

https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#browsers
parent 3d6ad13c
/* default values */
::cue {
line-height: 5.33vh;
font-size: 4.1vh;
font-family: monospace;
font-style: normal;
font-weight: normal;
background-color: black;
color: white;
}
/* special cue parts */
::cue(c.transparent) {
color: transparent;
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.semi-transparent) {
color: rgba(0, 0, 0, 0.5);
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.opaque) {
color: rgba(0, 0, 0, 1);
}
::cue(c.blink) {
text-decoration: blink;
}
::cue(c.white) {
color: white;
}
::cue(c.red) {
color: red;
}
::cue(c.green) {
color: green;
}
::cue(c.blue) {
color: blue;
}
::cue(c.cyan) {
color: cyan;
}
::cue(c.yellow) {
color: yellow;
}
::cue(c.magenta) {
color: magenta;
}
::cue(c.bg_transparent) {
background-color: transparent;
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.bg_semi-transparent) {
background-color: rgba(0, 0, 0, 0.5);
}
/* need to set this before changing color, otherwise the color is lost */
::cue(c.bg_opaque) {
background-color: rgba(0, 0, 0, 1);
}
::cue(c.bg_white) {
background-color: white;
}
::cue(c.bg_green) {
background-color: green;
}
::cue(c.bg_blue) {
background-color: blue;
}
::cue(c.bg_cyan) {
background-color: cyan;
}
::cue(c.bg_red) {
background-color: red;
}
::cue(c.bg_yellow) {
background-color: yellow;
}
::cue(c.bg_magenta) {
background-color: magenta;
}
::cue(c.bg_black) {
background-color: black;
}
/* Examples of combined colors */
::cue(c.bg_white.bg_semi-transparent) {
background-color: rgba(255, 255, 255, 0.5);
}
::cue(c.bg_green.bg_semi-transparent) {
background-color: rgba(0, 128, 0, 0.5);
}
::cue(c.bg_blue.bg_semi-transparent) {
background-color: rgba(0, 0, 255, 0.5);
}
::cue(c.bg_cyan.bg_semi-transparent) {
background-color: rgba(0, 255, 255, 0.5);
}
::cue(c.bg_red.bg_semi-transparent) {
background-color: rgba(255, 0, 0, 0.5);
}
::cue(c.bg_yellow.bg_semi-transparent) {
background-color: rgba(255, 255, 0, 0.5);
}
::cue(c.bg_magenta.bg_semi-transparent) {
background-color: rgba(255, 0, 255, 0.5);
}
::cue(c.bg_black.bg_semi-transparent) {
background-color: rgba(0, 0, 0, 0.5);
}
::cue(c.mono_serif) {
font-family:'Courier, monospace, serif';
}
::cue(c.prop_serif) {
font-family:'Times New Roman, serif';
}
::cue(c.mono_sans) {
font-family:'Helvetica, monospace, sans-serif';
}
::cue(c.prop_sans) {
font-family:'Arial, Swiss, sans-serif';
}
::cue(c.casual) {
font-family:'Dom, Impress, casual';
}
::cue(c.cursive) {
font-family:'Coronet, Marigold, cursive';
}
::cue(c.small_caps) {
font-family:'Engravers Gothic, monospace, sans-serif';
font-variant:small-caps;
}
......@@ -4,6 +4,8 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Text track demo</title>
<link rel="stylesheet" href="cea608.css" />
<link rel="stylesheet" href="cea708.css" />
<style>
video::-webkit-media-controls-panel {
background-color:#000;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment