[jQuery] video 태그 control 하기

button을 통해 클릭 한 뒤 동영상이 재생되게 해야 했는데 

 

HTML구조

<div class="subVideoInner">
  <video id="video01" controls source src="/app/layout/web/video/RD=03.mp4" type="video/mp4"></video>
  <img id="videoBtn01" class="videoBtn" src="/app/layout/web/images/videoButton.png" alt="비디오버튼">
</div>

CSS

.subVideoInner {position: relative;}
.subVideoInner > video {display: block; width: 100%;}
.subVideoInner > .videoBtn {position: absolute; bottom:3%; right: 3%; display: block; cursor: pointer;}

Script

$(document).ready(function(){
      $('#videoBtn00').on('click', function(){
      $('#videoBtn00').hide();
      $('#video00')[0].play();
    });
      $('#videoBtn01').on('click', function(){
      $('#videoBtn01').hide();
      // $('#video01').get(0).play();
      $('#video01')[0].play();
    });
});

 

구글링 결과

 

$('#video01').get(0).play();
$('#video01').get(0).stop();
$('#video01').get(0).currentTime();
//을 사용해도 되고

$('#video01')[0].play();
//id선택자를 사용했다면 페이지내에서 고유한 이름이므로 배열을 통해 구할 수도 있다.
//결론, 두개 다 가능

 

---

[참고자료]

html5 video tag 정지, 재생, 처음부터 재생 시키기

 

[동영상 삽입과 관련된 자료]

동영상 삽입하는 법

동영상 삽입 태그