티스토리 뷰

자바스크립트(javascript)

[javascript/html] videojs 비디오 custom progress bar 구현

개발자 고포고 2022. 10. 9. 22:50
반응형

[javascript/html] videojs 비디오 custom progress bar 구현

 

이징(애니메이션)을 넣어서 표현하려고하였으나, 자연스럽게되긴하지만, 딜레이가 발생하여 정확한 프로그래스 표현에 한계가있어서 이징없이 구현하였다, 포스팅 요청시 이징 구현한 애니메이션 포함된 프로그래스바도 포스팅하겠다

 

 


#html 특별한 코드가 없다, relative와 absolute를 이용하여 bar와 value를 겹치게하였고, width를 %로 프로그래스바 구현

<!DOCTYPE html>
<html>
<body>
    <div style="height:20px; width:1800px;position: relative;background-color: red;" >
        <div class="hello" id="prg" style="top:0;bottom: 0; left:0;right:0; position:absolute; width:0%; background-color: aqua; " ></div>
    </div>
    <video id="myPlayer"  class="video-js" muted></video>
    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
    <script src="./progress.js"></script>
</body>
</html>

 

#javascript 이전에 포스팅한 timeupdate 이벤트를 활용하여, 연산된 값 적용


var player = videojs("myPlayer", {
    sources: [{ src: "/resources/1.mp4", type: "video/mp4" }],
    controls: false,
  });

  player.on("timeupdate", (e) => {
    document.getElementById('prg').style.width = (player.currentTime()/player.duration()*100).toFixed(0)+"%";
  });
  
  player.on("ended", () => {
      player.play();
  });
  
  player.load();
  player.play();

 

#progressbar #javascript #videojs #html #timeupdate

반응형
저작자표시

'자바스크립트(javascript)' 카테고리의 다른 글

[javascript/html] 자리수 만큼 남는 공간을 0으로 채우기(자리수 맞추기)  (0) 2022.10.10
[javascript/html] 자식 태그가 부모보다 투명도 높게 설정하기(opacity)  (0) 2022.10.10
[html/javascript] videojs progress 처리를 위한 이벤트 및 함수  (0) 2022.10.09
[javascript/npm] npm i 설치 잘 안될때, ERESOLVE, could not resolve  (0) 2022.10.07
[react/javascript] 리액트 table에서 drag로 순서변경하기  (0) 2022.10.05
댓글
반응형