TAG
CSS
JavaScript
Result
Run
License
<div class="wrapper"> <video id="player" muted autoplay controls crossorigin="anonymous"> <source src="http://resrc.devdic.com/media/video/movie.mp4" type="video/mp4" /> <source src="http://resrc.devdic.com/media/video/movie.ogg" type="video/ogg" /> </video> <dl class="dashboard"> <dt>Seek: <span></span></dt> <dd> <input type="range" id="seek" min="0" max="12" step="1" value="0" /> </dd> </dl> </div> <p><output></output></p>
.wrapper { display: flex; flex-wrap: wrap; }
window.addEventListener("load", function() { const $elPlayer = document.querySelector("#player"); const $elOutput = document.querySelector("output"); const $elSeek = document.querySelector(".dashboard > :first-child > span"); document.querySelector("#seek").onchange = e => { let seek = e.target.value; $elSeek.textContent = seek; $elPlayer.currentTime = seek; }; $elPlayer.addEventListener("seeked", e => { $elOutput.textContent = `${e.type} event fired.`; }); });
Console
expand_less
License
License
by DevDic
Close