Last active
May 8, 2021 22:46
-
-
Save mooyoul/c340a01cf7c21d8e4f32c2e750b2ddec to your computer and use it in GitHub Desktop.
GIF to Video Migration Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
@minseolee 안녕하세요. 제가 아는 한에서 답변해 드리겠습니다.
상단 img는 기존 코드를 나타내는 것으로 실제로는 사용하지 않으셔도 되는것으로 보이고, 맨 하단 img 파일은 레거시(미지원) 브라우저들을 위해 마련된 것으로 아마 비디오 로딩 실패시 자동으로 HTML5에서 불러올것으로 보입니다.
단, 사이트가 IE등 리거시 브라우저을 지원하지 않고 최신 브라우저등만 지원할것이라면 필요없을 수 있는 부분입니다.
답변에 미흡한 점이 있을 수 있지만 양해 부탁드리며
미흡한 부분은 새 코멘트로 지적해 주시기 바랍니다.
감사합니다.
좋은 주말 되세요.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
안녕하세요.
혹시 video 태그에서 위의 source파일이 로딩 안될 때 아래의 img파일을 로딩하는 방식인지 여쭙고 싶습니다.