TAG
CSS
JavaScript
Result
Run
License
<p> First, place your mouse pointer on the video. Then click the hide button. Once again, hover your mouse pointer over the video. </p> <video id="player" muted autoplay controls> <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> <button type="button" id="btn-hide">Controls Hide</button>
video { float: left; margin-right: 20px; } body:hover::after { content: "영상 위에 마우스 포인터를 올려 컨트롤러를 확인 후 버튼을 누른 뒤 다시 확인하세요."; position: absolute; background: #000; color: #FFF; padding: 10px; width: 70%; left: 5px; top: 5px; }
window.addEventListener("load", function() { let elPlayer = document.querySelector("#player"); document.querySelector("#btn-hide").onclick = e => { elPlayer.controls = false; }; });
Console
expand_less
License
License
by DevDic
Close