📦 0-Chan / nextjs-player-prototype

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77"use client";

import ShakaPlayer from "@/components/players/shakaPlayer";
import Hls from "hls.js";
import { useEffect, useRef } from "react";

import videojs from "video.js";
import VideoJS from "../../components/players/videoJs";


const videoSource = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";

const videoJsOptionsMpd = {
  controls: true,
  autoplay: false,
  width: 1280,
  sources: [
    {
      src: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
      type: "application/dash+xml",
    },
  ],
};

export default function AllExample() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (Hls.isSupported()) {
      const hls = new Hls({
        debug: true,
      });
      hls.loadSource(videoSource);
      hls.attachMedia(videoRef.current!);
    }
  }, []);


  const handlePlayerReady = (player: any) => {
    playerRef.current = player;

    console.log(player.qualityLevels());

    // 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 className="space-y-4">
      <div>
        <h1>- hls.js</h1>
        <video
          src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
          ref={videoRef}
          controls
          autoPlay
        />
      </div>
      <div>  
        <h1>- video.js</h1>
        <VideoJS options={videoJsOptionsMpd} onReady={handlePlayerReady} />
      </div>
      <div>  
        <h1>- shaka player</h1>
        <ShakaPlayer />
      </div>
    </div>
  );
}