HTML) 멀티 미디어 관련 태그

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

멀티미디어 관련

 

audio / video 태그

- src

- controls : 제어기능 시각화 여부 (controls 속성이 없으면 화면에 보이지 않음)

 

audio

<h1>멀티미디어 관련</h1>
    <audio src="../../sample/audio/major.mp3" controls></audio>

controls가 없다면 브라우저에 표시 되지 않으니 반드시 controls 속성을 적용해줘야 합니다.

플레이 버튼을 누르니 음악이 재생되는 것을 확인할 수 있습니다.

 

autoplay 속성

- 자동 플레이

<audio src="../../sample/audio/major.mp3" controls autoplay></audio>

 

플레이 버튼을 누르지 않아도 자동으로 실행되는 것을 확인할 수 있습니다.

 

muted 속성

- 음소거 처리

<audio src="../../sample/audio/major.mp3" controls autoplay muted></audio>

 

autoplay로 인해서 자동 실행되지만 muted 속성으로 인해 음소거 처리 된 것을 확인할 수 있습니다.

 

video

<video src="../../sample/video/small.mp4" controls autoplay muted width="300px"></video>

 

video도 controls 속성이 없으면 브라우저에 표시되지 않기 때문에 필수이며, 마찬가지로 autoplay, muted 속성을 주어 자동재생 / 음소거 처리 되었습니다. width로 동영상의 크기를 조절해줄 수 있습니다.

---

유튜브 동영상 가져오기

유튜브에 원하는 영상 → 공유버튼 → 퍼가기 → 링크 복사 붙여넣기

<iframe 
        width="560" 
        height="315" 
        src="https://www.youtube.com/embed/zY_1CNcMrfo" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
    </iframe>

이렇게 원하는 영상을 가져올 수 있습니다.