2017-02-23

http://b1ix.net/297 의 내용을 응용하여 모바일에서 사용할만한 좀 더 그럴 듯한 VIDEO플레이어를 만들어 보았다.

<div id="video-container">
  <video id="video">
    <source src="../../post_inc/video/test_video1.mp4" type="video/mp4">
    <p>
	  해당 브라우저는 HTML5 video태그를 지원하지 않습니다..
    </p>
  </video>

<div id="play_img"></div>
<input type="range" id="seek-bar" value="0">
</div>

<style>
#video{
	width:100%;
	height:auto;
}

#video-container{
	position:relative;
	width:100%;
	height:auto;
}

#play_img{
	background:url('../../post_inc/video/play.PNG') no-repeat;
	background-position:50% 50%;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	opacity:0.8;
}

#seek-bar{
	position:absolute;
	left:o;
	bottom:-10px;
	width:100%;
    -webkit-appearance: none;
}

#seek-bar::-webkit-slider-runnable-track {
    height: 5px;
    background: url('../../post_inc/video/vd_bar_ground.PNG');
}

#seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
	background:url('../../post_inc/video/vd_bar_on.PNG') no-repeat;
	background-size:100% 100%;
    height: 32px;
    width: 32px;
	margin:-12px 0 0 -10px;
}
</style>

<script>
window.onload = function() {

	// Video
	var video = document.getElementById("video");

	// Buttons
	var playButton = document.getElementById("play_img");

	// Sliders
	var seekBar = document.getElementById("seek-bar");
	var volumeBar = document.getElementById("volume-bar");

	playButton.addEventListener("click", function() {
	  if (video.paused == true) 
	  {
		video.play();
		playButton.style.display = "none";
	  }
	});

	video.addEventListener("click", function(){
		if (video.paused == false) 
		{
			video.pause();
			playButton.style.display = "block";
		}
	});

	seekBar.addEventListener("change", function() {
		var time = video.duration * (seekBar.value / 100);
		video.currentTime = time;
	});

	video.addEventListener("timeupdate", function() {
		var value = (100 / video.duration) * video.currentTime;
		seekBar.value = value;
	});

	seekBar.addEventListener("mousedown", function() {
		video.pause();
		playButton.style.display = "block";
	});

	seekBar.addEventListener("mouseup", function() {
		video.play();
		playButton.style.display = "none";
	});
}
</script>