<video> 태그

웹프로그래밍 HTML/태그와 멀티미디어

<video> 태그

별초롱언니 2025. 3. 5. 17:43

▣ <video> 태그 사용

· 비디오 파일을 웹 문서에 삽입할 때 사용

· <source> 태그로 여러 가지의 비디오 파일을 동시에 제공

▣ <video> 태그 속성

· src : 재생할 비디오 파일이 저장된 경로 표시

· controls : 재생 제어기 표시

· width, height : 비디오의 가로/세로 크기 설정

· loop : 반복 재생

· autoplay : 웹 문서가 열림과 동시에 자동 재생

· muted : 음소거 상태로 시작

· preload : 비디오 파일을 사용 여부와 상관없이 미리 다운로드함

· poster : 비디오 파일이 재생되기 전이나 다운로드 되지 않고 있는 경우 표시 될 이미지의 URL을 표시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>비디오 삽입하기</title>
</head>
<body>
    <h3>비디오 자동 재생</h3>
    <video src="../btob.mp4" controls loop autoplay width="300" height="250"></video>

    <h3>비디오 수동 재생</h3>
    <video src="../btob1.mp4" controls width="300" height="250"></video>

    <h3>비디오 다중 재생-비디오 파일이 현재 폴더에 있는 경우</h3>
    <video controls autoplay width="300" height="250">
        <source src="btob2.mp4" type="viedo/mpeg">
        <source src="btob2.ogv" type="viedo/ogg">
        <source src="btob2.webm" type="viedo/webm">
        비디오 파일을 재생할 수 없습니다.
    </video>

    <h3>비디오-다중 재생-비디오 파일이 웹 사이트에 있는 경우</h3>
    <video controls autoplay width="300" height="250" poster="btob.jpg">
        <source src="http://vedia.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4; codecs="avc1, mp4a"'>
        <source src="http://vedia.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
        비디오 파일을 재생할 수 없습니다. 
    </video>
</body>
</html>