aniflake-backend/player.html at master · flake-anime/aniflake-backend · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HLS Demo</title>
    <link rel="stylesheet" href="https://cdn.plyr.io/1.8.2/plyr.css">
    <style>
        body {
            max-width: 1024px;
        }
    </style>
  </head>
  <body>
    <video preload="none" id="player" autoplay controls crossorigin></video>
    <script src="https://cdn.plyr.io/1.8.2/plyr.js"></script>
    <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        (async function () {
            const url = new URL(window.location);
            const anime_id = url.searchParams.get('anime_id');
            const eps_number = url.searchParams.get('eps_number') || 1;

            const video = document.querySelector('#player');
            const sources = await $.get(`/get_streaming_sources?anime_id=${anime_id}&eps_number=${eps_number}`);

            const m3u8_qualities = []
            const mp4_qualities = []

            for (const source of sources) {
                if (source.type === 'application/x-mpegURL') {
                    m3u8_qualities.push(source);
                } else if (source.type === 'video/mp4') {
                    mp4_qualities.push(source);
                }
            }

            if (m3u8_qualities.length >= mp4_qualities.length) {
                if (Hls.isSupported()) {
                    const hls = new Hls();

                    const m3u8_uri_one = m3u8_qualities[0].url;
                    const m3u8_uri_two = m3u8_qualities[1].url;

                    hls.loadSource(m3u8_uri_one);
                    hls.loadSource(m3u8_uri_two);
                    hls.attachMedia(video);

                    hls.on(Hls.Events.MANIFEST_PARSED,function() {
                        video.play();
                    });
                }

                plyr.setup(video);
            }
        })();
    </script>
  </body>
</html>