GIF to Video Migration Example

example.html

<!-- OLD GIF Markup -->
<img src="https://cdn.my-awesome-website.com/images/awesome-animation.gif" alt="My awesome animated image">


<!-- NEW Video Markup -->
<video autoplay loop muted playsinline>
  <!-- Specify video sources -->
  <source src="https://cdn.my-awesome-website.com/images/awesome-and-efficient-animation.mp4" type="video/mp4">
  <source src="https://cdn.my-awesome-website.com/images/awesome-and-efficient-animation.webm" type="video/webm">
  
  <!-- FALLBACK for legacy browsers! -->
  <img src="https://cdn.my-awesome-website.com/images/awesome-animation.gif" alt="My awesome animated image">
</video>

안녕하세요.

혹시 video 태그에서 위의 source파일이 로딩 안될 때 아래의 img파일을 로딩하는 방식인지 여쭙고 싶습니다.

@minseolee 안녕하세요. 제가 아는 한에서 답변해 드리겠습니다.

상단 img는 기존 코드를 나타내는 것으로 실제로는 사용하지 않으셔도 되는것으로 보이고, 맨 하단 img 파일은 레거시(미지원) 브라우저들을 위해 마련된 것으로 아마 비디오 로딩 실패시 자동으로 HTML5에서 불러올것으로 보입니다.

단, 사이트가 IE등 리거시 브라우저을 지원하지 않고 최신 브라우저등만 지원할것이라면 필요없을 수 있는 부분입니다.

답변에 미흡한 점이 있을 수 있지만 양해 부탁드리며

미흡한 부분은 새 코멘트로 지적해 주시기 바랍니다.

감사합니다.

좋은 주말 되세요.