need to manually copy hls video parts to dist but video now plays in chunks

src/VideoPlayer.jsx

@@ -0,0 +1,43 @@
+import { h, render, Component } from "preact";
+//import React from "react";
+import Hls from "hls.js";
+import PortfolioVideo from "../static/video/index.m3u8";
+export default class VideoPlayer extends Component {
+  state = {};
+  //  componentDidUpdate() {
+  componentDidMount() {
+    const video = this.player;
+    const url = PortfolioVideo; //"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
+    if (Hls.isSupported()) {
+      const hls = new Hls();
+
+      hls.loadSource(url);
+      hls.attachMedia(video);
+      hls.on(Hls.Events.MANIFEST_PARSED, function () {
+        video.play();
+      });
+    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = url;
+      video.addEventListener("loadedmetadata", function () {
+        video.play();
+      });
+    }
+  }
+  render() {
+    return (
+      <video
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+        loop
+        muted
+        className="videoCanvas"
+        ref={(player) => (this.player = player)}
+        autoPlay={true}
+      />
+    );
+  }
+}

static/video/index.m3u8

@@ -0,0 +1,19 @@
+#EXTM3U
+#EXT-X-VERSION:3
+#EXT-X-TARGETDURATION:17
+#EXT-X-MEDIA-SEQUENCE:0
+#EXTINF:11.233333,
+index0.ts
+#EXTINF:9.466667,
+index1.ts
+#EXTINF:16.666667,
+index2.ts
+#EXTINF:8.333333,
+index3.ts
+#EXTINF:8.333333,
+index4.ts
+#EXTINF:6.433333,
+index5.ts
+#EXTINF:0.200000,
+index6.ts
+#EXT-X-ENDLIST