Как создать видео h264 с альфа-каналом для использования с HTML5 Canvas?

Меня заинтересовала эта демонстрация: http://jakearchibald.com/scratch/alphavid/

Я также видел этот вопрос здесь:

Могу ли я иметь видео с прозрачным фоном с помощью тега видео HTML5?

Но я не могу понять: как вы создаете видеофайлы h264, ogg и webm с альфа-каналами?


canvas html h.264 alpha-transparency
person chuls    schedule 20.02.2011    source источник

Ответы (2)


arrow_upward
28
arrow_downward

Если вы откроете это видео с ваша демонстрация с QuickTime вы увидите видео с отдельными областями RGB и A:
Видео с RGB и альфа-областями

Если вы затем посмотрите на код для демонстрации, вы увидите, что он использует один закадровый холст HTML5 для отрисовки каждого видеокадра, считывая альфа-пиксели из второй половины этого холста, чтобы установить явные значения альфа-канала для каждого пикселя в первую половину, а затем с помощью putImageData переместите результат на другой холст HTML5, который фактически отображает видео.

function processFrame() {
  buffer.drawImage(video, 0, 0);
                
  var image = buffer.getImageData(0, 0, width, height),
      imageData = image.data,
      alphaData = buffer.getImageData(0, height, width, height).data;
                
  for (var i=3, len=imageData.length; i<len; i += 4){
    imageData[i] = alphaData[i-1];
  }
                
  output.putImageData(image, 0, 0, 0, 0, width, height);
}

В сочетании с различными заявлениями в Интернете о том, что H.264 не поддерживает альфа-канал, я почти уверен, что H.264 не может иметь альфа-канал. Я говорю это, потому что я нахожу несколько ссылок на эту цитату 2006 года с компьютера Apple относительно обновленного QuickTime в их версии Leopard OS X:

Сантехника QuickTime получает значительные обновления в Leopard. Были внесены значительные улучшения в обработку кодирования H.264. Кроме того, прозрачные альфа-слои, необязательная часть спецификации H.264, теперь поддерживаются в фильмах QuickTime на основе H.264. И, наконец, QuickTime поддерживает 64-разрядные версии.

Однако единственное, что я нашел, связанное с этой маркетинговой цитатой, это этот документ показывает, как изменить общую непрозрачность слоя видео в QuickTime Pro.

person Phrogz    schedule 20.02.2011
comment
Привет @Phrogz, спасибо, я начинаю понимать. Но вот еще вопрос. Я совсем не эксперт по JavaScript, поэтому прошу прощения, если это очевидно, но я думал, что происходит вот что: цикл for проходит через каждый 4-й элемент массива данных изображения, который, по-видимому, представляет собой альфа-канал, а предыдущие три — это R, G и B. Но вы говорите, что эта демонстрация создает альфа-данные без фактического альфа-канала, верно? - person chuls; 22.02.2011
comment
@chuls Правильно: атрибут data ImageData представляет собой плоскую структуру, подобную массиву, называемую элементом CanvasPixelArray, в котором все значения RGBA расположены последовательно. Приведенный выше скрипт берет значения из синего канала в нижней половине изображения и использует их в качестве альфа-значений в верхней половине. Затем он копирует это новое изображение с альфа-каналом, созданное для каждого кадра, на выход. - person Phrogz; 22.02.2011
comment
Большое спасибо за вашу помощь, я наконец понимаю, что здесь происходит. - person chuls; 22.02.2011

arrow_upward
11
arrow_downward

WebM теперь поддерживает прозрачность, и Chrome 29+ может воспроизводить ее без флага.

http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

Но это не работает в Chrome для Android.

person RandallB    schedule 12.10.2013