kjyoffice.github.io/VimeoAPI2.html at master · kjyoffice/kjyoffice.github.io · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VimeoAPI 2</title>
</head>
<body>
    <h1>VimeoAPI 2</h1>

    <div id="myVideo" data-vimeo-id="76979871" data-vimeo-autoplay="false" data-vimeo-loop="false" data-vimeo-width="800"></div>

    <textarea id="serversendseconds" style="width:500px; height:300px;" readonly="readonly"></textarea>

    <script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script>
    <script type="text/javascript">
        const videoPlayer = new Vimeo.Player('myVideo');

        videoPlayer.on('loaded', function(data) {
            VideoStatusX('loaded', data);
        });

        videoPlayer.on('play', function(data) {
            VideoStatusX('play', data);
        });

        videoPlayer.on('pause', function(data) {
            VideoStatusX('pause', data);
        });

        videoPlayer.on('timeupdate', function(data) {
            VideoStatusX('timeupdate', data);
        });

        videoPlayer.on('seeked', function(data) {
            VideoStatusX('seeked', data);
        });

        videoPlayer.on('ended', function(data) {
            VideoStatusX('ended', data);
        });

        videoPlayer.on('volumechange', function(data) {
            VideoStatusX('volumechange', data);
        });

        const VideoStatusX = function(eventName, dataX) {
            const eventNameUP = eventName.toUpperCase();
            const serverSec = document.getElementById('serversendseconds');

            if(eventNameUP == 'LOADED') {
                //console.log('[' + eventNameUP + '] ###', dataX.id);
                serverSec.value = '';
            } else if(eventNameUP == 'VOLUMECHANGE') {
                //console.log('[' + eventNameUP + '] ###', (Math.floor((dataX.volume * 100)) + ' %'), '###', dataX.muted);
            } else {
                console.log('[' + eventNameUP + '] ###', (Math.floor((dataX.percent * 100)) + ' %'), '###', (Math.floor(dataX.seconds) + ' / ' + Math.floor(dataX.duration)));
                serverSec.value += (eventNameUP + '|' + Math.floor(dataX.seconds) + ',');
            }
        };

        // <<< 아래에서 나오는 "초"는 내림하며 소수점 날린 초임 >>>
        // 이렇게 해서 매 이벤트마다 시간정보 기록하고
        // 약 5초마다 서버로 던지고, 서버는 고대로 저장함
        //
        // 이렇게 될거고
        // 서버에서! 리스트를 만들어서 이전 초보다 지금의 초 차이가 1초인지 체크
        // 뭐 이전 초에서 +1 했을때 지금 초랑 같은지 보는거지 뭐
        // 같지 않다면 그 비어있는 시간의 초를 만드는데 꼬리표를 "시청하지 않음" 형식으로 만듦
        // 암튼 그래서 전체 초의 리스트를 만듦
        // 이제 이 전체 초의 리스트에서 "시청하지 않음" 리스트를 빼고 나머지 초를 전체 초와 비교해서 % 계산함!

        // https://developer.chrome.com/docs/web-platform/page-lifecycle-api?hl=ko#developer-recommendations-for-each-state


        // 프롬 GPT
        // 페이지 이동 전 혹은 새로고침 전 서버 전송을 위해서는 이벤트
        const sendRemainingData = function() {
            const data = {
                rawData: document.getElementById('serversendseconds').value
            };

            const blob = new Blob(
                [JSON.stringify(data)],
                { type: "application/json" }
            );

            // POST임
            // 최대 데이터 약 64KB?
            // https://developer.mozilla.org/ko/docs/Web/API/Navigator/sendBeacon
            navigator.sendBeacon("/api/video/leave", blob);
        };

        document.addEventListener("visibilitychange", () => {
            //console.log(document.visibilityState);
            // 탭에 포커스를 잃을때 / 페이지 이동일 때 / 새로고침
            if (document.visibilityState == "hidden") {
                sendRemainingData();
            }
        });

        window.addEventListener("beforeunload", () => {
            sendRemainingData();
        });

    </script>


</body>
</html>