[DAY - 53] video, play, pause, ended

• video
• play
• pause
• ended

 

1) video

 

html안에 image를 넣는것 처럼 video도 넣을 수 있다.

 

  <video src="asset/video1.mp4" 
  autoplay 
  muted 
  controls
  loop
  poster="images/01.png"
  width="400"
  ></video>

src : 경로

autoplay : 자동 재생

muted : 음소거

controls : 컨트롤 바

loop : 반복

poster : video가 로드 되기 전 나타낼 이미지

width : 너비

 

 

2) play / pause

 

    <script>
        let vid = document.querySelector('#vid');
        let btn1 = document.querySelector('.play');
        let btn2 = document.querySelector('.pause');

        btn1.addEventListener('click',e=>{
            vid.play();
        })        
        btn2.addEventListener('click',e=>{
            vid.pause();
        })        
    </script>

 

script에 play(), pause()를 사용하면 video를 재생, 일시정지를 할 수있다.

버튼에 변수와 할당을 한 뒤 event 생성을 통해 구현해 보았다.

 

 

    <script>
        let vid = document.querySelector('#vid');
        let btn1 = document.querySelector('.play');

        btn1.addEventListener('click', e => {
            let el = e.currentTarget;
            if (el.textContent === 'play') {
                vid.play();
                el.textContent = 'pause';
            } else {
                vid.pause();
                el.textContent = 'play'
            }
        })
    </script>

 

이렇게 코드를 작성하면 상태변수 없이 버튼 하나에 play와 pause 기능을 하게 할 수 있다.

 

 

    <script>
        let vid = document.querySelector('#vid');
        let btn = document.querySelector('span');

        btn.addEventListener('click', e => {
            vid.play();
            btn.classList.add('on')
        })
        vid.addEventListener('click', e => {
            vid.pause();
            btn.classList.remove('on')
        })
    </script>

play 버튼

play 중

video를 클릭했을 때

 

display : none이 들어있는 on class를 사용해 play버튼을 누르면 play()가 되며 동시에 none이 되고, 재생중일때 video를 클릭하면 pause가 되면서 play버튼에 on class가 remove된다.

 

 

3) ended

    <script>
        let vid = document.querySelector('#vid');
        let arrVid = ['asset/video1.mp4', 'asset/video2.mp4'];
        let cnt = 0;
        
        vid.muted = true;
        vid.play();
        
        vid.addEventListener('ended',e=>{
            cnt++;
            if(cnt>arrVid.length-1) cnt = 0;
            e.currentTarget.setAttribute('src', arrVid[cnt]);
            vid.play();
        })
    </script>

 

video가 여러 개 있는 배열을 만든 후 video에 ended event를 건다.

ended의 경우 해당 video가 끝났을 경우에 해당하는 조건이 된다.

위 코드의 경우 index 0번 video의 재생이 끝나면 1번 video가 재생이 된다.