SerenityNetworks Posted March 6, 2015 Share Posted March 6, 2015 (edited) I'm not sure what the solution is, so I'm not sure if I should have placed this in the CSS, JavaScript, or another sub-forum. Please let me know if this needs to be moved or reposted. I'm going to have a video playing on an HTML5 web page (using JavaScript). I'd like to overlay a portion of the video with a quadralateral parallelogram transparent color "highlight" where the user controls where the overlay appears, how much transparency there is to the overlay, and perhaps the color of the overlay. A similar function is how it is shown on TV with the football line of scrimmage and first down lines overlayed on the football field. But I simply need a four sided parallelogram on the top layer. See the attached example image. I'm hoping that after the page loads and the video displays that the user can enter four coordinates and have the transparency display on (over) the page while the video is playing. I'm not particular: I don't care if the user scrolls the page causing the video to move while the highlighted area stays in the same place. I don't care if the user wants the highlighted area to go over portions of the page not covered by the video. I don't care if the coordinates are manually entered (it doesn't have to be fancy click and drag controls or anything). I don't care if the four points of the parallelogram are entered as x-y, pixels from edges, or whatever. I just need to be able to enter the four points, the percent transparency, and the color of the parallelogram in fields, press a button, and have the overlay appear as defined. Is this possible? Can anyone provide me with a solution or example? Thank you in advance, Andrew Edited March 6, 2015 by SerenityNetworks Link to comment Share on other sites More sharing options...
Ingolme Posted March 7, 2015 Share Posted March 7, 2015 With the <canvas> element and some Javascript you can display data from a <video> element while also drawing shapes ontop of it. It's not simple, though. You'll need a part of the program that shows the video, a part of the program that stores data about the shape and a part of the program that draws the shape onto the canvas. Link to comment Share on other sites More sharing options...
SerenityNetworks Posted March 7, 2015 Author Share Posted March 7, 2015 Hmmm. I was hoping JavaScript might be able to used to enter values CSS could use. I thought I'd heard that CSS could be used to draw transparent shapes on web pages that weren't just plain rectangles with horizontal and vertical sides. But I haven't fooled web design technology in years, so I'm really not sure. I do know I'm not going to be purchasing third party software to do the trick. I'm just looking for something standard web coding can perform. Link to comment Share on other sites More sharing options...
Ingolme Posted March 7, 2015 Share Posted March 7, 2015 CSS can't draw shapes. You don't need to use third party software if you're willing to learn programming. <canvas>, <video> and Javascript are all W3C standards. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 7, 2015 Share Posted March 7, 2015 http://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skew 1 Link to comment Share on other sites More sharing options...
SerenityNetworks Posted March 7, 2015 Author Share Posted March 7, 2015 Thank you! I haven't tried it over video yet, but it looks like "skew" is going to work perfectly. Thanks again, Andrew <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Skew1</title> <style> div.transbox { width: 1px; height: 1px; opacity:0.6; } div.transbox p { margin-left: 150px; margin-top: 15px; width: 20px; height: 200px; background-color: pink; filter: alpha(opacity=40); /* For IE8 and earlier */ ms-transform: skew(20deg,10deg); /* IE 9 */ webkit-transform: skew(20deg,10deg); /* Safari */ transform: skew(20deg,10deg); /* Standard syntax */ } p { font-weight: bold } </style></head><body> <div class="transbox"> <p> </p><!--This is the element that is overlayed with the transparency.--> </div><br/><br/><p>Resources:</p>http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency<br/>http://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skew<br/>http://www.w3schools.com/css/tryit.asp?filename=trycss_image_opacity<br/>http://www.corelangs.com/css/box/overlay.html<br/><br/></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now