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 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 로 플레이 동작 시 시간을 재는 코드를 만들어 보겠습니다.
<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(); //비디오 동작 중지 } });
===을 사용한 이유는 문자열, 값을 둘다 비교하는 거라서 사용했습니다.
출처
출처 부분에서 복사한 부분입니다.
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() 에 자신이 원하는 시간을 넣으면
그 시간까지만 앞뒤로 조작 할 수 있습니다.