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

15 ИЮНЯ 2022

------------------------------------------------------------------------

Наш телеграм-канал: t.me/@mailsgun_online

Youtube: youtube.com/@mailsgun_online

------------------------------------------------------------------------

Обновить

Началось с того, что я случайно наткнулся на станицу 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 она открывалась как видео-файл, но это к сожалению невозможно.

Всего голосов 11: ↑11 и ↓0+11
  • 17 июля 2020 в 13:22
    Всего голосов 13: ↑13 и ↓0+13

    Просмотры5.9K

  • 13 июля 2020 в 18:08
    Всего голосов 14: ↑14 и ↓0+14

    Просмотры25K

  • 4 февраля 2016 в 03:36
    Всего голосов 38: ↑29 и ↓9+20

    Просмотры176K

  • сегодня в 14:57
    Всего голосов 58: ↑58 и ↓0+58

    Просмотры5K

  • сегодня в 10:11
    Всего голосов 32: ↑32 и ↓0+32

    Просмотры1.1K

  • сегодня в 08:00
    Всего голосов 52: ↑42 и ↓10+32

    Просмотры14K

  • сегодня в 12:00
    Всего голосов 26: ↑26 и ↓0+26

    Просмотры1.9K

  • сегодня в 11:00
    Всего голосов 21: ↑21 и ↓0+21

    Просмотры2.5K

Source: habr1

Ну и напоследок напоминаю вам о нашем новом проекте vkserfing bot.