[HTML] Video 커스텀 컨트롤 버튼

• target:  Video 커스텀 컨트롤 버튼

 

---

• method: Video 태그 관련

<div id="video-container">
  <video id="video" width="640" height="365">
    <source src="../../post_inc/video/test_video1.mp4" type="video/mp4">
    <p>
	  해당 브라우저는 HTML5 video태그를 지원하지 않습니다..
    </p>
  </video>
  <!-- Video Controls -->
  <div id="video-controls">
    <button type="button" id="play-pause">재생</button>
    <input type="range" id="seek-bar" value="0">
    <button type="button" id="mute">음소거</button>
    <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
    <button type="button" id="full-screen">전체화면</button>
  </div>
</div>

<script>
window.onload = function() {
	// Video
	var video = document.getElementById("video");

	// Buttons
	var playButton = document.getElementById("play-pause");
	var muteButton = document.getElementById("mute");
	var fullScreenButton = document.getElementById("full-screen");

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

	// 재생/일시정지 기능
	playButton.addEventListener("click", function() {
	  if (video.paused == true) {
		// Play the video
		video.play();

		// Update the button text to 'Pause'
		playButton.innerHTML = "일시정지";
	  } else {
		// Pause the video
		video.pause();

		// Update the button text to 'Play'
		playButton.innerHTML = "재생";
	  }
	});


	// 음소거 기능
	muteButton.addEventListener("click", function() {
	  if (video.muted == false) {
		// Mute the video
		video.muted = true;

		// Update the button text
		muteButton.innerHTML = "소리켜기";
	  } else {
		// Unmute the video
		video.muted = false;

		// Update the button text
		muteButton.innerHTML = "음소거";
	  }
	});

	// 전체화면 기능
	fullScreenButton.addEventListener("click", function() {
	  if (video.requestFullscreen) {
		video.requestFullscreen();
	  } else if (video.mozRequestFullScreen) {
		video.mozRequestFullScreen(); // Firefox
	  } else if (video.webkitRequestFullscreen) {
		video.webkitRequestFullscreen(); // Chrome and Safari
	  }
	});


	// 재생바가 있는 위치로 화면 이동
	seekBar.addEventListener("change", function() {
	  // Calculate the new time
	  var time = video.duration * (seekBar.value / 100);

	  // Update the video time
	  video.currentTime = time;
	});


	// 재생시간에 따른 재생바 이동
	video.addEventListener("timeupdate", function() {
	  // Calculate the slider value
	  var value = (100 / video.duration) * video.currentTime;

	  // Update the slider value
	  seekBar.value = value;
	});

	// 재생바 드래그하려고 클릭시에 동영상 정지
	seekBar.addEventListener("mousedown", function() {
	  video.pause();
	});

	// 재생바 클릭 후에 동영상 재생
	seekBar.addEventListener("mouseup", function() {
	  video.play();
	});

	// 볼륨바 기능
	volumeBar.addEventListener("change", function() {
	  // Update the video volume
	  video.volume = volumeBar.value;
	});
}
</script>

 

---

• desc: 

- video 태그의 controls 옵션을 작성하여도, 재생바는 표시되지만, 해당 재생바의 위치를 옮겨서 원하는 위치에서 재생하지는 않음

- 따라서 위 방식을 통해 별도 video 컨트롤러 제작 필요

---

• source:

http://b1ix.net/297

b1ix | [HTML] 사용자 정의 VIDEO 태그 2017-02-23

https://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

Building Custom Controls for HTML5 Videos - Treehouse Blog