dev._.note

[HTML] media 본문

Dev/HTML

[HTML] media

Laena 2023. 2. 25. 08:16

media 관련 태그

audio, video시각화

controls사용 (controls="controls"생략가능)

속성 ▼

  • autoplay : 페이지 접속시 자동재생
  • muted : 페이지 접속시 음소거처리
  • loop : 반복재생
  • preload : 기본적으로 브라우져들은 preload를 미리 차단
  • auto(기본설정) - 페이지로딩시 전체 오디오파일도 같이 로드
  • metadata - 페이지로딩시 메타데이터(데이터를 설명하는 데이터)만 로드
  • none - 페이지로딩시 오디오파일을 로드하지 않음
  • poster : 썸네일, 영상로드가 느려지거나 재생전에 보여주는 이미지

예제

<body>
    <h1>media</h1>
    <h2>audio</h2>
    <!-- <audio src="../sample/audio/major.mp3" controls muted loop preload="metadata"></audio> -->
    <audio controls loop muted autoplay>
        <source src="../sample/audio/major.mp3">
        <!-- fallback(실패했을때 로딩되는 문구) -->
        당신의 브라우져는 audio태그를 지원하지 않습니다.
    </audio>

    <h2>video</h2>
    <!-- <video src="../sample/video/small.mp4" controls loop muted poster="../sample/image/city1.PNG" width="300px"></video> -->
    <video>
        <!-- 
            pc 웹브라우져라면 mp4, webm, ogg 모두처리가능 
            mobile 브라우져라면 mp4, 3gp포맷 처리가능
            영상은 용량이 크기때문에 보통 영상관리사이트에서 관리하고 링크만 가져와서 사용
            (예: 유튜브 share 임베드)
        -->
        <source src="../sample/video/small.mp4" type="video/mp4">
        <source src="../sample/video/small.webm" type="video/webm">
        <source src="../sample/video/small.ogv" type="video/ogg">
        당신의 브라우져는 video태그를 지원하지 않습니다.
    </video>
    
    <iframe width="560" height="315" src="https://www.youtube.com/embed/k3rUzmGK1Hs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
저작자표시 비영리 변경금지

'Dev > HTML' 카테고리의 다른 글

[HTML] HTML(Hyper Text Markup Language)이란?  (1) 2023.03.21
[HTML] 요소(Elemnet)의 구조  (0) 2023.03.01
[HTML] ifram 관련 태그  (0) 2023.02.25
[HTML] Link(링크)  (0) 2023.02.25
[HTML] Image(이미지)  (0) 2023.02.25
'Dev/HTML' Related Articles more