如何在視頻上疊加畫布

我有一個視頻和一個div內的畫布，我希望將畫布疊加在視頻上。我嘗試這樣做：如何在視頻上疊加畫布

.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

但由於某些原因在畫布上沒有覆蓋整個視頻，很短。我如何解決這個問題？

來源

2016-09-24 Priyatham

將畫布高度調整爲100％可確保覆蓋整個視頻。 auto標籤只是根據需要顯示的數據量來調整對象的大小。例如。對於帶有'寬度：自動'的< \ p>標籤，文字越多，標籤越寬等。。容器邊距：0自動; 位置：相對; }

.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; 
}

來源

2016-09-24 01:42:41 UnknownRobotik

畫布必須有絕對的寬度和高度。當視頻加載時，您可以分配正確的寬度和高度。

這裏：的jsfiddle： https://jsfiddle.net/7sk5k4gp/13/

PS：我把一個紅色濾光片爲更好地理解。

以上代碼：

<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>

來源

2016-09-24 01:59:26 danielarend

如何在視頻上疊加畫布

回答

相關問題