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>Current PlaybackRate</dt> <dd></dd> <dt>Change PlaybackRate</dt> <dd> <select id="playbackrate"> <option value="1">Default</option> <option value="1.2">1.2 times speed</option> <option value="1.5">1.5 times speed</option> </select> </dd> </dl> </div>
.wrapper { display: flex; flex-wrap: wrap; }
window.addEventListener("load", function() { let elPlayer = document.querySelector("#player"); let curPlaybackRate = elPlayer.defaultPlaybackRate; let elPlaybackRateStatus = document.querySelector(".dashboard > dd:nth-of-type(1)"); elPlaybackRateStatus.textContent = curPlaybackRate; document.querySelector("#playbackrate").onchange = e => { let playbackRate = e.target.value; elPlayer.playbackRate = playbackRate; }; elPlayer.ontimeupdate = e => elPlaybackRateStatus.textContent = e.target.playbackRate; });
Console
expand_less
License
License
by DevDic
Close