Cacher is the code snippet organizer for pro developers

<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>