비디오 및 오디오 컨트롤, 자동재생 등 속성 활용
HTML의 <video>
와 <audio>
요소를 사용하여 비디오와 오디오를 웹 페이지에 삽입할 때, 다양한 속성을 활용하여 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 비디오 및 오디오 컨트롤, 자동재생 등의 속성에 대해 자세히 알아보겠습니다.
비디오 컨트롤 (controls
) 속성
controls
속성을 사용하면 비디오 재생을 제어할 수 있는 컨트롤 버튼이 표시됩니다. 사용자는 컨트롤 버튼을 클릭하여 재생, 일시정지, 이동 등의 동작을 수행할 수 있습니다.
아래는 controls
속성을 사용하여 비디오 컨트롤을 활성화하는 예시입니다:
<video src="video.mp4" controls>
이 브라우저는 비디오를 지원하지 않습니다.
</video>
위의 예시에서는 <video>
요소에 controls
속성을 추가하여 비디오 컨트롤을 활성화하였습니다. 사용자는 컨트롤 버튼을 이용하여 비디오를 제어할 수 있습니다.
오디오 컨트롤 (controls
) 속성
오디오도 비디오와 마찬가지로 controls
속성을 사용하여 컨트롤 버튼을 활성화할 수 있습니다. 사용자는 컨트롤 버튼을 클릭하여 오디오를 재생, 일시정지, 이동 등의 동작을 수행할 수 있습니다.
아래는 controls
속성을 사용하여 오디오 컨트롤을 활성화하는 예시입니다:
<audio src="audio.mp3" controls>
이 브라우저는 오디오를 지원하지 않습니다.
</audio>
위의 예시에서는 <audio>
요소에 controls
속성을 추가하여 오디오 컨트롤을 활성화하였습니다. 사용자는 컨트롤 버튼을 이용하여 오디오를 제어할 수 있습니다.
자동재생 (autoplay
) 속성
autoplay
속성을 사용하면 비디오나 오디오가 자동으로 재생됩니다. 페이지가 로드될 때 자동으로 재생되므로, 사용자는 재생 버튼을 클릭하지 않아도 됩니다.
아래는 autoplay
속성을 사용하여 비디오를 자동으로 재생하는 예시입니다:
<video src="video.mp4" autoplay>
이 브라우저는 비디오를 지원하지 않습니다.
</video>
위의 예시에서는 <video>
요소에 autoplay
속성을 추가하여 비디오를 자동으로 재생하도록 설정하였습니다.
반복재생 (loop
) 속성
loop
속성을 사용하면 비디오나 오디오가 반복해서 재생됩니다. 재생이 끝나면 다시 처음부터 재생되며, 사용자는 재생 버튼을 클릭하지 않아도 됩니다.
아래는 loop
속성을 사용하여 비디오를 반복해서 재생하는 예시입니다:
<video src="video.mp4" loop>
이 브라우저는 비디오를 지원하지 않습니다.
</video>
위의 예시에서는 <video>
요소에 loop
속성을 추가하여 비디오를 반복해서 재생하도록 설정하였습니다.
마무리
HTML의 <video>
와 <audio>
요소를 사용하여 비디오와 오디오를 웹 페이지에 삽입할 때, controls
, autoplay
, loop
등의 속성을 활용하여 사용자 경험을 향상시킬 수 있습니다. 다양한 속성을 조합하여 원하는 기능을 구현해보세요. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."