Example 01

Defining specific presentation styles for different playback phases using pseudo-classes :active and :not-active.

<video id="ex01" controls>
  <source src="movie.webm" />
  <source src="movie.mp4" />
  <source src="movie.ogv" />
  Your browser does not support the video tag.
</video>
<style>
#ex01:active {
  border: 5px solid green;
}

#ex01:not-active {
  border: 5px solid red;
}
</style>

Example 02

Specifying when a video stream begins and stops playing using properties timing-clip-begin and timing-clip-end.

<video id="ex02" controls>
  <source src="movie.webm" />
  <source src="movie.mp4" />
  <source src="movie.ogv" />
  Your browser does not support the video tag.
</video>
<style>
#ex02 {
  timing-clip-begin: 3s;
  timing-clip-end: 7s;
}
</style>

Example 03

Creating a sequential image slideshow using the property timing-container.

<div id="ex03">
  <img src="img1.png" />
  <img src="img2.png" />
  <img src="img3.png" />
</div>
<style>
  #ex03 {
    timing-container: seq;
    timing-iteration-count: infinite;
  }

  #ex03 img {
    timing-duration: 1s;
  }
	
  #ex03 img:not-active {
    display: none;
  }
</style>

Example 04

Synchronizing a quiz with the video playback using property timing-sync-master.

<video id="ex04" controls>
  <source src="movie.webm" />
  <source src="movie.mp4" />
  <source src="movie.ogv" />
  Your browser does not support the video tag.
</video>
<form id="form04" onsubmit="return false;">
  What's the name of this movie?
  <input type="radio"><label>Sintel</label>
  <input type="radio"><label>Tears of Steel</label>
  <input type="radio"><label>Big Buck Bunny</label>
  <input type="submit" value="Submit" onclick="checkQuiz();">
</form>
<style>
#form04 {
  timing-delay: 5s;
  timing-duration: 1s;  /* hide form 1s after playback is resumed */
  timing-sync-master: #ex04;
}

#form04:not-active {
  display: none;
}
</style>
<script>
  var form04 = document.getElementById("form04");
  form04.bind("onplay", function (event) {
    event.stopPropagation();
  
    document.getElementById("ex04").style.timingPlayState = "paused";
  });
	
  function checkQuiz() {
    ...
  }
</script>

Example 05

Modifying the property timing-container on the fly ( | ).

<div id="ex05">
  <img src="img1.png" />
  <img src="img2.png" />
  <img src="img5.png" />
</div>
<button onclick="document.getElementById('ex05').style.timingContainer = 'seq';">seq</button>
<button onclick="document.getElementById('ex05').style.timingContainer = 'par';">par</button>
<style>
  #ex05 {
    timing-container: seq;
    timing-iteration-count: infinite;
  }

  #ex05 img {
    timing-delay: 0.5s;
    timing-duration: 1s;
  }
	
  #ex05 img:not-active {
    visibility: hidden;
  }
</style>