Video.js 사용법

Jinwoo Choi·2021년 3월 11일
0

Video.js 사용법

Video.js 에 들어가서 사용하면 된다.

실제 Jsp 적용방법 ( 기본 사용 방법 )

<html>
<head>
	<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>
<body>
	<video id="my-video" class="video-js vjs-big-play-button vjs-fluid vjs-time-control" controls autoplay="false" preload="auto" data-setup="{}" >
		<source src="${pageContext.request.contextPath}/img/test/test.mp4" type="video/mp4"/>
	</video>
  	<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
</body>

data-setup 를 지정해 주지 않으면, 제대로 동작하지 않는 것 같다 ..

Video.js의 css

기본적으로 <video class="video-js" data-setup='{}'>
으로 사용을 하게 될것이다
이 코드를 사용하게 되면 화면 플레이 버튼이 좌측 상단에 위치하게 되는데, 이 부분을 가운데로 바꾸는 간단한 방법이 있다.
여기서

<video class="video-js vjs-big-play-centerd vjs-fluid" data-setup='{}'></video>

를 입력한다

vjs-big-play-centerd : 말 그대로 중앙에 버튼을 위치 시키는 css

vjs-fluid : 가로 사이즈를 100% 플레이 창으로 만드는 css

버튼을 숨기고 싶을때는
<head> 사이에

  <style type="text/css">
        .video-js .vjs-big-play-button{display: none;}
  </style>``` 

을 적용해주면 플레이 버튼이 사라지는 모습을 볼수 있다.

나머지는 video 태그와 사용법이 같다

JAVASCRIPT 로 플레이 동작 시 시간을 재는 코드를 만들어 보겠습니다.

JAVASCRIPT 타이머 적용

  <script>
    const video = document.querySelector("#my-video");
    var TotalTime;
    video.addEventListener("loadedmetadata", function() {
    TotalTime = video.duration;
    }
  </script>

document.querySelector 이라는 부분은 html 소스 중 #my-video(id값 을 가진) 영역을 찾아주고,
만약, document.querySelector(".my-video") 일땐 class값을 찾음
그걸 video 라는 const에 저장해 준것 뿐입니다( 사용 편리를 위해 )
video.addEventListener("loadedmetadata", function());
video가 로딩될때 전체 시간을 체크하기 위해 만들었습니다.
밖에서 그냥 video.duration 입력시 NaN값 출력

  var time = 0;
  var Interval;
  var video_status = false;
  function startTimer() {
        time++;
  }
  video.addEventListener("click", function() {
  	if(video_status === false){
  		video.play();	//비디오를 동작
  		Interval = setInterval(startTimer, 1000); //1초마다 startTimer 동작
  		video_status = true;
  	}else if(video_status === true){
  		clearInterval(Interval);	//Interval 동작을 중지)
  		video_status = false;
  		video.pause();	//비디오 동작 중지
  	}
  });

===을 사용한 이유는 문자열, 값을 둘다 비교하는 거라서 사용했습니다.

Video.js (복습만 가능하게 설정)

출처
출처 부분에서 복사한 부분입니다.

var disableForwardScrubbing = function(player) {
      return {
          // +++ Implement setSource() +++
          setSource: function setSource(srcObj, next) {
              next(null, srcObj);
          },
          // +++ Alter the setCurrentTime method +++
          setCurrentTime: function setCurrentTime(ct) {
              var percentAllowForward = 50,
                  // Determine percentage of video played
                  percentPlayed = player.currentTime() / player.duration() * 100;
              // Check if the time scrubbed to is less than the current time
              // or if passed scrub forward percentage
              if ( ct < currentTime() || percentPlayed > percentAllowForward ) {
                  // If true, move playhead to desired time
                  return ct;
              }
              // If time scrubbed to is past current time and not passed percentage
              // leave playhead at current time
              return player.currentTime();
          }
      }
  };

if ( ct < currentTime() || percentPlayed > percentAllowForward )
이 부분에서 currentTime() 에 자신이 원하는 시간을 넣으면
그 시간까지만 앞뒤로 조작 할 수 있습니다.

profile
목표는 1일 1커밋..!

0개의 댓글