Create a circular mask for videos

Best Practices + Tips & tricks
1

Hi Intuiface community!

We’ve been asked several times about this need, such as in this Crop or Mask an image? Basic design features? - #16 by Seb thread, and though Intuiface doesn’t have a built-in crop mask feature, there are several ways to achieve this scenario. I’ll show you one below using the HTML Frame Asset.

CircleVideo

Prerequisites

The video you want to play in such a shape needs to be either

  • hosted on a web server accessible to the Player running your experience (all platforms supported)
  • hosted on a local web server running on the Player’s PC. (Windows-only). You can use a free lightweight server such as https://fenixwebserver.com/

The HTML code

You’ll find below the HTML code and CSS to copy & paste in your HTML Frame asset. This example is made to automatically play a looping video without the audio, in a 700x700 pixels circle. You only need to replace the video source {VIDEO_URL} with your own URL and adjust the pixels dimensions (in both HTML & CSS) to adapt it to your own need.

HTML

<div class="rc">
<video src="{VIDEO_URL}" id="localVideoStream"  class="video-circle" width="700" height="700" autoplay muted loop></video>
</div>

CSS

 .rc{
 width: 700px;
 height: 700px;
 border-radius: 100%;
 -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
 -webkit-transform: rotate(0.000001deg); 
 -webkit-border-radius: 100%; 
 -moz-border-radius: 100%;
}

.video-circle {
border-radius: 50%;
object-fit: cover;
}

In Composer

If you need a static object, you can directly add the HTML Frame asset in your scene.
If you want the user to be able to manipulate the frame with multiple fingers (zoom, rotate), I recommend you to:

  • put the HTML Frame in a Group
  • set the Frame’s container to Scale
  • Set the Group’s container to Static.
  • Depending on your HTML code, you might want to add a transparent Ellipse shape on top of it to grab the touch and ensure a good manipulation. That will avoid the HTML Frame to intercept some touches.

image
image1326×721 284 KB

You can also replace the video tag with an image or any other HTML component, depending on your needs.
Additional hint if you are hosting your video on Dropbox: Make sure you have “?dl=1” at the end of your URL, to target the video file itself and not the Dropbox page containing it.

Give it a try and let me know how this works for you!

4 Likes
2

@Seb

Great example my only question would be stopping and starting the video in the HTML frame asset I have tried “Controls” attribute in the frame. Obviously the controls are hidden because of the CSS “Border-Radius;” To have something like this to work natively inside Intuiface directly I’m assuming is a lot of work. would a video with a transparent alpha channel work?

Again great example!

Kind Regards

3

Thanks for the feedback @Promultis.

A crop / mask feature is still on the long-term Intuiface roadmap and I started this thread only to provide an alternative solution for those who needs such a feature today. Such a feature is indeed a lot of work and not in our highest priorities at the moment.

I’m pretty sure one could add some controls / triggers in the HTML with a small piece of JavaScript. If your circle bubble can be static, you can add onclick="this.paused?this.play():this.pause() to the video tag that will handle the behavior you describe. This would grab the touch inputs and prevent Intuiface from being able to manipulate the object though.

4

Setting the W & H of the HTML Frame to match the content size adds scroll bars!
Setting them larger changes all my content offsets and centre points, solutions?

5

Make the container of the HTML Frame slightly bigger that will work and stop the scrollbars.

6

For everyones benefit, I understand that increasing the frame size by 16px will remove the scroll bars.
I was looking for a solution that didn’t require me to manually go through my entire experience, increasing the W and H of each of the 52 frames I have and then manually offsetting the X Y values by -8 to get the position corrected having just followed the clear instructions to set the frame size to the same as the content size.

7

Hey @jaypaulb the solution would of been to have each X and Y position along with the W and H inside a excel database then it would of been easier for you to manage rather than having to do it manually.

Kind Regards.

1 Like