Как создать видео h264 с альфа-каналом для использования с HTML5 Canvas?
меня заинтересовала эта демонстрация:http://jakearchibald.com/scratch/alphavid/
Я также видел этот вопрос здесь:
могу ли я иметь видео с прозрачным фоном с помощью тега HTML5 video?
но я не могу понять: как вы создаете видеофайлы h264, ogg и webm с альфа-каналами?
2 ответов
Если вы открываете видео С демо С QuickTime вы увидите видео с отдельными 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 не поддерживает 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.