Wie übertrage ich eine Leinwand über ein Video

Question

Ich habe ein Video und eine Leinwand in einem Div und ich möchte die Leinwand über das Video überlagern. Ich versuchte dies:

.container { 
    margin: 0 auto; 
    position: relative; 
} 

.video { 
    width: 100%; 
    height: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.canvas { 
    width: 100%; 
    height: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 

JSFiddle here

Aber aus irgendeinem Grund die Leinwand nicht das ganze Video nicht abdeckt, ist es kürzer. Wie repariere ich das?

Answer 1

Wenn Sie die Leinwandhöhe auf 100% einstellen, wird sichergestellt, dass das gesamte Video abgedeckt ist. Das automatische Tag passt die Größe eines Objekts relativ zur Menge der Daten an, die angezeigt werden sollen. Z.B. für ein < \ p> tag mit 'width: auto' je mehr text, desto breiter das tag etc. . container { margin: 0 auto; Position: relativ; }

.video { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

.canvas { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background-color:black; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 

Answer 2

Leinwand muss absolute Breite und Höhe haben. Wenn das Video geladen wird, können Sie die richtige Breite und Höhe zuweisen.

hier: jsfiddle: https://jsfiddle.net/7sk5k4gp/13/

PS: Ich habe einen Rotfilter für ein besseres Verständnis.

-Code oben:

<style> 
    .canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10; 
    background-color:rgba(255,0,0,0.5); 
} 

</style> 
<div class="container"> 
    <video class="video" id="vd1" controls autoPlay  src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_sma ll.ogv" onplay="resize_canvas(this)"></video> 
    <canvas class="canvas" id="cv1"></canvas> 
</div> 
<script> 

function resize_canvas(element) 
{ 
    var w = element.offsetWidth; 
    var h = element.offsetHeight; 
    var cv = document.getElementById("cv1"); 
    cv.width = w; 
    cv.height =h; 
} 
</script>