Как создать видео h264 с альфа-каналом для использования с HTML5 Canvas? - PullRequest
13 голосов
/ 20 февраля 2011

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

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

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

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

Ответы [ 2 ]

24 голосов
/ 20 февраля 2011

Если вы откроете это видео из вашего демо с QuickTime, вы увидите видео с отдельными регионами RGB и A:
Video with RGB and alpha regions

Если вы посмотрите на код для демонстрации, вы увидите, что он использует один внеэкранный холст 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 в их выпуске «Леопарда» OS X:

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

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

11 голосов
/ 12 октября 2013

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...