미디어 삽입은 앞서 사진을 삽입할 때 배웠다. 태그를 넣는 방식도 거의 같다. 오디오 태그는 다음과 같이 삽입한다.
<audio src="./audios/audio001.mp3" controls></audio>
보다시피 이미지 태그와 거의 같다. src에는 소스 값으로써 링크나 경로를 입력한다. controls 속성은 재생컨트롤러를 보여주는 속성이다. autoplay속성으로 자동재생을 시킬 수 도 있고 loop 속성으로 반복재생을 설정할 수도 있다.
위는 다음과 같이 작성할 수도 있다. 화면에 보이는 것은 동일하다.
<audio controls>
<source src="./audios/audio001.wav" type="audio/wav"/>
<source src="./audios/audio001.mp3" type="audio/mpeg"/>
<source src="./audios/audio001.ogg" type="audio/ogg"/>
<p>
현재 브라우저에서는 해당 오디오파일을 지원하지 않습니다.
</p>
</audio>
위의 코드와 다른점은 소스를 따로 작성했다는 것이다. 소스를 세개나 작성한 이유는 브라우저에서 해당 확장자를 지원하지 않을 때 다른 파일을 보여주기 위함이다. 참고로 type은 확장자 별로 다르므로 구글링을 권장한다.
<p> 태그가 삽입되어 있는 이유는 모든 확장자가 지원하지 않을 때 문구를 출력해주기위함이다.
<video controls>
<source src="./videos/pexel_video.mp4" type="video/mp4"/>
<source src="./videos/pexel_viedo.mov" type="video/mp4"/>
<p>브라우저를 업데이트해주세요.</p>
</video>
보다시피 비디오 태그도 거의 동일함을 알 수 있다. 위를 웹에서 보면 다음과 같다.
이번에는 <iframe> 태그를 알아보자. 이 태그는 html문서안에 html문서나 다른 컨텐츠들을 넣기위해 사용한다. 이 태그는 우리가 직접 작성할 일은 거의 없다. 이를 활용하여 동영상 컨텐츠를 넣어보겠다.
먼저 유튜브에서 동영상을 검색한다. 필자는 고베대학교를 검색하고 가장 위에 있는 햇수로그 영상을 클릭하였다. (필자의 영상이다^^)
유튜브 영상 오른쪽 하단에는 공유 버튼이 있다. 이를 클릭하면 < > 표시와 함께 퍼가기라고 표기되어있다. 이를 클릭하면 iframe 코드를 받을 수 있다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/D2dN26Jl5-g" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
이를 입력하고 html문서를 열어보면 다음처럼 보인다.
유튜브의 동영상이 html문서 안에 알맞게 들어갔음을 볼 수 있다. 위와 같이 iframe 태그는 인터넷에서 받은 html문서나 컨텐츠를 삽입할 수 있다.
참고
이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.
모든 내용과 코드 및 이미지는 직접 재구성하였습니다.
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'Language > HTML' 카테고리의 다른 글
| <HTML 기초> 12. HTML 문서 구조와 메타데이터 (0) | 2020.11.12 |
|---|---|
| <HTML 기초> 11. 기타 태그 (0) | 2020.11.10 |
| <HTML 기초> 09. 테이블 (표) (2) | 2020.11.03 |
| <HTML 기초> 08. 텍스트창 · 버튼 (0) | 2020.10.29 |
| <HTML 기초> 07. 라디오 · 체크 박스 (0) | 2020.10.27 |
