1. 멀티미디어 파일을 삽입할 때 쓰는 object 태그
object 태그는 오디오, 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 수 있다.
width와 height 속성으로 크기를 지정하고
data 속성에 멀티미디어 파일을 지정한다.
<object width="500" height="300" data="product.pdf"></object>
2. 오디오, 비디오 파일을 삽입하는 audio, video 태그
audio 태그와 video 태그를 사용할 때는
음악이나 영상을 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는
controls 속성을 함께 사용한다.
(video 태그를 사용할 때 비디오 파일의 너비를 지정해주는 것이 좋다.)
<audio src="medias/spring.mp3" controls></audio>
<br>
<video src="medias/salad.mp4" controls width="500"></video>
3. audio, video 태그의 속성
controls 컨트롤 바 표시
autoplay 오디오나 비디오를 자동으로 실행
loop 오디오나 비디오를 반복 재생
muted 오디오나 비디오의 소리 제거
width, height 비디오 플레이어의 너비와 높이 지정
(플레이어가 보이지 않게 하려면 controls 속성을 지우면 된다.)
※ 대부분의 웹 브라우저에서는 오디오, 소리가 있는 비디오 파일의 자동 재생을 금지하고 있으므로
자동 재생은 마이크로소프트 엣지 브라우저를 통해 확인할 수 있다.
<audio src="medias/spring.mp3" autoplay loop></audio>
더보기
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.