• 회원가입
  • 로그인
  • 구글아이디로 로그인

[js] JS - play(), pause() 메서드 - 동영상 재생/멈춤. (= play메서드, pause메서드 = 플레이메서드, 포스메서드)

목차
  1. play(), pause() 예제 - 동영상 재생/멈춤
  2. play(), pause() 정의
  3. play(), pause() 구문

 

play(), pause() 예제 - 동영상 재생/멈춤

[방법1]

 

<button onclick="playHz()" type="button">Play Video</button>

<button onclick="pauseHz()" type="button">Pause Video</button><br> 


<video id="hz" width="320" height="176">

  <source src="https://vt.tumblr.com/tumblr_o600t8hzf51qcbnq0_480.mp4" type="video/mp4" type="video/mp4">

  HTML5 video 지원 않는 브라우저는 개나 줘보려.

</video>


<script> 

var hz = document.getElementById("hz"); 


function playHz() { 

  hz.play(); 


function pauseHz() { 

  hz.pause(); 

</script> 

 

결과보기


[방법2] ★

 

<button id="play" type="button">Play Video</button>

<button id="pause" type="button">Pause Video</button><br> 


<video id="hz" width="320" height="176">

  <source src="https://vt.tumblr.com/tumblr_o600t8hzf51qcbnq0_480.mp4" type="video/mp4">

  HTML5 video 지원 않는 브라우저는 개나 줘보려.

</video>


<script> 

var hz = document.getElementById("hz"),

 play = document.getElementById("play"),

 pause = document.getElementById("pause"); 

play.addEventListener('click', playVideo);

pause.addEventListener('click', pauseVideo);

    

function playVideo() { 

  hz.play(); 


function pauseVideo() { 

  hz.pause(); 

</script> 


결과보기

cf. jqeury 문법 https://homzzang.com/b/jquery-295

 

play(), pause() 정의

 

play() 메서드 : (video, audio) 재생.

pause() 메서드 : (video, audio) 멈추기 (= 일시정지).

 


 

※ IE9 이상, 주요 최신 브라우저 지원.

 

 

play(), pause() 구문

 

audio.play()

video.play()

 


[매개변수]

 

없음.

 


[반환값]

 

없음.

 


 


분류 제목
HTML_Objects JS - <option> 객체 ★ - 선택사항 (= 옵션사항 = option태그 = 옵션태그)
HTML_Objects JS - <output> 객체 - 계산결과값출력 (= 산출태그 = output태그 = 아웃풋태그) (HTML…
HTML_Objects JS - <p> 객체 - 글단락 (= p태그 = p요소 = 글문단 = 단락태그 = 문단태그 = 피태그)
HTML_Objects JS - <param> 객체 - 미디어매개변수 (= param태그 = 패럼태그 = 파람태그 = 패러미터태그 …
HTML_Objects JS - <pre> 객체 ★ - 공백줄바꿈보존 (= 보존태그 = 있는그대로태그 = 있는대로태그 = pre태그…
HTML_Objects JS - <progress> 객체 - 진행상태바 (=진행바 = 진행막대 = 작업막대 = progress태그 …
HTML_Objects JS - <q> 객체 - 짧은인용구 (= 짧은인용태그 = q태그 = 큐태그)
HTML_Objects JS - <s> 객체 - 취소선 (= 취소태그 = s태그 = 에스태그 = 스트라이크쓰루태그) (HTML5 재…
HTML_Objects JS - <samp> 객체 - 프로그램산출예제 (= 예제태그 = samp태그 = 샘프태그 = 샘플태그)
HTML_Objects JS - <script> 객체 ★ - JS코드입력 (= 동적기능언어입력 = script태그 = 스크립트태그)
HTML_Objects JS - <section> 객체 ★ - 문서단락 (= section태그 = 섹션태그, IE9)
HTML_Objects JS - <select> 객체 ★★ - 선택메뉴 (= select메뉴 = select태그 = 실렉트태그/셀렉…
HTML_Objects JS - <small> 객체 - 작은글씨 (= small태그 = 스몰태그)
HTML_Objects JS - <source> 객체 - 미디어소스 불러오기 (= source태그 = 소스태그, IE9)
HTML_Objects JS - <span> 객체 ★★★ - 인라인요소그룹 (= span태그 = 스팬태그)</span>
HTML_Objects JS - <strong> 객체 ★ - 굵은 글씨 (=폰트 굵게 = 글씨 굵게 = strong태그 = 스트롱태…
HTML_Objects JS - <style> 객체 ★ - 요소에 CSS스타일적용 (= style태그 = 스타일태그)
HTML_Objects JS - <sub> 객체 ★ - 아래첨자 (= 하단작은글씨 = 하단태그 = sub태그 = 서브태그)
HTML_Objects JS - <summary> 객체 - 세부사항의 머리글 (= summary태그 = 서머리태그 = 써머리태그)…
HTML_Objects JS - <sup> 객체 ★ - 위첨자 (= 상단작은글씨 = 상단태그 = sup태그 = 섭태그 = 서프태그 …
59/67
목록
찾아주셔서 감사합니다. Since 2012