User input / VideoPlayer .src property validation

Ask the community
,
1

Hi, I’m allowing my registered users to have a video on their profile page - the user pastes a link to a video into an Input field during the registration process, submits it, the link is saved to a database and then used as .src property in VideoPlayer when user’s profile page is loaded.

User Input field type is set to URL, however, this is not enough. URL input field type prevents submitting random text string, but would not prevent submitting non-video URLs. For example “https://gmail.com/” is certainly not a link to a video, however the system would not recognize it, would allow to save it to the database and then retreive it as .src property of a video…

So this is my question: Is there a way to validate user input (in a code) to secure that the inputted URL is a supported video link, i.e. URL that can be used as .src property of a VideoPlayer?

Thx! r

2

You can add regex to your input field.

Like this:

311×527 19.1 KB

Regex:
/youtube.com/watch|dailymotion.com/video|vimeo.com/[0-9]/

That regex will allow videos from:
youtube,
dailymotion,
vimeo.

This is an example. You (or I), can add more sites to that validation.

@rusty

3

@allu112apina Hi, thanks for your suggestion. I was thinking about having a regex but was struggling with its efficiency.

Finally I came up with this:

(?<protocol>https?:\/\/(www\.)?|www\.)(?=.*mp4$|(?:.*youtube.com\/)|(?:.*youtu.be\/)|(?:.*vimeo.com\/)|(?:.*facebook.com\/)|(?:.*dailymotion.com\/)|(?:.*twitch.tv\/))(?<url>.*)

It doesn’t remove all the possible wrong combinations (e.g. if a video link is from some unsupported website and includes for instance “facebook.com/” string in its URL), but I think it can still serve its purpose fairly well.

But of curse, if you have any idea on upgrading it, I’m all ears… :slight_smile:

r

4

@rusty Yeah, I’m not sure there is a better way of doing this.

In wix atleast.

But yeah, you can open notepad and go to every site that is allowed, and see how the video links are layed out.

After taking notes of all of them, you can go to https://regex101.com/, to make the according pattern validation.

It is possible there, to make sure that after the “https://www.youtube.com/watch?v=” comes a string that is exactly 12 characters, and is either numbers or characters.

Hope it helps,
A