[HTML 기초 강의] ⑨동영상 삽입 iframe video

오늘은 동영상(video) 삽입 방법을 알아보려고 한다.

 

 

 

1. <iframe> <video> 태그

동영상을 삽입할 때 사용하는 기본 태그는 <iframe> 태그

iframe은 inline frame의 약자로 ‘내부의 틀’ 의미

이 태그를 사용하면 HTML 페이지에 틀을 만들고, 그 안에 다른 HTML 페이지를 보여줌.

예) 내가 만든 웹페이지 한쪽에 동영상이나 네이버 메인 페이지가 보이게 할 수 있다는 것이죠.

동영상이나 웹사이트를 연결할 때 저작권이나 악성코드 감염  주의!!

 

<iframe src="동영상 소스 코드"> </iframe>

<video src="동영상 소스 코드"> </video>

플레이 창 크기를 조절- 가로, 세로 길이를 픽셀로 정하기

<iframe width="가로길이" height="세로 길이" src="동영상 소스 코드"> </iframe>

2. 동영상 삽입

​① 메모장을 열고 <! doctype html> 입력​

② Youtube에서 동영상을 찾기

예) 고양이 검색 후 원하는 동영상 클릭

 

③ 동영상에 마우스를 놓고 우클릭 [소스 코드 복사] 선택

④ 복사한 소스 코드를 메모장에 붙여 넣기

<iframe> 태그가 자동으로 입력된 것을 확인

 

⑥ 저장 위치를 선택하고, 파일 이름을 [파일명. html]이라고 입력 후 [저장]

⑦ 저장한 html 파일을 더블 클릭

⑧ 웹 브라우저에서 추가한 동영상 확인

 

3. 연습

<h1> 비디오 video </h1>

<ul>

<li> 웹 브라우저에서 플러그인 도움 없이 재생 </li>

<li> 다양한 브라우저에서 플레이될 수 있도록 하기 위해 <source> 태그 사용 </li>

</ul>

<video src="video/mov.mp4" preload autoplay muted loop controls poster="images/mov.jpg"></video>

 

① 메모장  입력

②저장 위치를 선택하고, 파일 이름을 [파일명. html] 입력 후 [저장]

③저장한 html 파일을 더블 클릭

④웹 브라우저에서 추가한 동영상 확인

 

배움이란 일생동안 알고 있었던 것을 어느 날 갑자기 완전히 새로운 방식으로 이해하는 것이다.

-도리스 레싱-