이번 시간에는 html 웹 문서에서 오디오, 비디오 파일뿐만 아니라 기타 다양한 멀티미디어 타입의 파일을 첨부하는 방법에 대해서 살펴보겠습니다. 현재는 비슷한 동작을 하는 태그가 여러 가지 존재하는데, 실제로 자신이 즐겨 방문하는 웹페이지에서 어떤 식으로 첨부하는지 소스를 참고하는 것도 큰 도움이 될 것입니다.
○ <object> - 다양한 타입의 파일 삽입
<object> 태그를 사용하면 오디오, 비디오, PDF, 다른 문서를 삽입할 때와 같이 광범위한 용도로 사용할 수 있습니다. 이때 width, height, data 속성을 사용하게 됩니다.
<object width="너비" height="높이" data="파일"></object>
실제로 다음과 같은 방식으로 파일명을 입력하여 게시해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<object data="https://url.kr/lqbyd5"></object>
</body>
</html>
○ <embed> - 다양한 타입의 파일 삽입
<embed> 태그는 일단 종료 태그 없이 단독으로 사용하며, 과거에 비디오 링크 등을 웹 게시판에 붙일 때 많이 쓰셨던 것을 기억하실 겁니다. 현재는 <audio>, <video>, <object> 등의 태그를 지원하지 않는 브라우저일 경우 사용하게 됩니다. src 속성을 이용해서 파일의 위치를 표시합니다.
<embed src="samples/sample.mp3">
○ <audio>, <video> - HTML5에서의 비디오, 오디오 파일
HTML5에서는 이전 HTML4와 달리 멀티미디어 파일 재생을 위한 별도의 플러그인을 필요로 하지 않습니다. 대신, 웹 브라우저 자체의 플레이어를 사용하게 됩니다. 그래서 개발은 간편해졌지만, 브라우저의 버전과 기본적인 재생 환경을 별도로 고려해야 한다는 것을 기억해야 합니다.
일단 <audio>와 <video> 태그는 사용법이 거의 비슷하고, src 속성을 사용해 경로를 작성합니다. 아래와 같이 한 번 직접 동영상(mp4) 파일을 붙여 넣어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video src="https://url.kr/blthcd" controls width="700"></video>
</body>
</html>
위에서 src를 이용해 파일 경로를 입력하고, controls 속성을 추가했습니다. 이 속성을 추가하면 플레이어 컨트롤러가 함께 노출되어서 유저가 직접 재생을 컨트롤을 할 수 있게 됩니다. (이를 삭제하면 컨트롤 바가 나타나지 않겠죠?) 그리고 width 속성을 통해 역시 가로 크기를 직접 지정했습니다.
이밖에도 응용하여 사용할 수 있는 <audio>, <video> 태그 속성들이 있습니다. 한번 확인해 봅시다.
· controls : 플레이어 컨트롤 바 표시
· autoplay : 오디오 또는 비디오를 자동으로 실행
· loop : 반복 재생
· muted : 소리 제거
· preload : 페이지 로딩 시, 파일을 어떻게 로드할 것인지 지정 - auto / metadata / none. 기본은 preload="auto"
· width, height : 비디오 플레이어 크기 지정. 하나만 설정하면 자동으로 비율에 따라 지정된다.
· poster="파일명" : <video> 태그에서 비디오 재생 전에 표시될 썸네일(포스터)을 지정한다.
위의 태그를 이용하여, 응용해 위의 소스를 다시 한번 게시해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video src="https://url.kr/blthcd" autoplay loop muted width="700"></video>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(1) - 기본 form 태그 (0) | 2023.03.05 |
|---|---|
| 2. 내용 입력하기(6) - 하이퍼링크 삽입 (0) | 2023.03.03 |
| 2. 내용 입력하기(4) - 이미지 삽입 (0) | 2023.03.01 |
| 2. 내용 입력하기(3) - 표 생성하기 3 (0) | 2023.02.27 |
| 2. 내용 입력하기(3) - 표 생성하기 2 (0) | 2023.02.26 |
