html5 | video mit alpha-Kanal | alles wird transparent?

[andrelehnert]

Hi Leute!

Ich habe mit Flash ne kleine Animation erstellt und als MOV mit alpha-Kanal ausgegeben.
Soweit so gut. Premiere/AE erkennen die Alpha-Daten.

Das Ganze habe ich dann mit dem open-source-html5-Video-Konvertierer Miro ins OGV, MP4 und WEBM umgewandelt.

Um nun das Video in html5 mit transparentem Hintergrund zu zeigen, habe ich
folgenden Code genutzt:
html

<!-- CANVAS | um das Video hineinzuzeichnen -->
<div id="special"> 
        <canvas class="output" width="150" height="200" id="output" style=" position:absolute;"></canvas>
</div>

<!-- VIDEO für die videodaten | bleibt unsichtbar -->
<video id="video" loop="loop" width="150" height="200" autoplay="autoplay" onended="this.play()" poster="DREIECKER.jpg"  
        onclick="if(/Android/.test(navigator.userAgent))this.play();" style="position:absolute; display:none">

        <source src="video/DREIECKER.webmvp8.webm" type="video/webm" />
        <source src="video/DREIECKER.mp4video.mp4" type="video/mp4" />        
        <source src="video/DREIECKER.theora.ogv" type="video/ogg" />          
</video>

<!-- CANVAS als Buffer |  bleibt unsichtbar -->
<canvas width="150" height="200" id="buffer" style=" position:absolute; display:none"></canvas>

javascript

PHP-Code:

$(document).ready(function(){

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

            video.addEventListener('play', function() {
                clearInterval(interval);
                interval = setInterval(processFrame, 40)
            }, false);            
}); 


Nun Wird der Hindergrund wunderbar transparent.

ABER:
Auch der Rest des Videos hat nun eine starke Transparenz.
Mein Workaround besteht nun darin, 6 CANVAS-Elemente übereinander zu packen und
in jedes die Videodaten hineinzuschreiben. Das funzt so halbwegs, ist aber wahnsinnig unschön
und geht glaub ich ziemlich auf die CPU...

Wo liegt mein Fehler?

Vielen Dank für Euer Interesse!

LG ANdré

[Nightflyer]

Kann man sich das irgendwo anschauen?

[andrelehnert]

jau -hier hab das Problem mal extrahiert...

LG ANdré

[Nightflyer]

Sehr strange, zumal ich beim ersten Laden drei Figuren zu sehen bekam und beim zweiten Laden nur noch eine. Die CPU-Aulastung ist aber unter 5%, was in etwa FF alleine frisst

[thomas_E]

Auch der Rest des Videos hat nun eine starke Transparenz.
Mein Workaround besteht nun darin, 6 CANVAS-Elemente übereinander zu packen und
in jedes die Videodaten hineinzuschreiben. Das funzt so halbwegs, ist aber wahnsinnig unschön
und geht glaub ich ziemlich auf die CPU...

im Grunde kopierst du den Blauen Farbkanal in den Alpha-kanal; nur hast du nur an wenigen Stellen einen Farbton, mit einem Blauanteil von 255, ergo erhältst du auch nur an wenigen Stellen einen Alpha-wert von 255 (100%).

um bei Flash zu bleiben, nimm statt BitmapData.copyChannel() besser BitmapData.threshold(), um die schwarzen stellen durchsichtig zu machen

PHP-Code:

const threshold = 20;

function processFrame() {
    buffer.drawImage(video, 0, 0);

    var image = buffer.getImageData(0, 0, width, height);
    var imageData = image.data;
    for(var i=3, len=imageData.length; i<len; i+=4)
        if(imageData[i-3] < threshold && imageData[i-2] < threshold && imageData[i-1] < threshold)
            imageData[i] = 0;
    output.putImageData(image, 0, 0, 0, 0, width, height);                
} 


[andrelehnert]

Ja cool - Danke Thomas!

Jetzt hab auch ich es begriffen .

Alles bestens - hab ich die anderen Kanäle einfach ungeprüft unterschlagen...

Aber jetzt geht es auch ihnen wieder besser .

LG ANdré

@Nightflyer: Hm, das gar nichts angezeigt wird, ist mir noch nicht untergekommen.
Naja nu löft et!

[Martin Kraft]

Ich will wirklich nicht rum jammern, wie gurkig solche Lösungen im Vergleich zu dem sind, was Flash ermöglicht, aber...

Mit einem echten Alpha-Kanal hat das nicht sonderlich viel zutun, oder?! Einfach eine Farbe (bzw. alles schwarze) transparent zu machen, ist ja quasi die GIF-Methode mit all ihren Vor- und Nachteilen:

• + geringe Datei Größe (weil kein Speicherverbrauch durch den Alphakanal)
  
• - keine Semitransparenzen
  
• - keine opaquen Bereiche in der Transparenzfarbe möglich

Gibt es da wirklich keine besseren Lösungen?

Ich hab gerade mal ein bisschen gegooglet: Es kann doch nicht sein, dass keiner der Codecs auch nur perspektivisch einen AlphaKanal unterstützt?! Sograr beim WebM-Projekt (On2VP8) z.B. findet man nichts über einen Alphakanal, obwohl die im FlashPlayer eingesetzte Vorgängerversion On2VP6 dieses Feature bietet?!

IMHO ist es lächerlich, unter diesen Voraussetzungen HTML5-Video als vollwertige Alternative zu den FlashVideo anzupreisen


@andrelehnert: In FireFox und Chrome wird bei (Win7 64) sowohl in der gestern als auch in der aktuell online stehenden Version nur das mittlere Video ohne Transparenzen angezeigt und auch im Safari gibts links und rechts Pixelhusten. Nur der E9 zeigt alle drei Videos an, wobei das Renderergebniss komplett halbtransparent ist.

[thomas_E]

Zitat von Martin Kraft

Gibt es da wirklich keine besseren Lösungen?

eine Spritemap animieren, macht auch google so, bei den animierten doodles.

+ 1 "Video" für alle Platformen egal ob FF, Safari, IE, oder Mobile
+ benötigt keinen html5-fähigen Browser
+ da du PNG verwenden kannst, echter Alpha-kanal
- meist schlechtere Komprimierung als ein Video
- ohne JS läuft garnix (standbild)
- nicht als Video downloadbar; ist halt kein Video, auch wenn es so aussieht

~ hab es bisher nur mit "relativ" kurzen Animationen gesehen (max 100-150 Frames).
kp wie die Performance bei riesigen Bildern wäre.
evtl ware da auch eine Variante über mehrere Spritemaps denkbar?


hab dir mal ein Beispiel in den Anhang gelegt.
die Grafik dazu lässt sich sicher noch deutlich optimieren/komprimieren, da ich sie per JS erstellt hab (captureScript liegt bei)

und es ist performanter, als die Lösung oben.

[Nightflyer]

Allein die Tatsache dass es anscheinend wirklich nötig ist Videos in drei oder mehr Formaten gleichzeitig anzubieten erinnert mich sehr stark an eine Zeit wo man sich noch um jedes Browsers Extrawurst kümmern musste...

[andrelehnert]

@thomas: Danke für Deine Mühe. Ja, das ist zumindest ein sauberer Ansatz - ich werde das nä Wo mal durchtesten. Ich denke auch, daß es für größere und längere Filme sicher nicht praktikabel ist, aber für kleinere Sachen schon.

@all: Ja, dies ist bezüglich dieser konkreten Aufgabenstellung echt ein krasser Rückschritt im Vergleich zu flash. Und scheinbar gibts da grad auch gar keine Bewegung. Es tut weh - aber meinen Auftraggebern haben die Entscheidung Adobes und die anschließenden Kampagnen die flash-Technologie echtgründlich vermiest - nicht zu vergessen natürlich auch die Flash-Blockade des großen Apfels.

Wie wärs denn mit ner gemeinschaftlichen noflash-fallback-Seite, wo jeder Entwickler den Usern seiner
Sites die Gründe darlegt, warum flash jetzt doch besser gewesen wäre.
Und noch eine für Javascript. Oder vielleicht auch für html5 oder Cookies doch ihren Sinn in einem konkreten Fall haben oder eine,
die die Vorteile darlegt, warum doch ein Version des IE > 6 "angeschafft" werden sollte, oder oder oder .

LG ANdré

[Nightflyer]

Installieren wir alle wieder den IE4 und fangen von vorne an