{"id":266300,"date":"2018-02-07T14:25:42","date_gmt":"2018-02-07T21:25:42","guid":{"rendered":"http:\/\/css-tricks.com\/?p=266300"},"modified":"2018-02-07T14:25:42","modified_gmt":"2018-02-07T21:25:42","slug":"fallbacks-videos-images","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fallbacks-videos-images\/","title":{"rendered":"Fallbacks for Videos-as-Images"},"content":{"rendered":"
Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <\/p>\n Not all browsers support this so, to do a fallback, the \u0160ime Vidas notes<\/a> you get wider browser support by using the But as Bendell noted, the performance benefits aren’t there with video, notably the fact that video isn’t helped out by the preloader. Sadly, <img><\/code> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? “20x faster and decode 7x faster than the GIF equivalent,”<\/em> says Colin Bendell<\/a>.<\/p>\n
<picture><\/code> element is ready. Bruce Lawson shows<\/a> how easy it can be:<\/p>\n
<picture>\r\n <source type=\"video\/mp4\" srcset=\"adorable-cat.mp4\">\r\n <!-- perhaps even an animated WebP fallback here as well -->\r\n <img src=\"adorable-cat.gif\" alt=\"adorable cat tears throat out of owner and eats his eyeballs\">\r\n<\/picture><\/code><\/pre>\n
<video><\/code> tag:<\/p>\n
<video src=\"https:\/\/media.giphy.com\/media\/klIaoXlnH9TMY\/giphy.mp4\" muted autoplay loop playsinline><\/video><\/code><\/pre>\n
<video><\/code> it is for now, as<\/a>:<\/p>\n
\n