앱 만들기/HTML5

embed 태그 로 멀티미디어 파일 불러오기

나도 처음이야 2023. 5. 9.

embed 태그는 멀티미디어 파일들을 불어올 수 있습니다.

HTML 초기 버전부터 사용되어 왔기에 video, audio 태그를 지원하지 않는 브라우저의 경우 embed 파일을 사용하여 멀티미디어 파일을 로드 할 수 있습니다.

embed 예제 입니다.

<!DOCTYPE html>
<html>
<head>
	<title>Embedded Tag Example</title>
</head>
<body>
	<h1>Embedded Tag</h1>
	<p>This is an example of using the &lt;embed&gt; tag to include an image in an HTML document:</p>
	<embed src="images/keyboard.png" width="50%" />
    <embed src="video/1.mp4" width="100%"  />
</body>
</html>

src 속성을 사용하여 로드 할 멀티미디어 파일 경로를 지정 합니다.

width, height 속성으로 너비와 높이를 설정 할수 있습니다.

하나만 적으면 상대적으로 자동 비율로 맞추어 집니다. % 를 적지 않을때는 pixel 로 인식합니다.

embed 예제 결과

 

결과는 위와 같이 나옵니다.

video 및 audio 태그 이외에도 멀티미디어 파일을 로드 하고 싶다면 embed 도 활용하면 좋겠습니다.

감사합니다.

 

 

 

비디오 태그 예제

HTML 웹문서에서 비디오 재생을 위해서는 비디오 태그를 사용합니다. 비디오 태그 예제를 살펴보겠습니다. 비디오 태그 예제 입니다. 비디오 태그에서 중요한 속성은 하기와 같습니다. src : 비디

soo0100.tistory.com

 

 

오디오 태그 예제

사운드 재생을 위한 오디오 태그 예제입니다. 브라우저에서 사운드 플레이를 위해서는 라는 태그를 사용해야 합니다. 예제를 보겠습니다. 오디오 태그 예제 입니다 태그 중 핵심적인 역할의 속

soo0100.tistory.com

 

 

이미지를 표현해주는 태그 예제

이미지를 브라우저에서 불러오기 위해서는 태그를 사용해야 합니다. 태그 예제를 살펴봅니다. 이미지 태그 예제 입니다 이미지 태그에서 중요한 부분은 2곳 입니다. src : 이미지 경로를 기재 합

soo0100.tistory.com

 

<Object> 태그 예제

Object 태그는 이미지, 비디오, PDF 파일 등의 멀티미디어 파일들을 브라우저에 표시할 수 있습니다. HTML5에서는 이미지는 태그, 비디오는 태그를 사용하지만, H5 이전에는 Object 태그가 이러한 미디

soo0100.tistory.com

 

반응형

'앱 만들기 > HTML5' 카테고리의 다른 글

HTML 태그 구조  (3) 2023.07.03
HTML 태그 와 속성 이란?  (2) 2023.05.31
<ins> , <del>태그 예제  (1) 2023.05.04
인용문을 나타내는 태그  (2) 2023.05.03
드롭다운 리스트 태그  (1) 2023.05.02

댓글