FE/인터렉티브 웹

비디오 ·오디오 태그 - 멀티미디어 콘텐츠 삽입하기

이제하네 2023. 9. 19. 14:25

<audio> - 오디오 파일 재생하기

  • <audio>태그를 이용하면 확장기능 없이 다양한 오디오 파일을 웹페이지 삽입 가능
  • <audio>태그에 적용할수 있는 속성
    • controls : 오디오 파일을 재생하는 컨트롤 패널 생성 
    • autopaly : 웹 페이지를 열면 자동으로 재생
    • loop : 오디오 파일을 무한으로 반복
    • preload : 오디오 파일을 재생하기전 파일을 미리 불러옴
<body>
    <audio src="img/calm.mp3" controls></audio>
</body>

<audio> 실행화면

 

<video> - 동영상 파일 재생하기

  • <video> 태그를 사용하면 웹 브라우저에 동영상 재생가능
  • <video> 태그에 적용할수 있는 속성
    • controls : 동영상 파일을 재생하는 컨트롤 패널 생성
    • autoplay : 웹 페이지를 열면 자동으로 동영상 파일 재생
    • lool : 동영상 파일을 무한으로 반복하여 재생
    • muted : 동영상에서 소리가 나지 않도록 설정
    • preload : 동영상 파일을 재생하기 전에 모든 파일을 미리 불러옴
    • poster : 동영상 플레이어 초기 화면에 보여 줄 이미지 지정
<body>
    <video src="img/cloud.mp4" controls></video>
</body>

<video> 실행화면

 

<body>
    <video src="img/cloud.mp4" poster="img/rose.jpg" controls></video>
</body>

<video> 태그 안에 poster속성값을 넣은 실행화면