HTML5 비디오 API를 활용하여 자동 재생 및 일시정지 기능 구현
HTML5는 비디오 요소를 통해 웹 사이트에서 비디오를 쉽게 재생할 수 있는 기능을 제공합니다. 이를 통해 우리는 자동 재생 및 일시정지와 같은 기능을 구현할 수 있습니다.
비디오 요소 추가
먼저, HTML 문서에 비디오 요소를 추가해야 합니다. 비디오 요소는 <video> 태그를 사용하여 생성할 수 있습니다. 비디오 파일의 경로는 src 속성에 지정합니다.
<video src="video.mp4" id="myVideo"></video>
자동 재생 기능 구현
다음으로, 자동 재생 기능을 구현해 보겠습니다. 자동 재생은 autoplay 속성을 사용하여 구현할 수 있습니다. 이 속성은 비디오가 로딩되면 자동으로 재생됩니다.
<video src="video.mp4" id="myVideo" autoplay></video>
일시정지 기능 구현
일시정지 기능을 구현하기 위해서는 JavaScript를 사용해야 합니다. 우선, 비디오 요소를 JavaScript에서 접근하기 위해 getElementById 메서드를 사용하여 해당 요소를 가져옵니다.
var video = document.getElementById("myVideo");
그리고, 일시정지 기능을 구현할 버튼을 만듭니다. 버튼을 클릭하면 pause 메서드를 사용하여 비디오를 일시정지할 수 있습니다.
<button onclick="video.pause()">일시정지</button>
전체 코드
<video src="video.mp4" id="myVideo" autoplay></video>
<button onclick="video.pause()">일시정지</button>
이제 HTML5 비디오 API를 활용하여 자동 재생 및 일시정지 기능을 구현할 수 있습니다.