움짤 mp4 자체버튼 트랙바
페이지 정보
작성자 비타주리 작성일 22-05-16 15:05 조회 3,844 댓글 1본문
<div id=myDiv style=width:100%;cursor:pointer;overflow:hidden>
<video id=myVideo style=width:100%;display:block src=https://blog.kakaocdn.net/dn/cavOpG/btrCfnSBtqQ/VvhwYK7dAsViymV2lklxk1/tfile.mp4 autoplay loop muted></video>
<div id=trackBar style=position:relative;width:0%></div>
</div>
<script>
pixelWidth = 600; // 원본가로
pixelHeight = 338; // 원본세로
barHeight = 10; // 트랙바 세로픽셀
barColor = "#c0000080";
myDiv.style.height = myDiv.offsetWidth * pixelHeight / pixelWidth + "px";
trackBar.style.height = trackBar.style.bottom = barHeight + "px";
trackBar.style.backgroundColor = barColor;
isPlay = 1;
myDiv.onclick = function() {
myVideo[isPlay ? "pause" : "play"]();
isPlay = !isPlay;
}
setInterval(function() {
trackBar.style.width = myVideo.currentTime / myVideo.duration * 100 + "%";
}, 100);
</script>
<video id=myVideo style=width:100%;display:block src=https://blog.kakaocdn.net/dn/cavOpG/btrCfnSBtqQ/VvhwYK7dAsViymV2lklxk1/tfile.mp4 autoplay loop muted></video>
<div id=trackBar style=position:relative;width:0%></div>
</div>
<script>
pixelWidth = 600; // 원본가로
pixelHeight = 338; // 원본세로
barHeight = 10; // 트랙바 세로픽셀
barColor = "#c0000080";
myDiv.style.height = myDiv.offsetWidth * pixelHeight / pixelWidth + "px";
trackBar.style.height = trackBar.style.bottom = barHeight + "px";
trackBar.style.backgroundColor = barColor;
isPlay = 1;
myDiv.onclick = function() {
myVideo[isPlay ? "pause" : "play"]();
isPlay = !isPlay;
}
setInterval(function() {
trackBar.style.width = myVideo.currentTime / myVideo.duration * 100 + "%";
}, 100);
</script>
비타주리님의 댓글
비타주리 작성일https://sir.kr/g5_tip/18499