Playing a video using WebDev

Ignition
1

I searched a bit, but everyone seems to have some kind of a very specific technical question.

I need the basics to start I think.
I make a video in OBS.
Saves as a video file, maybe MP4.
I go to WebDev, create a new folder.
Then create a new file resource.
Pick my video from my local pc.
The video, the whole video, will be uploaded to the pc the Gateway is on yes?
Then I can add a video player component with a path to the where the video is on the pc with the Gateway, or a reference to the file in the WebDev folder I made?

2

Yes, if you make a 'File' resource. I wouldn't make file resources larger than ~tens of megabytes, which is easy to hit with videos.

That.
There's a context menu option:

image
image1220×762 49.9 KB

That will give you a path like this:
/system/webdev/test/application.json

1 Like
3

If you need to serve large video files, you should segment them (I use FFmpeg's segmenter) to produce a bunch of little pieces, the present a playlist file that has the URLs of the pieces. (FFmpeg will spit out such a playlist when segmenting. You have to fix up the file paths to be the real URLs.)

4

That software both dices up the video, and makes a playlist you are saying.
I am thinking when I have a large video, I will need to revisit this.
I am not clear on what a playlist consists of. The actual video is just the snips, and the playlist some scripting that combines or plays them sequentially seamlessly when needed?

I am going to try the mounting of the one simple video soon.
I just found a bug making my video luckily so I need to fix that page first.

5

The playlist is a text file that you serve to a remote video player as if it is the video. This is a web standard. The video player will see that it is a playlist, not the actual video, and will start retrieving the pieces. The playlist contains timestamp information for each piece, so the video player can jump around to any timestamp without having to transfer the whole video.

I recommend playing with FFmpeg's segmenter and seeing what it produces.

1 Like
6

How many mb is good?
Is there a way to minimize the mb?
My 4 minute video is 80mb right now, recorded in OBS format is MKV.

I think I have messed this up.
I right clicked for add file resource.
I saw an image of a file with the right mb on it.
I designated application json in the dropdown.

I made a view with a coordinate container. Placed a video player. Placed the path in the source.
It was not able to play the video in the preview mode.

The file name is like myvideo2024.mkv

Recorded a short mp4 version.
The type is recognized.

However, I think I have a path issue. Foldername/filename.mp4 is what copies from copy file path.

I tried to manually append the /system/webdev/
However, I must be appending the wrong thing from what I can tell.

I think right now, I just have an issue with the path in the source. I am not sure.

7

I think it needs to be "/system/webdev/project name/mounted folder name/file name"

That's what worked to open a PDF in the PDF Viewer in my project at least.

2 Likes
8

I tried:
/system/webdev/myproject/myfoldername/myfilename.mp4

Is the extension not supposed be on the end of the name?

9

Mine has the .pdf at the end.

10

{session.props.gateway.address}+/system/webdev/MyProject/myfolder/MyFile.mp4"
I tried the above as well.
Not sure.

It is working, just in the browser not the designer.