I am trying to draw shapes on top of an HTML5 video, but am having trouble figuring out how to do it. I know how to apply a mask on top of the video: ``` SVG Test .target1 { mask: url("#mask1"); } ``` But how do I do something like draw a polyline on top of the video? ``` ``` I can draw the line elsewhere on the page, like…

yes, css solution is one option. try to put those two elements above either in one div or (as jörn pointed out) with absolute positioning. z-index is very useful, to make sure your svg is really on top. ``` (...) (...) canvas{ position:relative; width:480px; height:240px; } videoContainer{ position:relative; width:100%; height:100%; z-index:1 } svgContainer{ position:relative; width:100%; height:100%; z-index:2 } ```

How do I draw a shape on an HTML5 video using SVG?

html, html5-video, svg

Solution

yes, css solution is one option. try to put those two elements above either in one div or (as jörn pointed out) with absolute positioning. z-index is very useful, to make sure your svg is really on top.

<div id="canvas">
    <video id="videoContainer"> (...) </video>

    <svg id="svgContainer"> (...) </svg>
</div>


<style> 
   canvas{ position:relative; width:480px; height:240px; }
   videoContainer{ position:relative; width:100%; height:100%; z-index:1 }
   svgContainer{ position:relative; width:100%; height:100%; z-index:2 }
</style>

Problem

I am trying to draw shapes on top of an HTML5 video, but am having trouble figuring out how to do it. I know how to apply a mask on top of the video: ``` <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>SVG Test</title> </head> <body> <video class="target1" height="270px" width="480px" controls > <source src="testVideo.webm" type="video/webm" /> </video>  <style> .target1 { mask: url("#mask1"); } </style>  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="480px" height="270px"> <defs> <mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <circle cx="0.25" cy="0.25" r="0.5" fill="white" /> </mask> </defs> </svg> </body> </html> ``` But how do I do something like draw a polyline on top of the video? ``` <polyline id="line" points="0,0 25,25, 25,50 75,50 100,100, 125,125" style="fill:none;stroke:orange;stroke-width:3" /> ``` I can draw the line elsewhere on the page, like so: ``` <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>SVG Test</title> </head> <body> <video class="target1" height="270px" width="480px" controls > <source src="testVideo.webm" type="video/webm" /> </video> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1200px" height="700px"> <polyline id="line" points="0,0 25,25, 25,50 75,50 100,100, 125,125" style="fill:none;stroke:orange;stroke-width:3" /> </svg> </body> </html> ``` But I just can't figure out how to get the line on top of the video. Any help would be greatly appreciated!

Original source