This is my controller When I call for the first time with the actual endpoint with the proper ID, it gives the output but when I send it, it gets error-prone. It will automatically change the video ID with the segment_000.ts

@GetMapping("/stream/{videoId}")
public ResponseEntity<Resource> streamVideo(
        @PathVariable String videoId,
        @RequestHeader(value = HttpHeaders.RANGE, required = false) String rangeHeader) {

    try {
        System.out.println("Video Id : "+videoId);
        // Fetch the video metadata
        Video video = videoService.findById(videoId);

        if (video == null) {
            return ResponseEntity.notFound().build();
        }

        // Construct the path to the HLS playlist
        Path playlistPath = Paths.get(video.getFilePath());

        // Check if the playlist file exists
        if (!Files.exists(playlistPath)) {
            return ResponseEntity.notFound().build();
        }

        // Load the file as a resource
        Resource resource = new FileSystemResource(playlistPath);
        String contentType = "application/vnd.apple.mpegurl";
        long fileLength = Files.size(playlistPath);

        if (rangeHeader != null) {
            try {
                // Handle range requests for seeking
                String[] ranges = rangeHeader.replace("bytes=", "").split("-");
                long rangeStart = Long.parseLong(ranges[0]);
                long rangeEnd = ranges.length > 1 ? Long.parseLong(ranges[1]) : fileLength - 1;

                // Validate range end
                if (rangeEnd >= fileLength) {
                    rangeEnd = fileLength - 1;
                }

                // Validate range start
                if (rangeStart > rangeEnd) {
                    return ResponseEntity.status(HttpStatus.REQUESTED_RANGE_NOT_SATISFIABLE)
                            .header(HttpHeaders.CONTENT_RANGE, "bytes */" + fileLength)
                            .build();
                }

                // Calculate content length
                long contentLength = rangeEnd - rangeStart + 1;

                // Prepare headers
                HttpHeaders headers = new HttpHeaders();
                headers.add(HttpHeaders.CONTENT_RANGE, "bytes " + rangeStart + "-" + rangeEnd + "/" + fileLength);
                headers.add(HttpHeaders.CONTENT_LENGTH, String.valueOf(contentLength));
                headers.add(HttpHeaders.CACHE_CONTROL, "no-cache, no-store, must-revalidate");
                headers.add(HttpHeaders.PRAGMA, "no-cache");
                headers.add(HttpHeaders.EXPIRES, "0");
                headers.add(HttpHeaders.CONTENT_TYPE, contentType);

                // Serve the partial content
                InputStream inputStream = Files.newInputStream(playlistPath);
                inputStream.skip(rangeStart);

                return ResponseEntity.status(HttpStatus.PARTIAL_CONTENT)
                        .headers(headers)
                        .body(new InputStreamResource(inputStream));
            } catch (NumberFormatException e) {
                return ResponseEntity.status(HttpStatus.REQUESTED_RANGE_NOT_SATISFIABLE)
                        .header(HttpHeaders.CONTENT_RANGE, "bytes */" + fileLength)
                        .build();
            }
        } else {
            // Serve the full content
            HttpHeaders headers = new HttpHeaders();
            headers.add(HttpHeaders.CONTENT_TYPE, contentType);
            headers.add(HttpHeaders.CONTENT_LENGTH, String.valueOf(fileLength));
            headers.add(HttpHeaders.CACHE_CONTROL, "no-cache, no-store, must-revalidate");
            headers.add(HttpHeaders.PRAGMA, "no-cache");
            headers.add(HttpHeaders.EXPIRES, "0");
            System.out.println(resource.toString());
            return ResponseEntity.ok()
                    .headers(headers)
                    .body(resource);
        }

    } catch (IOException e) {
        // Handle IOException
        e.printStackTrace();
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
    } catch (Exception e) {
        // Handle other exceptions
        e.printStackTrace();
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
    }
}

I am attaching the error image : IMAGE

In the front end i am using the angular application :

This is the app.jsx file

import "./App.css";
import VideoPlayer from "./VideoPlayer";
import { useRef } from "react";

function App() {
  const playerRef = useRef(null);
  const videoLink =
    "http://localhost:8080/api/v1/video/stream/66b9e7853c9b530810bdf4f4";
  const videoPlayerOptions = {
    controls: true,
    responsive: true,
    fluid: true,
    sources: [
      {
        src: videoLink,
        type: "application/x-mpegURL",
      },
    ],
  };
  const handlePlayerReady = (player) => {
    playerRef.current = player;

    // You can handle player events here, for example:
    player.on("waiting", () => {
      videojs.log("player is waiting");
    });

    player.on("dispose", () => {
      videojs.log("player will dispose");
    });
  };
  return (
    <>
      <div>
        <h1>Video player</h1>
      </div>

      <VideoPlayer
        options={videoPlayerOptions}
        onReady={handlePlayerReady}
      />
    </>
  );
}

export default App;

This is the VideoPlayer.jsx file:

import React, { useRef, useEffect } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";

export const VideoPlayer = (props) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);
  const { options, onReady } = props;

  useEffect(() => {
    // Make sure Video.js player is only initialized once
    if (!playerRef.current) {
      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
      const videoElement = document.createElement("video-js");

      videoElement.classList.add("vjs-big-play-centered");
      videoRef.current.appendChild(videoElement);

      const player = (playerRef.current = videojs(videoElement, options, () => {
        videojs.log("player is ready");
        onReady && onReady(player);
      }));

      // You could update an existing player in the `else` block here
      // on prop change, for example:
    } else {
      const player = playerRef.current;

      player.autoplay(options.autoplay);
      player.src(options.sources);
    }
  }, [options, videoRef]);

  // Dispose the Video.js player when the functional component unmounts
  useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player && !player.isDisposed()) {
        player.dispose();
        playerRef.current = null;
      }
    };
  }, [playerRef]);

  return (
    <div
      data-vjs-player
      style={{ width: "600px" }}
    >
      <div ref={videoRef} />
    </div>
  );
};

export default VideoPlayer;

I am trying to play the video in the player. But the video is not playing in the browser. and when I hit the endpoint with Postman, it gives me the content of the index.m3u8 file. In the player, the video length is coming, but the video is not playing. Please help me to play the video.

*

Github Project Link: GITHUB*