Injury Scope

Question

153

How to draw a shape on an existing video on HTML

rated 0 times [ 160] [ 7] / answers: 1 / hits: 5419 / 10 Years ago, thu, may 29, 2014, 12:00:00

I am trying to make a website that allow me to draw any kind of shape on an existing video.
I tried to put my code that draws any shape on top of the video but it disappears once I run the code.
Can someone please show me how to do that or what to use.
I am using HTML5, jquery, javascript to make this website.

Here is where and how am calling the video and the javascript file

Injury Scope

<div id=container>  

    <canvas id=imageView width=755 height=430></canvas>   

</div>  



<video id=sampleMovie src=around.mp4 controls>  



</video>  



    <script src=example1.js>  



    </script>

The code for the drawing works just fine

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daquanmilesw

Add To Favorites

Follow

Total Points: 57

Total Questions: 102

Total Answers: 110

Location: Wallis and Futuna

Member since Sat, Aug 6, 2022

2 Years ago

answered 10 Years ago josefn · Accepted Answer

You can simply create a div and put a video element in that just like this:

<div>

    <video src=http://v2v.cc/~j/theora_testsuite/320x240.ogg loop autoplay>Your browser does not support the <code>video</code> element.</video>

</div>

For this example i have made the div fit the screen, and gave the video a height and widthof auto and the min-height and min-width to 100%. I have done this with the following code:

div {

    position: relative;

    height: 100vh;

}

video {

    min-height: 100%;

    min-width: 100%;

    height: auto;

    width: auto;

}

When i want to draw a shape on the video, i use the :before code on the div like this:

div:before {

    position: absolute;

    content:;

    height: 100px;

    width: 100px;

    border-radius: 100%;

    top: 0;

    left: 0;

    z-index: 1;

    background-color: purple;

}

Now you can customize that to your needs.

Demo here