Pull to refresh

HTML страница, встроенная в анимированный GIF

Reading time2 min
Views7.2K

Началось с того, что я случайно наткнулся на станицу 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
Страница https://lcamtuf.coredump.cx/squirrel/ открытая Hex Fiend

Я был весьма доволен собой, но мне хотелось продолжить двигаться в этом увлекательном направлении ненормального программирования.

Мне пришла в голову мысль, что можно попробовать провернуть такое с .gif файлом. Я погуглил, оказалось что такого с .gif файлом никто не делал. Некоторое время я бился с Hex Fiend пока не достиг первых успехов. Стало ясно, что затея реализуема.
Я решил сразу взяться за что-то весомое, и решил что буду использовать анимированный GIF.

По моей просьбе жена снабдила меня занятным видео, которое я на скорую руку обработал и получил следующее:

Из него я сохранил анимированный GIF:

The movie: Time Travel
The movie: Time Travel
Просто дописываем HTML в конец .gif файла
Просто дописываем HTML в конец .gif файла

Бинарный мусор попадая в браузер открывает большое количество тегов <s>,<u> и <i> поэтому, если вы захотите повторить мои упражнения, я советую их с запасом позакрывать в самом начале, как видно на скриншоте выше, или в исходниках моего файла, ссылку на который я дам в конце поста.

Верстая веб-страницу, я все больше входил в азарт и мне показалось отличной идеей интегрировать мое исходное видео MPEG4 в HTML с помощью base64 и поставить его на бэкграунд. Вот что у меня получилось.

Я не силен в HTML, поэтому страница корректно отображается только в настольных браузерах. Большинству мобильных устройств не хватает памяти, а если хватает, то видео на бэкграунде не воспроизводится.

Я сделал еще одну версию.

У меня она корректно отображается под Mac OS в Safari и Google Chrome. В Firefox не отображается видео на бэкграунде, зато на моем iPhone 8 во всех трех браузерах: Safari, Chrome и Firefox страница отображается корректно. Если среди читателей найдется эксперт по верстке, я буду очень признателен за помощь в допиливании этой демки.

Пожалуйста, дайте ей время загрузиться и отрендриться! Моему древнему Хакинтошу при загрузке этой страницы приходится очень несладко. Впрочем, на современном оборудовании работает достаточно гладко.

Видео, которое вы видите на заднем плане, это MPEG4-видео встроенное в HTML-страницу, встроенную в анимированное GIF изображение ​

Если сохранить данную страницу с расширением .html она будет открываться как веб-страница, а если сохранить в файл с расширением .gif - как анимированный GIF.

Было бы очень круто, если бы при сохранении с расширением .mp4 она открывалась как видео-файл, но это к сожалению невозможно.

Tags:
Hubs:
Total votes 24: ↑24 and ↓0+24
Comments11

Articles