-
비디오 및 오디오 컨트롤, 자동재생 등 속성 활용
IT창고/HTML 2023. 7. 19. 13:46반응형비디오 및 오디오 컨트롤, 자동재생 등 속성 활용
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의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!반응형