JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Document Elements: (Media) -->
<video id="media" width="640" height="360" controls autoplay>
<source src="http://www.sample-videos.com/video/mp4/360/big_buck_bunny_360p_2mb.mp4" type="video/mp4">
</video>
<a href="#media" onClick="assets()">A Link</a>
CSS
position: fixed;
background-color: rgba(0, 0, 0, 0);
width: 37.5rem;
height: 25rem;
left: 50%;
top: 50%;
margin-left: -18.75rem;
margin-top: -12.5rem;
border: none;
z-index: 24;
}
#media {
-webkit-animation: media;
-webkit-animation-play-state: paused;
-webkit-animation-duration: 5s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
/* Animation */
.animation {
-webkit-animation-play-state: running !important;
}
.timecode {
-webkit-animation-play-state: running !important;
-webkit-animation: timecode 15s 1 !important;
}
/* Assets (Animation) */
@-webkit-keyframes assets {
0% {
-webkit-opacity: 1;
}
100% {
-webkit-opacity: 0.25;
}
}
/* TimeCode (Animation) */
@-webkit-keyframes timecode {
0% {
-webkit-opacity: 0.25;
}
100% {
-webkit-opacity: 1.0;
}
}
JavaScript
function assets() {
"use strict";
document.getElementById("assets").classList.add("animation");
document.getElementById("media").classList.add("animation");
}
<!-- Continuity: (Javascript) -->
document.getElementById("media").addEventListener('ended', continuity);
function continuity() {
"use strict";
var assets = document.getElementById("assets");
assets.classList.add("timecode");
}
<!-- Aperture: (Javascript) -->
var callOnce = true;
function aperture() {
if ((media.duration - media.currentTime) < 5)
if (callOnce) {
sync();
callOnce = false;
}
}
function sync() {
"use strict";
var media = document.getElementById("media");
media.classList.add("timecode");
media.classList.remove("animation");
}
setInterval(aperture, 100);