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.

11

I have found problems retrieving mp4 files >= 25 MB using a WebDev URL as the source for the VideoPlayer. The video looks to be playing normally to the user, but in the background the VideoPlayer's "waiting" status keeps toggling on which calls WebDev again to re-download the video data which is bad for network usage. This seems to only be an issue if you are looping the video though.

The video not playing in Designer could be related to this in the docs

12

Don't do that. Even if the VideoPlayer could handle it, it is terribly inefficient to make the JVM handle large files. Segment your videos into a few MB per chunk and deliver a playlist file instead.

1 Like
13

Do you know where I can find an example using a playlist file with the Perspective VideoPlayer?

I used ffmpeg to segment the video into 10s chunks, but the VideoPlayer is just showing "File Not Valid". I tried using a .m3u, .m3u8, and .txt file extension for the playlist file.
Below is an example of what my playlist file looks like, with each row pointing to the WebDev URL for each sequential mp4 chunk. I also tried just using the UNC path to each video segment file, instead of my webdev URL on each row.

#EXTM3U
http://myGateway:8088/system/webdev/projectName/PythonResourceName?filePath=\\root\Safari_segments\Safari_00.mp4
http://myGateway:8088/system/webdev/projectName/PythonResourceName?filePath=\\root\Safari_segments\Safari_01.mp4
14

What content type did you deliver your playlist as? It should be application/vnd.apple.mpegurl for m3u8, per this RFC:

https://datatracker.ietf.org/doc/id/draft-pantos-http-live-streaming

(The file extension is ignored when a server supplies a content type, and the WebDev module always supplies a default content type if you don't.)

I hope you aren't going to publish a webdev script that actually reads any filepath in your server. Quick way to get hacked.

15

I tried to follow your stemp to show a large video in WeDev Module, I segmented the video to small chunk around 6MB and created both playlist.m3u8 and master.m3u8, and importing every file into the WebDev module using Content-Type video/mp2t and application/x-mpegURL respectively for .ts and .m3u8 file, I also tried to recreate the URL like said here Playing a video using WebDev - #10 by Zach_Larson also trying to add and removing "" and {session.props.gateway.address}, but still every time that I use the mounted path of the master or playlist file into the video component I get error as "File Not Supported"

16

I'm not sure what might be going wrong. Try opening the playlist file URL in a modern browser and examine the headers in the browser's tools to ensure you are getting what you expect.

1 Like
17

I'm unable to open the plasylist neither the stream.m3u8 or master.m3u8 I tired both creating the playlist using .ts and .mp4 segment.
I was playing around with ffmpeg and I used this cmd

ffmpeg -y -i video.mp4  -c:v copy -c:a copy -f hls -hls_time 4 -hls_playlist_type vod -hls_flags independent_segments -hls_segment_type mpegts -hls_segment_filename hls_seg_%02d.ts -master_pl_name masterts.m3u8 streamts_%v.m3u8

do you have suggestion on how to improve the segmentation process and also the playlist editing? Since I think the problem might be in here

I also made a new post the other day with more detailed description of what I've done so far Using playlist in webdev module to play long video

18

What does this mean? What does the browser show? And what headers does it show (in the browser dev tools)?

(You may have some WebDev configuration or URL problem if you are getting 404 errors.)

Make sure you can serve files via WebDev at all before you freak out over the segmentation process.

19

The Browser is just downloading the file like it's not recognizing the format and is not even able to play them through any Chrome extension. I'm only able to play the .m3u8 file through VLC in Windows or a normal video player on Linux but not trough any Browser, I guess I'm doing something wrong in the playlist format, I also tried different combination of URL in the .m3u8 files but then not even VLC is able to play then

The WebDev module is able to serve files since someone before me just uploaded a small video of 6MB and it's working for it

20

What content type header was the playlist file delivered with? (As shown by the browser, not what you think you've configured.)