function doFirst() {
barSize = 600;
myMovie = document.getElementById("myMovie");
playButton = document.getElementById("playButton");
bar = document.getElementById("defaultBar");
progressBar = document.getElementById("progressBar");
playButton.addEventListener("click", playOrPause, false);
bar.addEventListener("click", clickedBar, false);
}
function playOrPause(){
if (!myMovie.paused && !myMovie.ended) {
myMovie.pause();
playButton.innerHTML= "Play";
window.clearInterval(updateBar);
} else {
myMovie.play();
playButton.innerHTML = "Pause";
updateBar = setInterval(update, 500);
}
}
function update() {
if (!myMovie.ended) {
var size = parseInt(myMovie.currentTime*barSize/myMovie.duration);
progressBar.style.width = size+"px";
} else {
progressBar.style.width = "0px";
playButton.innerHTML= "Play";
window.clearInterval(updateBar);
}
}
function clickedBar(e) {
if (!myMovie.paused && !myMovie.ended) {
var mouseX = e.pageX - bar.offsetLeft;
var newtime = mouseX*myMovie.duration/barSize;
myMovie.currentTime = newtime;
progressBar.style.width = mouseX+"px";
}
}
window.addEventListener("load", doFirst, false);
'html5' 카테고리의 다른 글
| html form 샘플 (0) | 2016.11.10 |
|---|---|
| popup (0) | 2016.11.09 |
| 프로그래스바 실시간으로 변경하기... (0) | 2014.09.16 |
| video player play 기능 추가 (0) | 2014.09.16 |
| video player skin (0) | 2014.09.16 |