HTML страница встроенная в анимированный GIF
Началось с того, что я случайно наткнулся на станицу https://lcamtuf.coredump.cx/squirrel/
Это демка представляет собой файл, который будучи сохраненным с расширением .jpg или .jpeg открывается как графический файл, а с расширением .htm или .html как веб-страница. Такого рода трюки для JPEG не новы. Насколько я понял, HTML размещается в секции комментария .jpeg файла. Браузер проглатывает бинарные данные заголовка как мусор, потом рендерит найденный HTML. Немного CSS хитрости чтобы спрятать бинарный мусор от глаз пользователя и вуаля.
Я вооружился редактором Hex Fiend для Mac и давольно быстро смог заменить HTML и изображение на свои.
Страница https://lcamtuf.coredump.cx/squirrel/ открытая Hex Fiend
Я был весьма доволен собой, но мне хотелось продолжить двигаться в этом увлекательном направлении ненормального программирования.
Мне пришла в голову мысль, что можно попробовать провернуть такое с .gif файлом. Я погуглил, оказалось что такого с .gif файлом никто не делал. Некоторое время я бился с Hex Fiend пока не достиг первых успехов. Стало ясно, что затея реализуема.
Я решил сразу взяться за что-то весомое, и решил что буду использовать анимированный GIF.
По моей просьбе жена снабдила меня занятным видео, которое я на скорую руку обработал и получил следующее:
Из него я сохранил анимированный GIF:
The movie: Time TravelПросто дописываем HTML в конец .gif файла
Бинарный мусор попадая в браузер открывает большое количество тегов , и поэтому, если вы захотите повторить мои упражнения, я советую их с запасом позакрывать в самом начале, как видно на скриншоте выше, или в исходниках моего файла, ссылку на который я дам в конце поста.
Верстая веб-страницу, я все больше входил в азарт и мне показалось отличной идеей интегрировать мое исходное видео MPEG4 в HTML с помощью base64 и поставить его на бэкграунд. Вот что у меня получилось.
Я не силен в HTML, поэтому страница корректно отображается только в настольных браузерах. Большинству мобильных устройств не хватает памяти, а если хватает, то видео на бэкграунде не воспроизводится.
Я сделал еще одну версию.
У меня она корректно отображается под Mac OS в Safari и Google Chrome. В Firefox не отображается видео на бэкграунде, зато на моем iPhone 8 во всех трех браузерах: Safari, Chrome и Firefox страница отображается корректно. Если среди читателей найдется эксперт по верстке, я буду очень признателен за помощь в допиливании этой демки.
Видео, которое вы видите на заднем плане, это MPEG4-видео встроенное в HTML-страницу, встроенную в анимированное GIF изображение
Если сохранить данную страницу с расширением .html она будет открываться как веб-страница, а если сохранить в файл с расширением .gif — как анимированный GIF.
Было бы очень круто, если бы при сохранении с расширением .mp4 она открывалась как видео-файл, но это к сожалению невозможно.
