lume/src/_components/XeblogVideo.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// @jsxImportSource xeact
// @jsxRuntime automatic

import Hls from "npm:hls.js";

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

export interface VideoProps {
  path: string;
}

export default function Video({ path }: VideoProps) {
  const streamURL =
    `https://cdn.xeiaso.net/file/christine-static/${path}/index.m3u8`;
  const id = uuidv4();
  const video = (
      <video id={id} className="not-prose" style="width:100%" controls>
        <source src={streamURL} type="application/vnd.apple.mpegurl" />
        <source
          src="https://cdn.xeiaso.net/file/christine-static/blog/HLSBROKE.mp4"
          type="video/mp4"
        />
      </video>
  );

  const script = (
    <script type="module">
      {`import execFor from ${`'`}/js/hls.js${`'`};
      
      execFor(${`'`}${id}${`'`}, ${`'`}${streamURL}${`'`});`}
    </script>
  )

  return <>
    {video}
    {script}
  </>;
}