HTML Video Uploader

Ask the community
,
1

Basically I’m super close to making my Video Uploader work, I also put the Video Upload Limit to 250 MB and now I need help to make this work, basically I’m using an HTML Component to host the Uploader and I need to send the videos to the Database where I’m hosting Video Uploads, also the Video Player is my own and I’m using an HTML Component for that as well, so my question is, How can I send/receive a Video to/from my Database into both Components and it also supports Thumbnails for the video player.
here’s some code I was trying to get to work with the Video Uploader

$w.onReady( function () {
// when a message is received from the HTML element
$w(“#html1”).onMessage( (event) => {
$w(“#video1”).video = event.data;
} );
} );

export function messageSendButton_onClick() {
// send message to the HTML element
(“#html1”).postMessage($w(“#video”).value);
}

2

Found your question.

First … video files are supported only via the media manager (which only the site owner/contributors have access to). So to set a video field — it would have to be done directly from the database collection.

You can set any compatible video URL to be connected to the video player. You can test to see if your hosted video URL is compatible by adding a bit of code. (For example, YouTube links are compatible)
Read here: https://www.wix.com/code/reference/$w.Video.html#videoUrl

Regarding passing information via the HTML component — would depend on your HTML code that you are using and/or API that you are using. You can read about an example here: Velo: Working with the HTML iframe Element | Help Center | Wix.com

It may not be the answer you are looking for, but I hope it points you in the right direction.

3

Thanks for your response, it does help in a sense, but I’ll have to do some more research in order to make this work.

4

@james-rondon-jr I think you need to provide a little more information about your problem. Here is my understanding and where I think you have problems to solve.

  1. You say that you have your own video player that you are running in an HTML Component. Is it something you have developed or are you using some off-the shelf application from a CDN share point?
  2. What is the format of the video you are uploading to your data collection and how are you doing this? Videos are typically compressed binary object files and not strings. These are not supported in the data collection types. Most databases would use a blob to store videos, wix’ approach is to store the video in a special media manager that serves videos via a URL much like YouTube, Vimeo etc. YouTube and Vimeo and other streaming platforms are also supported using applicable URLs.
  3. The code you have shared doesn’t really make much sense as it is not shown in the context of what you are trying to do AND you don’t appear to be using the Wix Code APIs properly.

So for example you have this assignment

$w("#video1").video = event.data;

Based upon your comment you appear to be wanting to assign upto 250MB of data from event.data to some property called $w(“#video1”).video. There are two issues I see here. One is that moving this amount of data around in the browser is time and resource consuming and not practical. Second if you look at the video APIs (which I assume this element is one of) the APIs do not have a .video property

1708×1158 87.5 KB

1708×1750 317 KB

Both of these APIs expect a URL to a video for the video to be shown. In the Video API it is called videoUrl, in the VideoPlayer API it is called src.

In addition you are sending a $w(“#video”).value (which also doesn’t exist on any of the video element APIs) to your html component. Is this really a text input control? is it supposed to be the same element as $w(‘#video1’)?

You either don’t fully understand the Wix platform and how Wix Code works or you need to provide more details about how your site is designed and how you expect the upload and streaming process to work.

For example:
NOTE: This is derived from the question and shared code and is provided for illustrative purposes ONLY.

  1. User prepares a video file (in format xyz) on their desktop.
  1. They visit your site and there is an HTML component that prompts to upload their video
  1. The HTML Component uploads the video file from the user desktop (in what format binary object or text)
  1. When the video upload completes the HTML Component uses postMessage to send the video buffer to the Wix Page (a single 250MB file?)
  1. When the page code receives the video in the onMessage handler fo the html Component the page code converts the video to a string and stores it in a data collection?
    etc…

When you write down your design and share the code you have completed so far, including the HTML, it will be easier to see how to help.
Cheers

5

@code-queen Thanks for responding. @James Rondon Jr I will remove the comments from the general post that led us here.

6

@stevendc the video formats i like to use is .mp4 and .mov, now for the code in particular, I’ll give you a screenshot of the Uploader and how the video looks after I’m done, I also might have found a work around way to do this that only involves using the Wix Video Player and Google Sheets, I will show you some sample code though, because it’s not fully done yet, but that will be in the next comment when I get those screenshots.