How do I play Segmented Videos

Ignition
1

Hi there, If someone could perhaps give me a suggestion on how to play segmented videos in perspective. I have a couple of videos that each need to be segmented and played on a perspective view.

I tried following along to this topic: Playing a video using WebDev - Ignition - Inductive Automation Forum with no success

What I did was I segmented my video to separate 30s long videos in the format of .m4s. Along with the videos I created a .m3u8 file. I then uploaded these videos and the .m3u8 to my web dev module. After uploading the files I changed the .m4s format to “video/iso.segment” and the .m3u8 to “application/x-mpegURL”
In my perspective view I added a video player and set its source to the mounted path of the .m3u8 file.
/system/webdev/Video_Split_Test/Playlist.m3u8
Inside my .m3u8 file I also changed the urls of the segments to
{session.props.gateway.address}+ "/system/webdev/Video_Split_Test/ASM_Standard_Playlist0.m4s"

I want to say that even when trying to play one of the segmented videos on the video player it still doesn’t work. I have also tried tried the .ts format for the videos.

Idk if i missed something or if there is a better way of playing segmented videos but some advice will help.

2

According to the HTTP Live Streaming standard, the content type for .m3u8 is supposed to be application/vnd.apple.mpegurl. Try that.

Also make sure that you can actually play each segment directly in a browser tab to be sure the codec is supported. (The Chrome instance in an Ignition designer does not support commercial codecs--test in a real browser.)

3

I tried the content type application/vnd.apple.mpegurlbut i still get error loading media in the browser.

But I got it to work in the end.
I abandoned the idea of using the video player instead I am using the Inline Frame.
Instead of using m4s I am using the .ts format for my segments. The m4s for some reason doesn’t properly load in my browsers.

Here is my process for anyone wanting to replicated my solution.
I created an html page. Here is the code i used.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Video Player</title>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
  <video id="video" controls></video>
  <script>
    const video = document.getElementById('video');
    const videoUrl = "http://localhost:8088/system/webdev/Video_Split_Test/Playlist0.m3u8"; // Replace with your playlist URL
if (Hls.isSupported()) {
    const hls = new Hls({
        manifestLoadPolicy: {
            default: {
            maxTimeToFirstByteMs: 10000, // Maximum time to first byte
            maxLoadTimeMs: 10000,        // Maximum load time
            timeoutRetry: {
                maxNumRetry: 2,           // Maximum number of retries
                retryDelayMs: 0,          // Retry delay in milliseconds
                maxRetryDelayMs: 0        // Maximum retry delay in milliseconds
            },
            errorRetry: {
                maxNumRetry: 1,           // Maximum number of retries on error
                retryDelayMs: 1000,       // Retry delay in milliseconds
                maxRetryDelayMs: 8000     // Maximum retry delay in milliseconds
            }
            }
        }
    });
    hls.loadSource(videoUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
        // Wait for user interaction to play the video
        video.pause().catch(error => {
            console.error('Playback failed:', error);
        });
    });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoUrl;
    // Wait for user interaction to play the video
    video.pause().catch(error => {
        console.error('Playback failed:', error);
        });
    }
</script>
</body>
</html>

for splitting my video into segment i used ffmpeg. Here is the code:

ffmpeg -y -i "Video.mp4" \
  -c:v libx264 -preset medium \
  -x264-params keyint=300:min-keyint=300:scenecut=0 \
  -force_key_frames "expr:gte(t,n_forced*10)" \
  -c:a aac -b:a 128k \
  -f hls \
  -hls_time 30 \
  -hls_list_size 0 \
  -hls_playlist_type vod \
  -map 0 \
  Playlist.m3u8u

You need to upload all the files you create with the ffmpeg code to your web dev module. You will also need to upload your html file. Then make your inline frame source the mounted path of your html page.

With any luck launching your session your inline frame will load your html file and the paylist will be available to you to play.

2 Likes