Innovative HTML5 Video Canvas Shapes

I'm currently working on creating a circular frame or canvas for live HTML5 Video. While I am able to round the corners using keyframes radius property, it results in an oval shape rather than a circle.

My preference would be to utilize a div object (png image) as a mask for the video, but if that's not feasible, I'm open to using a circular mask instead.

Here is the existing code:

<style>
  video, canvas {
        z-index: 1;
        position: absolute;
        top: 10%;
        left: 25%;
        -webkit-border-radius: 50%; 
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden; 
  }
</style>
<video id="video" width="600" height="450" preload autoplay loop muted controls></video>
<canvas id="canvas" width="600" height="600"></canvas>

Having a circular mask for the video is preferred over changing the aspect ratio, which could result in distortion. Thank you!

javascriptcsshtmlvideocanvas

Answer №1

Design the main div and video element individually. Incorporate a -webkit-mask-image into the main div.

The -webkit-mask-image CSS property specifies the mask image for an element. This mask image will hide parts of the element based on its transparency levels.

CSS

.container {
   width: 600px;
   height: 600px;
   border-radius: 300px;
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

video {
   width: 600px;
   height: 600px;
   position: absolute;
   top: -125px;
   left: -125px;
}

HTML

<div class="container">
    <video id="video" preload autoplay loop muted controls></video>
</div>

Give it a try to see the effect :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message encountered in node-schedule: Unable to read undefined property upon job restart

Using node-schedule, I have successfully scheduled jobs on my node server by pushing them into an array like this: jobs.push(schedule.scheduleJob(date, () => end_auction(req.body.item.url))); Everything is working as expected. When the designated date ...

javascriptnode.jscronnode-schedule

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...

javascriptjqueryhtmlcssajax

Using curly braces when invoking a function from HTML within a Vue.js application

When I call a function, for example on click, it works whether or not I use curly braces. However, I have created a function that triggers a custom event from a child component. I then await this event in a parent component and update the state with my par ...

javascriptfunctionvue.jsstatecurly-braces

Checkbox selection limitation feature not functioning correctly

Having trouble with my checkbox question function - I want to limit the number of checkboxes that can be checked to 3, but it's still allowing more than that. I suspect the issue lies with latestcheck.checked = false; This is my typescript function: ...

htmltypescriptcheckbox

How can you use Vue.js @mouseover to target a specific <path> element within an <svg>?

Check out this Codepen example. I am working with an SVG map that contains various paths holding data. My goal is to retrieve the state name when hovering over a specific path. Currently, I have added an event listener to the svg element and am trying to ...

javascriptsvgvue.jsvuejs2vue-component

Is it feasible to create a doughnut chart with curved edges?

My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful. I want each segment to have fully rounded corners, which presents a unique challenge. ...

javascriptcsssvgchartshtml5-canvas

Display the names of files depending on the selection made in the drop-down menu

In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...

javascriptphpjqueryhtmlajax

VueJS throws an error indicating that the object cannot be extended

I have encountered an issue while trying to update the promo object by adding a new field called colspan. Unfortunately, I am getting this error: uncaught (in promise) TypeError: Cannot add property colspan, object is not extensible at eval (eval at ...

javascriptvue.jsvuex

Geometry is making its debut appearance in ThreeJS for the very first time!

Currently, I am experimenting with a simple script using ThreeJS to create a point wherever you click on the screen. Below is the function responsible for adding the point: function addPoint(coord){ var geometry = new THREE.BufferGeometry(); var verti ...

javascriptthree.js

Confirm that the array contains exactly 2 elements

Is there a way to confirm that an array contains exactly two specific values, for example: ['foo', 'bar'] After trying different approaches, the closest solution I found looks like this: Yup.array() .of(Yup.mixed().oneOf(['foo&a ...

javascriptarraysyup

Is there a way to retrieve the properties of another function within the same component?

I am trying to place NumberFormat inside OutlinedInput and I also need different properties for the format of NumberFormat. (There will be a select window that defines which format property to use). This is what I have: import OutlinedInput from "@ma ...

javascriptreactjsmaterial-ui

In React, a singular reference cannot establish focus amidst an array of references

Scenario In this scenario, we are restricted to using only keyboard navigation without any mouse clicks. Imagine a situation where we have 10 table rows displayed on the screen. Each row contains a menu button for interaction. When the tab key is pressed ...

javascriptreactjsreact-hooksreact-ref

Refreshing the parent page in Oracle Apex upon closing the child window.When the child window

I have created an interactive report with a form where the interactive report is on page 2 as the parent page and the form page is on page 3 as the child page. In the parent page, I have written JavaScript to open a modal window (form page - page 3) using ...

javascriptjqueryhtmloracleoracle-apex

Is it possible to quickly sync API data with a CSV file for updates?

My unique code allows retrieving Amazon product prices with the ASIN (Amazon Standard Identification Number). Here is the code snippet for reference. <?php class AmazonAPI { // Code implementation details here } ?> To display the price, use ...

javascriptphpjqueryajaxcsv

The problem of duplicate ids: Once an id is used, it cannot be

Currently, I'm focusing on a specific script : http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/# I've made some adjustments to the Gmail and Facebook boxes within this script. When clicking on them, I want them to displa ...

htmlcss

Exploring a collection of objects using a filter and specific keyword

I am looking to implement a search functionality in JavaScript using an array, filter, and keyword. The goal is to search through the array based on the filter and keyword provided, and return a new array of objects similar to the original one. var data ...

javascriptarrayssearchfilter

Implemented an HTML hyperlink element precisely positioned

I have the following HTML code. I am trying to fix the position of an anchor tag called "View All" so that it stays in a specific location. However, whenever the value in the dropdown menu changes, the anchor tag moves according to the length of the new se ...

htmlcss

Animate my banner images only after they have fully loaded using Jquery

I recently came across a banner image slideshow in jQuery, but it seems to be animating even before the images are fully loaded. This results in the slideshow displaying image descriptions without the actual images themselves. Can anyone help me modify th ...

javascriptjquery

Trouble with mapping an array in my Next JS application

When working on my Next JS app, I encountered an error while trying to map an array for the nav bar. The error message reads: TypeError: _utils_navigation__WEBPACK_IMPORTED_MODULE_6___default(...).map is not a function. Here is the code snippet that trigge ...

javascriptreactjsnext.js

Attempting to iterate through an array of HTML5 videos

Having some trouble with my video array - it plays but doesn't loop. I've tried using the HTML video attribute 'loop' and variations like loop="true" and loop="loop" without success. Tonight, all I want is for it to loop properly! var ...

javascriptjqueryhtmlvideo