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

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

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

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

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

2 ответов


Если вы открываете видео С демо С QuickTime вы увидите видео с отдельными RGB и регионами:
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 не поддерживает alpha и I почти уверены, что H. 264 не может быть альфой. Я говорю это, потому что я нахожу несколько ссылок на эту цитату 2006 года от Apple computer относительно обновленного QuickTime в их выпуске" Leopard " OS X:

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

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


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

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

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