# Playing a video using WebDev **URL:** \ **Category:** Ignition\ **Tags:** webdev\ **Created:** [September 30, 2024, 5:52pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622 "2024-09-30T17:52:11Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [September 30, 2024, 5:52pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/1 "2024-09-30T17:52:11Z")
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? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [September 30, 2024, 5:55pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/2 "2024-09-30T17:55:26Z")
> [@Zach\_Larson](#): > > The video, the whole video, will be uploaded to the pc the Gateway is on yes? 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. > [@Zach\_Larson](#): > > a reference to the file in the WebDev folder I made? That. There's a context menu option: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/c/5c7e6e0562f547da13399019fb52e69dbe63b6f4.png) That will give you a path like this: `/system/webdev/test/application.json` ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [September 30, 2024, 6:11pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/3 "2024-09-30T18:11:38Z")
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.) ---
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [September 30, 2024, 7:10pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/4 "2024-09-30T19:10:24Z")
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. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [September 30, 2024, 7:15pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/5 "2024-09-30T19:15:24Z")
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. ---
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [September 30, 2024, 7:45pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/6 "2024-09-30T19:45:00Z")
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. ---
**Author:** ![Kevin\_Flener](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Kevin\_Flener](https://forum.inductiveautomation.com/u/Kevin_Flener)\ **Post date:** [September 30, 2024, 8:43pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/7 "2024-09-30T20:43:00Z")
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. ---
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [October 1, 2024, 1:36pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/8 "2024-10-01T13:36:59Z")
I tried: /system/webdev/myproject/myfoldername/myfilename.mp4 Is the extension not supposed be on the end of the name? ---
**Author:** ![Kevin\_Flener](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Kevin\_Flener](https://forum.inductiveautomation.com/u/Kevin_Flener)\ **Post date:** [October 1, 2024, 1:50pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/9 "2024-10-01T13:50:09Z")
Mine has the .pdf at the end. ---
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [October 1, 2024, 1:55pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/10 "2024-10-01T13:55:48Z")
`{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. ---
**Author:** ![Curtis\_Stacy](https://avatars.discourse-cdn.com/v4/letter/c/ed8c4c/32.png) [@Curtis\_Stacy](https://forum.inductiveautomation.com/u/Curtis_Stacy)\ **Post date:** [October 22, 2024, 3:26pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/11 "2024-10-22T15:26:50Z")
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](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-video-player#designer-playback) ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [October 22, 2024, 3:33pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/12 "2024-10-22T15:33:29Z")
> [@Curtis\_Stacy](#): > > retrieving mp4 files \>= 25 MB using a WebDev 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. ---
**Author:** ![Curtis\_Stacy](https://avatars.discourse-cdn.com/v4/letter/c/ed8c4c/32.png) [@Curtis\_Stacy](https://forum.inductiveautomation.com/u/Curtis_Stacy)\ **Post date:** [October 22, 2024, 8:56pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/13 "2024-10-22T20:56:58Z")
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. ```python #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 ``` ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [October 22, 2024, 9:12pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/14 "2024-10-22T21:12:33Z")
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](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. ---
**Author:** ![Alex\_Mulder](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@Alex\_Mulder](https://forum.inductiveautomation.com/u/Alex_Mulder)\ **Post date:** [November 7, 2024, 3:33am UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/15 "2024-11-07T03:33:43Z")
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](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/10) 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" ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [November 7, 2024, 1:22pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/16 "2024-11-07T13:22:41Z")
> [@Alex\_Mulder](#): > > use the mounted path 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. ---
**Author:** ![Alex\_Mulder](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@Alex\_Mulder](https://forum.inductiveautomation.com/u/Alex_Mulder)\ **Post date:** [November 7, 2024, 9:14pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/17 "2024-11-07T21:14:34Z")
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 ```python 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](https://forum.inductiveautomation.com/t/using-playlist-in-webdev-module-to-play-long-video/98256) ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [November 7, 2024, 9:29pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/18 "2024-11-07T21:29:40Z")
> [@Alex\_Mulder](#): > > unable to open the plasylist 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. ---
**Author:** ![Alex\_Mulder](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@Alex\_Mulder](https://forum.inductiveautomation.com/u/Alex_Mulder)\ **Post date:** [November 7, 2024, 9:56pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/19 "2024-11-07T21:56:26Z")
> [@pturmel](#): > > e some WebDev configuration or URL problem if you are getting 404 erro 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 ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [November 7, 2024, 10:14pm UTC](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622/20 "2024-11-07T22:14:57Z")
> [@Alex\_Mulder](#): > > not recognizing the format What content type header was the playlist file delivered with? (As shown by the browser, not what you think you've configured.) [Next page](https://forum.inductiveautomation.com/t/playing-a-video-using-webdev/96622.md?page=2)