[코딩]웹문서에 동영상을 넣을 수 있어요! - html 태그 동영상 삽입

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.
#<video>_동영상 삽입 태그       #유투브 주소 따기 비디오 파일 형식        #쿠콘트롤 속성       #자동재생 속성      #루프 속성     #크기 속성

 
이제 이미지 삽입을 할 수 있게 되었으니, 
동영상 삽입을 알아볼까요?
 

유투브에 있는 동영상을 삽입할 수 있나요?

 
YES! 인터넷상 올려진 동영상을  내가 만드는 문서에 불러오도록 코딩할 수 있어요. 유투브에서 검색한 동영상을 삽입해 보겠습니다!

1) 인터넷 동영상의 소스코드를 수집해요

 

유투브 동영상 선택 --> 공유 --> 퍼가기(소스코드 복사) --> (메모장에 붙이기)

주의!) 일반 링크만 가져와서는 삽입할 수가 없어요! 만드시 소스째 복사해야 해요!
tip) 네이버TV에서는 마우스 우클릭으로 소스코드를 찾아 복사해요!

 

2) html 편집기에서 웹문서를 만들어 동영상을 삽입하고 실행합니다. 

 

html 기본 태그 작성 -->  문단 태그 글 작성 --> 동영상 태그 작성 --> 동영상 주소 삽입  --> 실행&확인

 

 
생각보다 많이 쉽죠!
 

내가 가진 동영상을 바로 삽입하고 싶어요.

 
html 기본 태그 작성 -->  문단 태그 글 작성 --> 동영상 삽입 태그 작성 --> 동영상 위치 삽입  --> 실행&확인
 
속성만 몇가지 달라질 뿐 이미지 삽입 태그와 비슷해요.

• 기본형식
  <video src="pc내 동영상 주소" controls>
  주의!)controls 속성이 들어가야 영상을 제어(재상바)할 수 있어요!

1) 바로 동영상 삽입 태그를 입력해 볼게요

 

2) 기타 속성을 지정해 볼게요

• 크기 속성
  width="숫자(픽셀)"   height="숫자(픽셀)" 
  주의!)동영상은 가로, 세로 모두 지정해 주어야 함! 이미지처럼 자동으로 비율 조정 안됨
• 반복 속성
  loop="숫자"
  메모!)숫자를 넣지 않으면 무한루프
• 자동재생 & 음소거
  autoplay & muted
  주의!)웹표준 상, 음소거 속성을 함께 넣어야 자동재생 가능

tip) 홍보용 홈페이지에 디자인 요소로 동영상이 들어갈 경우, 즉, 재상바가 불필요할 경우, controls 속성을 삭제한 뒤 이런 방식으로 무한 루프 시킬 수 있습니다^^
 
 

짠! 이렇게 완성되었습니다!
생각보다 어렵지 않네요^^

 
동영상을 삽입할 때는, 특수한 목적이 있지 않는한, 유투브와 같은 동영상 사이트에 올리고 웹문서 상에는 주소를 걸어 구현해 주는 방법을 많이 쓴다고 해요. 그대로 삽입하게 되면 서버 용량을 굉장히 많이 차지하게 되기 때문이에요. 그래서 파일 크기가 큰 동영상을 관리하는 서비스를 따로 사용하고(유투브는 뭐 공짜죠^^) 웹문서와 연동을 시키는 거죠^^ 스트리밍 속도, 서버 사용 비용 등에서 효율적이라고 하네요^^
 

이상!
지금까지 동영상 삽입 html 태그를 알아보았습니다^^
다음 수업 시간에 또 만나요!