<!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>
