Началось с того, что я случайно наткнулся на станицу 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](https://habrastorage.org/getpro/habr/upload_files/7f1/e0a/be9/7f1e0abe9f8413b6d5545c497d8f457a.png)
Я был весьма доволен собой, но мне хотелось продолжить двигаться в этом увлекательном направлении ненормального программирования.
Мне пришла в голову мысль, что можно попробовать провернуть такое с .gif файлом. Я погуглил, оказалось что такого с .gif файлом никто не делал. Некоторое время я бился с Hex Fiend пока не достиг первых успехов. Стало ясно, что затея реализуема.
Я решил сразу взяться за что-то весомое, и решил что буду использовать анимированный GIF.
По моей просьбе жена снабдила меня занятным видео, которое я на скорую руку обработал и получил следующее:
Из него я сохранил анимированный GIF:
![The movie: Time Travel The movie: Time Travel](https://habrastorage.org/getpro/habr/upload_files/b0e/259/e66/b0e259e66c7f6b710ab01b60e67e75d2.gif)
![Просто дописываем HTML в конец .gif файла Просто дописываем HTML в конец .gif файла](https://habrastorage.org/getpro/habr/upload_files/d35/d5d/07f/d35d5d07f2b97b5e3937871520d77dfe.png)
Бинарный мусор попадая в браузер открывает большое количество тегов <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 она открывалась как видео-файл, но это к сожалению невозможно.
ссылка на оригинал статьи https://habr.com/ru/articles/574670/
Добавить комментарий