HTML

html5 video /audio

낮햇볕 2022. 2. 12. 16:42

비디오(video) - 비디오 출력된다

<video> 3가지 포맷지원

- MP4 (MIME 타입: video/mp4)

- WebM (MIME 타입: video/webm)

- Ogg (MIME 타입: video/ogg)

<video>
        <source src="비디오주소" type="video/브라우저">
</video>

 

video속성

autoplay : 자동 재생

<video autoplay>
        <source src="비디오주소" type="video/브라우저">
</video>

 

controls : 컨트롤러 표시 재생마음대로 돌릴수있음/ 소리도조절가능

<video controls>
        <source src="비디오주소" type="video/브라우저">
</video>

 

loop : 반복 재생

<video loop>
        <source src="비디오주소" type="video/브라우저">
</video>

 

muted : 음소거

<video muted>
        <source src="비디오주소" type="video/브라우저">
</video>

 

poster : 비디오 다운로드하는 동안이나 사용자가 재생버튼 누르기 전까지 나오는 비디오이미지

<video poster>
        <source src="비디오주소" type="video/브라우저">
</video>

 

 

오디오

<audio>
        <source src="비디오주소" type="audio/브라우저">
</audio>

 

오디오속성

autoplay : 오디오의 자동 재생 여부

<audio autoplay>
        <source src="오디오경로" type="audio/브라우저">
</audio>

 

controls : 오디오의 기본동작조절가능 /소리 줄였다 재생부분선택가능

<audio controls>
        <source src="비디오주소" type="audio/브라우저">
 </audio>

 

loop : 오디오반복재생

<audio loop>
        <source src="비디오주소" type="audio/브라우저">
 </audio>

 

preload : 페이지가 로드될때 오디오 파일이 같이 로드되어야하는지의 여부

 

prelad종류

auto :  페이지로드될때 전체 오디오 파일 로드

none : 메타데이터만 로드

metadata : 오디오파일 로드안됨

 

<audio preload=""auto|metadata|non>

        <source src="비디오주소" type="audio/브라우저">
 </audio>

 

 

 

'HTML' 카테고리의 다른 글

Canvas  (0) 2022.02.13
object  (0) 2022.02.12
html5 form  (0) 2022.02.10
레이아웃  (0) 2022.02.08
테이블태그  (0) 2022.01.31