Заметки за июнь 2012 года

Конвертируем в ProRes с помощью FFmpeg

Когда я столкнулся с необходимостью обработать AVCHD видео , то мне пришлось его конвертировать в mp4. Копирование потоков в новый контейнер без обработки вызывало появление какие-то артефактов. Позже я выяснил, что они возникали только во время воспроизведения полученного видео. Когда оно проходит финальный рендеринг, то артефактов уже нет. Думаю, что на это не стоит полагаться. Ведь не понятно что получится в результате. Получить максимальное качество рабочего материала можно, если сконвертировать его в формат ProRes.

Начиная с версии 0.11 кодеки ProRes включены в стандартную сборку FFmpeg.


ffmpeg -i ~/Desktop/00000.MTS \
    -copyts -acodec copy -vcodec prores -profile 0 \
    ~/Desktop/out.mov

Качество видео, а значит и средний битрейт, регулируется параметром profile. Он может принимать значение от 0 до 3 включительно. Эти значения соответствуют профилям:

  • -profile 0 — Apple ProRes Proxy
  • -profile 1 — Apple ProRes LT
  • -profile 2 — Apple ProRes 422 for SD
  • -profile 3 — Apple ProRes HQ for HD

Ещё у FFmpeg есть альтернативная версия с нужными кодеками – FFMedia Broadcast.

Для сборки ffmbc может понадобится установить yasm, если его ещё нет. Я установил его через Homebrew.

brew install yasm

Затем распаковываем исходники ffmbc, конфигурируем их командой ./configure –enable-gpl, собираем make и инсталлируем sudo make install.

У кодека ProRes есть несколько ключей:

  • -qscale <значение> или -cqp <значение>

    Задает фиксированное значение квантайзера, которое будет использоваться для каждого кадра. В выходном потоке будет переменнй битрейт.

  • -profile <имя>

    Профиль может принимать одно из значений: proxy, lt, std, hq . Если не задан битрейт, то он выбирается автоматически на основании размера кадра и профиля.

  • -b <битрейт>

    Задает примерное значение постоянного битрейта.

Итак, для перекодирования исходного видео в ProRes нужно выполнить команду:


ffmbc -i ~/Desktop/00000.MTS \
    -copyts -acodec copy -vcodec prores -profile std \
    ~/Desktop/out.mov
Оставте свой комментарий

Вертикальные метрики у веб-шрифтов

Работая с веб-шрифтами можно натолкнуться на серьёзную проблему с вертикальными метриками на разных платформах (OS X и Windows). Это может проявляется в том, что назначив цвет фону строчного элемента, расцвеченный прямоугольник во всех OS X браузерах будет смещен вниз.

У Font Squirrel есть решение этой проблемы.

Исправление вертикальных метрик шрифта с помощью Font Squirrel

Приведу примеры с использованием PT Sans до и после исправления вертикальных метрик.

Отображение в OS X

Safari 5.1

PT Sans в Safari 5.1 (OS X)

Firefox 13

PT Sans в Firefox 13 (OS X)

Chrome 19

PT Sans в Chrome 19 (OS X)

Opera 12

PT Sans в Opera 12 (OS X)

Отображение в Windows

Interner Explorer 9

PT Sans в Internet Explorer 9 (Windows)

Firefox 13

PT Sans в Firefox 13 (Windows)

Chrome 19

PT Sans в Chrome 19 (Windows)

Opera 12

PT Sans в Opera 12 (Windows)

Интересное наблюдение

Любопытно, но рендеринг текста в Windows версиях Opera, Firefox, Chrome оказывается поразительно идентичен между собой вплоть до межбуквенных и межстроковых интервалов. Увы, но такого же постоянства нет в OS X браузерах.

Комментарии к заметке: 2

Разные начертания веб-шрифта

Font Squirrel после конвертирования шрифтов создает CSS файл, в котором все начертания одной и той же гарнитуры представлены в виде совершенно разных гарнитур. Рассмотрим в качестве примера PT Sans.


@font-face {
    font-family: 'PTSansRegular';
    src: url('PTS55F-webfont.eot');
    src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS55F-webfont.woff') format('woff'),
         url('PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansItalic';
    src: url('PTS56F-webfont.eot');
    src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS56F-webfont.woff') format('woff'),
         url('PTS56F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansBold';
    src: url('PTS75F-webfont.eot');
    src: url('PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS75F-webfont.woff') format('woff'),
         url('PTS75F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansBoldItalic';
    src: url('PTS76F-webfont.eot');
    src: url('PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS76F-webfont.woff') format('woff'),
         url('PTS76F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Когда используется такой шрифт в сочетании с модификаторами начертаний font-weight и font-style , то браузер автоматически пытается «сделать» шрифт полужирным или наклонным не обращая внимания, что для этого есть специально созданные начертания.


h1, h2, h3 { font-family: PTSansBold, Arial, sans-serif; }

Если такой шрифт подключается только для заголовков, где применяется, как правило, только полужирное начертание, то для альтернативных гарнитур полужирного начертания уже не будет!

Чтобы с начертаниями был полный порядок нужно поправить описания шрифтов.


@font-face {
    font-family: 'PTSansWeb';
    src: url('PTS55F-webfont.eot');
    src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS55F-webfont.woff') format('woff'),
         url('PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansWeb';
    src: url('PTS56F-webfont.eot');
    src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS56F-webfont.woff') format('woff'),
         url('PTS56F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'PTSansWeb';
    src: url('PTS75F-webfont.eot');
    src: url('PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS75F-webfont.woff') format('woff'),
         url('PTS75F-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'PTSansWeb';
    src: url('PTS76F-webfont.eot');
    src: url('PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTS76F-webfont.woff') format('woff'),
         url('PTS76F-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

Для начала указываем всем начертаниям одно и тоже имя.

Конкретно в этом примере я выбрал PTSansWeb . Я намеренно отказался от оригинального имени для демонстрации подключения требуемого шрифта, а не какого-то другого. Разумеется в продакшине, если есть шанс, что гарнитура уже установлена у пользователя в системе, то его не стоит упускать. По этому для популярных шрифтов важно сохранять исходное название семейства шрифтов («PT Sans», в моём случае).

Затем в модификаторах начертания указываем значения, которые реально соответствуют начертанию каждого файла.

Всё это позволит браузеру выбирать нужное начертание шрифта как это происходит для обычных шрифтов, установленных в системе пользователя.

Комментарии к заметке: 13

Фоновый градиент с помощью SVG

Замечательный сервис Ultimate CSS Gradient Generator наряду с CSS3 градиентами для всех браузеров создает SVG файл для IE9. Он внедряется в CSS с помощью Data URI в base64 кодировке.


background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i
MS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zy
Igd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIg
cHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IG
lkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3Bh
Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogIC
AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1v
cGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3
I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGll
bnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZm
lsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

Это сервис всегда создает правила так, чтобы градиент заполнял весь блок. Если поправить CSS3 свойства не составит для градиента фиксированного размера, то с SVG придется проделать некоторые манипуляции.

Раскодируем base64

Затем декодируем последовательность символов, которую нам выдал генератор. Я умышленно обрезал часть данных, чтобы команды не затерялись среди них.


echo PD94bWwgdm…IgLz4KPC9zdmc+ | base64 -d > /tmp/g.svg

Файл g.svg .будет содержать SVG и его можно будет отредактировать в любом текстовом редакторе.


<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
        viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse"
          x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#7d7e7d" stop-opacity="1"/>
    <stop offset="100%" stop-color="#0e0e0e" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

Для декодирования можно воспользоваться любым online-сервисом, коих в интернете великое множество.

Задаем размеры изображения

Мне нужен был градиент высотой ровно 200 пикселов при том, что высота блока, куда он накладывался, могла быть произвольной. Поправим размеры изображения в соответствии с задачей.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
        viewBox="0 0 1 1" preserveAspectRatio="none">

Важно всегда явно задавать единицы измерения величин даже если это пикселы.

Кодируем SVG в base64

base64 -e /tmp/g.svg

Получившийся в результате набор символов копируем из консоли в CSS файл вместо исходного. После этого нужно удалить все переносы строк, которые могли образоваться внутри закодированных данных. Формат base64 игнорирует пробельные символы, но внутри Data URI пробельные символы недопустимы.

Настраиваем параметры фона

Так как фон уже не заполняет весь блок целиком, то нужно не забыть настроить его позиционирование и повторение.

Комментарии к заметке: 2

Стили для разных версий IE

Чтобы не использовать хаки для IE соответствующие стили стоит вынести в отдельные файлы и подключать их через условный комментарий. Так и основные CSS файлы не будут загромождаться мусором и можно отделить особенные стили для разных версий.

Но можно использовать несколько иной подход.


<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

В этом случае через условный комментарий корневому элементу документа назначаются разные классы в зависимости от версии браузера. А затем этот класс используется в селекторе с каскадом.

.block {
    padding-bottom: 0;
}
.ie6 .block,
.ie7 .block {
    padding-bottom: 1em;
}

Например, для всех браузеров нижний отступ у элемента с классом block будет нулевым, а в IE6 и IE7 он будет равен 1em.

Стоит заместить, что IE10 игнорирует любые условные комментарии.

Комментарии к заметке: 6