HTML5 features
<p><span translate="no">John Dee</span> magician</p>
1 / Opening
00:00:00.000 --> 00:00:12.025 [styling...]
(something happening)
2
00:00:20.015--> 00:00:34.000 size:33% // limit cue display size
00:00:20.015--> 00:00:34.000 position:95% align:end // change cue position
<c.some-class>(something else going on)</c> // add class to cue and apply CSS: ::cue(.some-class) { color: red; }
<v he>(something said)</v> // add voice to cue and apply CSS: ::cue(v[voice="voice1"]) { color: blue; }
Chapter 1
00:00:00.000 --> 00:00:10.000
Chapter Title 1
Chapter 2
00:35:00.000 --> 00:35:10.000
Chapter Title 2
<video
poster="thumbnailURL" <!-- display an image while video is loadin -->
>
<track
kind="subtitles|captions|descriptions|chapters|metadata" <!-- specify track type -->
default <!-- set this the default track -->
crossorigin="anonymous|use-credentials" <!-- allow different origins for media and tracks -->
srclang="en|de|..." <!-- specify language for track (mandatory for kind="subtitles") -->
label=""English|German|...|
></track>
</video>
<audio/video
autoplay
preload="none|metadata|auto" <!-- what to download in advance -->
loop
controls
></audio/video>
<a href="fileURL" download="filename.ext">Download this file</a>
<header>
<main>
<nav></nav>
<section>
<article></article>
<aside></aside>
</section>
</main>
<footer>
<details>
<summary></summary>
<figure>
<figcaption></figcaption>
</figure>
</details>
<mark>highlighted text</mark>
<time datetime="2017-01-18T20:00|PT1D3H45M">20:00</time>