캔버스 페이드 아웃 질문입니다

8
제가 티비플 구름 복구해서 시뮬레이터를 만들려고합니다
이게 원래 있었던 소스고 그냥 지워지기만해서 티비플구름 처럼 페이드 아웃을 적용시킬려고합니다 (fadetozero()는 그냥 이름입니다)
fadeout을 추가하려면 어떻게 해야할지 알수 있을까요? (노랑색으로 칠했습니다)
자막은 json파일입니다

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Tvple</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #videoCanvas{
           opacity:1;
            background:#00ff0000;
            position: absolute;
            left: 50%;
            top: 10%;
transform: translateX(-50%);
        }
        #videoPlayer{
            position: absolute;
            left: 50%;
            top: 10%;
transform: translateX(-50%);
        }
        body {
            margin: 0;
            padding: 0;
        }
@font-face{
font-family:"NanumBarunGothicBold";
src:url('NanumBarunGothicBold.ttf');
}
    </style>
</head>
<body>
    <video id="videoPlayer" width="1280" height="720">
        <source id="videoPlayerSource" src="MOVIE.mp4" type="video/mp4">
    </video>
    <canvas id="videoCanvas" width="1280" height="720">
    </canvas>
<br />
<br />
<br />
<button id="playBtn">Play</button>
<button id="fullBtn">FullScreen</button>
<br />
<br />
<br />
</body>
    <script>
        jsonCaptionData = {}
        $().ready(function () {
            // SetVideoSource("MOVIE.mp4")
            InitVideoEvent()
            // DrawText()
        })

        $.getJSON("JAMAK.json", function(json) {
            jsonCaptionData = json
        });
        function DrawText(text, position) {
            var ctx = document.getElementById('videoCanvas').getContext('2d');
            ctx.font = "20px NanumBarunGothicBold";
ctx.shadowColor = "#000000";
ctx.shadowBlur = 3;
            ctx.fillStyle = '#ECECEB'
            // console.log("pos: " + position + " text: " + text)
            ctx.fillText(text, position[0], position[1]);
        }
        
        function InitVideoEvent() {
            $("#videoPlayer").on("timeupdate", function (event) {
                VideoTimeUpdate(this.currentTime, this.duration)
            })
        }

        function ConvertPosition(x, y) {
            return [x * 1280, y * 720]
        }

        function VideoTimeUpdate(currentTime, duration) {
            // console.log("curr: " + currentTime + " dur: " + duration)
            currentVideoPlayTime = Math.floor(currentTime)

            FadeToZero()

            currentTimeCaption = jsonCaptionData["" + currentVideoPlayTime]
            for(indexOfCaption in currentTimeCaption) {
                position = ConvertPosition(currentTimeCaption[indexOfCaption]["x"], currentTimeCaption[indexOfCaption]["y"])
                text = currentTimeCaption[indexOfCaption]["text"]
                DrawText(text, position)
            }

            currentTimeCaption = jsonCaptionData["" + (currentVideoPlayTime + 1)]
            for(indexOfCaption in currentTimeCaption) {
                position = ConvertPosition(currentTimeCaption[indexOfCaption]["x"], currentTimeCaption[indexOfCaption]["y"])
                text = currentTimeCaption[indexOfCaption]["text"]
                DrawText(text, position)
            }
        }
        function FadeToZero() {
            var ctx = document.getElementById('videoCanvas').getContext('2d');
            ctx.clearRect(0, 0, 1280, 720)
}
$(document).ready(function() {
    $("#playBtn").on("click", function() {
        $("#videoPlayer").trigger("play");
    });
});
$(document).ready(function() {
    $("#fullBtn").on("click", function() {
        var elem = document.getElementById("videoPlayer");
        if(elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if(elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    });
});
$(document).ready(function() {
    $("#videoPlayer").on("ended", function() {
         console.log("Video Finished");
    });
});
    </script>
</html>
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
mins
안녕
길고양이
안녕
안녕
KapDang
KapDang
안녕
안녕
흐아
지나던이