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

问题

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>

        <!-- Apply a mask to the video -->
        <style>
            .target1 { mask: url("#mask1"); }
        </style>

        <!-- Define the mask with SVG -->
        <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!

回答1:

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>

回答2:

use CSS position:absolute to position your SVG where you want it.

<style> svg { position:absolute; top:20px; left:40px; }</style>

the above example should positions the svg 20 px from the top of the page and 40px from the left

来源：https://stackoverflow.com/questions/10114703/how-do-i-draw-a-shape-on-an-html5-video-using-svg

标签

html

html5

svg

html5-video