웹 페이지에 영상 넣기 : video VS YouTube

 

웹 페이지 내 동영상 파일을 삽입할 때 영상 형식은 크게 두가지로 나뉠 수 있다.

자체 서버를 이용하거나 유튜브에 올리게 되는데 이때에 마크업도 달라지게 된다. 웹 동영상 삽입 방식은 자체 서버 활용과 외부 플랫폼(YouTube) 활용으로 나뉜다. 두 방식은 트래픽 관리와 브라우저 호환성 면에서 뚜렷한 차이가 있으며, 그에 따른 마크업 작성법 또한 다르다.

1. 자체 서버 활용 시 Vidio tag 삽입

<video controls muted playsinline poster="thumbnail.png" width="100%">
  <source src="movie.webm" type="video/webm"> 
  <source src="movie.mp4" type="video/mp4">   
  <p> Your browser does not support the video tag <a href="movie.mp4">video download</a></p>
  <track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="Korean" default>
</video>

 

참조 : https://www.w3schools.com/html/html5_video.asp

 

2.  YouTube 활용 시 tag 삽입

 <iframe width="560" height="315" 
  src="https://www.youtube.com/embed/iDjQSdN_ig8?autoplay=1&mute=1" frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen></iframe>

참조 : https://ossam5.tistory.com/73