Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

나만의 코딩 일지

[HTML/CSS] 멀티미디어 본문

HTML

[HTML/CSS] 멀티미디어

namgung 2022. 6. 27. 18:06

멀티미디어

  1. <audio>
  • html5에서 음악이나 오디오 같은 사운드를 재생하기 위해 사용
  • 속성 종류
    • src="url" : 오디오 파일의 위치를 연결, 명시
    • controls : 웹 화면에 재생 컨트롤 막대를 표시
    • muted : 오디오가 재생 중이지만 소리를 끔(음소거 처리)
    • loop : 오디오를 반복 재생
    • autoplay : 오디오를 자동 재생(크롬에서는 자체적으로 자동 재생을 제한하고 있으므로 개별성 하지 않을 경우 적용이 되지 않음)
    • preload : (auto/metadata/none) 재생 버튼을 눌러 재생하기 전 오디오 파일을 다운로드해 준비
  • 오디오 요소 파일 확장자
    • MP3 : Moving Picture Experts Group에 의해 개발, 손실 압축형 파일 형식으로 가장 많이 사용
    • WAV : IBA과 Microsoft에 의해 개발, Microsoft의 표준 오디오 파일 형식
    • Ogg : Xiph 재단에 의해 개발, MP3의 대안으로 개발된 특허권으로 보호되지 않은 개방형 공개 멀티미디어 파일 형식
<body>
    <audio src="file/test_ado.mp3" controls loop></audio> 
    <!--controls를 사용해 컨트롤 막대를 화면에 표시하고 loop를 사용해 오디오를 반복 재생한다.-->
</body>

  1. <video>
  • html5에서 영상을 실행하기 위해 사용
  • 속성 종류
    • src="url" : 비디오 파일의 위치를 연결, 명시
    • controls : 웹 화면에 재생 컨트롤 막대를 표시
    • muted : 비디오가 재생 중이지만 소리를 끔(음소거 처리)
    • loop : 비디오를 반복 재생
    • autoplay : 비디오를 자동 재생(크롬에서는 자체적으로 자동 재생을 제한하고 있으므로 개별성하지 않을 경우 적용이 되지 않음)
    • preload : (auto/metadata/none) 재생 버튼을 눌러 재생하기 전 비디오 파일을 다운로드해 준비
    • poster="url" : 파일을 다운로드 중 사용자가 보이게 될 이미지를 명시
    • width=" " : 비디오 화면의 넓이 지정
    • height=" " : 비디오 화면의 높이 지정
  • 오디오 요소 파일 확장자
    • MP4 (MIME 타입: video / mp4)
    • WebM (MIME 타입: video / webm)
    • Ogg (MIME 타입: video / ogg)
<body>
 <video src="file/korea_video.mp4" width="400" height="200" controls muted></video>
 <!-- width와 height를 사용해 넓이와 높이를 지정하고 controls를 사용해 컨트롤 막대를 화면에 표시하고 muted를 상용해 영상은 재생되나 음소거 시킨다. -->
</body>

  1. <iframe>
  • HTML 문서에 다른 문서를 포함시킬 때 사용 -> 웹 문서 안에 다른 외부 문서를 불러올 때 사용, 상황에 따라 유튜브와 같은 영상 링크나 많은 양의 콘텐츠 정보를 불러올 때 사용
  • 속성 종류
  • width : 넓이를 지정할 때 사용(%, px)
  • height : 높이를 지정할 때 사용(% px)
  • name : 현재 iframe의 이름
  • src : iframe에 표시할 문서의 주소를 지정
<body>
  <iframe width="894" height="503" src="https://www.youtube.com/embed/Xc1Le3CSdrM" title="YouTube video player" frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 <!-- 유튜브 영상을 화면상에 보이게 하는 법 >> 유튜브 영상을 클릭한 후 유튜브 영상의 마우스를 올려놓고 우 클릭 한 다음 소스코드 복사 후 <body> 태그 안에 
      붙여넣기 하면 된다.-->
</body>

 

'HTML' 카테고리의 다른 글

[HTML/CSS] 테이블(table)  (0) 2022.06.27
[HTML/CSS] 시멘틱 구조  (0) 2022.06.27
[HTML/CSS] color - 색상 관련된 속성  (0) 2022.06.27
[HTML/CSS] background-image 속성  (0) 2022.06.27
[HTML/CSS] 여러 선택자 속성3  (0) 2022.06.27
'HTML' Related Articles more