TAG
JavaScript
Result
Run
License
<video id="player" src="http://resrc.devdic.com/media/video/movie.mp4"> </video> <div> <button type="button" id="btn-toggle" data-action="play">Play</button> </div>
window.addEventListener("load", function() { const $elPlayer = document.getElementById("player"); const $elBtnToggle = document.getElementById("btn-toggle"); const $mediaAction = { "play": () => $elPlayer.play(), "pause" : () => $elPlayer.pause() }; $elBtnToggle.addEventListener("click", e => { let action = e.currentTarget.dataset.action; let promise = $mediaAction[action](); if(promise) { promise.then( () => console.log("play"), error => console.log(error.message) ); } if(action == "play") { e.currentTarget.dataset.action = "pause"; e.currentTarget.textContent = "Pause"; } else { e.currentTarget.dataset.action = "play"; e.currentTarget.textContent = "Play"; } }); $elPlayer.addEventListener("ended", () => { $elBtnToggle.dataset.action = "play"; $elBtnToggle.textContent = "Play"; }); });
Console
expand_less
License
License
by DevDic
Close