Code - yangart/sejongOn

<html> <head> <style class="vjs-styles-defaults"> .video-js { width: 300px; height: 150px; } .vjs-fluid { padding-top: 56.25% } </style> <meta charset="UTF-8"> <title></title> <script type="text/javascript" id="www-widgetapi-script" src="https://www.youtube.com/s/player/b0557ce3/www-widgetapi.vflset/www-widgetapi.js" async=""></script> <script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-SX3DJJDB31&l=dataLayer&cx=c"></script> <script src="https://www.youtube.com/iframe_api"></script> <script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-KF796DXF"></script> <script src="https://online.itt.link/resources/lib/jquery/jquery.min.js"></script>  <script> let videoStatement = { verb: { display: { "en-US": null, }, }, object: { objectType: "Activity", id: "https://online.itt.link/viewer/index.do?cntntsId=CNTNTS_0000000038358", definitionName: { "ko-KR": "" }, definitionDescription: { "ko-KR": "" }, definitionType: "video", extensions: { keywords: [""], subjects: [], menuName: "콘텐츠은행", isRequiredLearning: true, learningSeqIds: [] } }, result: { extensions: { time: null, // 현재 시청 지점 timeFrom: null, // 영상 시청 중 스킵하는 경우, 기존 시청 지점 timeTo: null, // 영상 시청 중 스킵하는 경우, 이동한 시청 지점 progress: null, playedSegments: null, completionThreshold: 1 // 앞으로 남아있는 영상 길이를 백분율로 표현, 0~1 사이의 값이여야 함(소수점 3자리) } }, context: { extensions: { learningSeqId: null, menuName: null, isRequiredLearning: null, // 영상 extensions length: parseFloat("".replace(",", ".")), // float, 영상의 전체 길이 speed: null, // string, 영상 속도 volume: null, mute: null, fullScreen: null // boolean } } } let viewStatement = { verb: { display: { "en-US": null, }, }, object: { objectType: "Activity", id: "https://online.itt.link/viewer/index.do?cntntsId=CNTNTS_0000000038358", definitionName: { "ko-KR": "다채움 > 콘텐츠 보기" }, definitionType: "video" }, result: null, context: null } let roleObj = { USR01: ["Learner"]/*학생*/ , USR02: ["Instructor", "Instructor#Lecturer"]/*품질검증*/ , USR03: ["Instructor", "Instructor#GuestInstructor"]/*선생님*/ , USR99: ["Administrator", "Administrator#Developer"]/*관리자*/ } let config = { userInfo: { id: "tlqjach33@gne.go.kr", name: "김철수", organizationId: "gne.go.kr", organizationName: "경남교육청", schoolId: "S333333", schoolName: "경남시범초등학교", grade: "3", classNumber: "", classId: "", // 학급ID (톡톡클래스 활동의 경우 기재) roles: roleObj["USR03"], // 학생인 경우: ["Learner"] // 교사인 경우: ["Instructor", "Instructor#Lecturer"] // (검토필요) 학부모인 경우: ["Instructor", "Instructor#GuestInstructor"] // 그외: https://www.imsglobal.org/spec/caliper/v1p2#lis-roles 참고 부탁드립니다. sessionId: "A166D142CD535D32F9DD6C7E11BB5AB1.onlwas_02", sessionTime: "2024-09-27T16:54:52Z", }, serviceInfo: { edAppId: "" == "" ? "online.itt.link" : "", edAppName: "" == "" ? "톡톡CON" : "", ltiSessionId: null, messageParameters: null, }, endpoint: "https://smile-main-store.itt.link:8083/topics/store" } let objectInfo = { mediaObject: { id: "", type: "VideoObject", name: "", description: "", mediaType: "", // video/mp4, video/vnd.youtube.yt 등 https://www.iana.org/assignments/media-types/media-types.xhtml 에 나와있는 기준대로 작성 creators: [""], // 작성자 id keywords: [""], // 관련 핵심어 count: Number(""), // 현재 사용자가 동영상을 재생한 횟수 duration: Number(""), // 동영상 재생 길이 (초단위) searchKeyword: "", learningObjectives: "", subject: "", menuName: null, isRequired: null } } window.dataLayer = window.dataLayer || []; dataLayer.push({ 'user_id': 'tlqjach33@gne.go.kr' }); (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-KF796DXF'); /*window.onmessage = function (e){ if(e.origin == "https://folio.itt.link"){ config.userInfo = e.data; } // Reject all messages except ones from https://parent.example.com };*/ </script> <link href="https://online.itt.link/resources/front/site/SITE_00002/css/style.css" rel="stylesheet"> <link href="https://online.itt.link/resources/lib/mma/vjs-663.css?v=9" rel="stylesheet"> <link href="https://online.itt.link/resources/lib/mma/videojs-panorama.min.css?v=1" rel="stylesheet"> <script src="https://online.itt.link/resources/lib/mma/vjs-663.js"></script> <script src="https://online.itt.link/resources/lib/mma/Youtube.min.js?v=1"></script> <style type="text/css"> .vjs-youtube .vjs-iframe-blocker { display: none; } .vjs-youtube.vjs-user-inactive .vjs-iframe-blocker { display: block; } .vjs-youtube .vjs-poster { background-size: contain; } .vjs-youtube-mobile .vjs-big-play-button { display: none; } </style> <script src="https://online.itt.link/resources/lib/mma/videojs-contrib-hls.min.js"></script> <script src="https://online.itt.link/resources/lib/mma/three.js"></script> <script src="https://online.itt.link/resources/lib/mma/videojs-playlist.js"></script> <script src="https://online.itt.link/resources/lib/mma/ab-loop.js"></script> <script src="https://online.itt.link/resources/lib/mma/videojs-panorama.js"></script> <script src="https://online.itt.link/resources/lib/mma/spin.js"></script> <script src="https://icdn.itt.link/download/toktok/caliperSensor-1.1.1/caliperSensor-1.1.1.js" type="text/javascript" charset="utf-8"></script> <script src="https://online.itt.link/resources/common/js/integratedAPI-2.8.js" type="text/javascript" charset="utf-8"></script> <script src="https://unpkg.com/@xapi/xapi"></script> <script src="https://online.itt.link/resources/common/js/xAPIWrapper.js" type="text/javascript" charset="utf-8"></script> <script src="https://online.itt.link/resources/common/js/xAPIAnalytics-1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var iosFullScreen = false; var isPauseChk = false; var isSkipChk = false; var isMuteChk = false; var isFullExitChk = false; var tempCurrentPageId = "https://online.itt.link/viewer/index.do?cntntsId=CNTNTS_0000000038358".indexOf("://online.itt.link") != -1 ? document.referrer : ""; var tempCurrentPageNm = "https://online.itt.link/viewer/index.do?cntntsId=CNTNTS_0000000038358".indexOf("://online.itt.link") != -1 ? "" : ""; config.serviceInfo.currentWebPageId = tempCurrentPageId; config.serviceInfo.currentWebPageName = tempCurrentPageNm; var iwazLog = new integratedAPI(config); let xAPI = new xAPIAnalytics("online.itt.link", "USR03", "A166D142CD535D32F9DD6C7E11BB5AB1.onlwas_02", "S333333", "경남시범초등학교", "", "tlqjach33@gne.go.kr", "김철수", "SCH_02", "null"); $(document).ready(function () { if (sessionStorage.getItem("referrerId") != tempCurrentPageId) { iwazLog.newEvent("MediaProfile", "NavigationEvent", "NavigatedTo", { webPageId: tempCurrentPageId, webPageName: tempCurrentPageNm, referrerId: sessionStorage.getItem("referrerId"), referrerName: sessionStorage.getItem("referrerName") }); } iwazLog.newEvent("MediaProfile", "ViewEvent", "Viewed", { webPageId: tempCurrentPageId, webPageName: tempCurrentPageNm }); sessionStorage.setItem("referrerId", tempCurrentPageId); sessionStorage.setItem("referrerName", tempCurrentPageNm); localStorage.clear(); localStorage.endAt = 'N'; //영상 컨텐츠일 경우에만 if ($("#player").length != 0) { (function (window, videojs) { var player = window.player = videojs('player', { html5: { nativeAudioTracks: false, nativeVideoTracks: false, hls: { debug: false, overrideNative: true } } , techOrder: ["youtube", "html5"] , ytcontrols: false , controls: true , autoplay: true , playbackRates: [0.5, 1, 1.5, 2, 4] }); var tempUrl = $("#tempCntntsUrl").val(); var tempType = "video/mp4"; var tempPoster = ''; var logMediaType = "video/mp4"; if (tempUrl.indexOf("youtube") != -1 || tempUrl.indexOf("youtu.be") != -1) { tempType = "video/youtube"; logMediaType = "video/vnd.youtube.yt" } else if (tempUrl.indexOf("streaming.itt.link") != -1) { tempType = "application/x-mpegURL"; logMediaType = "application/vnd.apple.mpegurl" } objectInfo.mediaObject.type = logMediaType; // tempUrl = "http://api.wecandeo.com/video/default/BOKNS9AQWrFMfpMKABe48oy4Wg4l2jdgsUipa9kN98BOY0isn27YrMRQieie"; // tempType = "video/mp4"; var videoList = [{ sources: [{ src: tempUrl, type: tempType }], poster: tempPoster }]; player.playlist(videoList); player.playlist.autoadvance(0); if (isIos()) { player.controlBar.fullscreenToggle.on("tap", function () { if (!iosFullScreen) { parent.postMessage("enterFullWindow", "*"); iosFullScreen = true; } else { parent.postMessage("exitFullWindow", "*"); iosFullScreen = false; } }); } }(window, window.videojs)); } if ($("#clogNo").length != 0) { //iwaz MediaProfile 시작 //objectInfo.mediaObject.learningObjectives = getHypermeta(""); //objectInfo > mediaObject 값 세팅하기 위한 작업 if ("0" != "0") { let templrnSeqIdArr = []; objectInfo.mediaObject.learningObjectives = templrnSeqIdArr; } //클래스를 통한 접근일경우 xapi 데이터 추가 if ("" != "") { let tmpCacsIds = []; let tmpClrnSeqId = []; if ("" != "") { } if ("" != "") { } videoStatement.context.contextActivities = { parent: [ { id: "", objectType: "Activity", definitionType: "", definitionName: { "ko-KR": "" }, extensions: { // contextActivities 관련 extensions acsCodeList: tmpCacsIds, // ★ '성취기준 코드 목록' 추가 learningSeqId: tmpClrnSeqId, // contextActivities를 설명하는 정보 menuName: "", isRequiredLearning: false, } }, ], grouping: null, category: null, other: null, } } /*profileMedia.eventNavigation.navigatedTo(); profileMedia.eventView.viewed();*/ localStorage.clogNo = $('#clogNo').val(); if ($("#player").length != 0) { iwazLog.setObjectInfo(objectInfo); viewStatement["verb"]["display"]["en-US"] = "accessed"; viewStatement["context"] = { contextActivities: { other: [ { id: "", definitionName: { "ko-KR": "다채움 > 콘텐츠은행" }, objectType: "Activity" } ] } } xAPI.videoEvent(viewStatement); videojs("player").ready(function () { let myPlayer = this; let duration_time = 0; let tempTime = 0; let stratChk = true; this.on('error', function () { console.log("로그에러"); let tempUrl = $("#tempCntntsUrl").val(); if ($("#clogNo").length != 0 && (tempUrl.indexOf("youtube") != -1 || tempUrl.indexOf("youtu.be") != -1)) { updateErrorLinkCntnts(); } }) this.on('timeupdate', function () { duration_time = Math.floor(this.duration()); let current_time = Math.floor(this.currentTime()); localStorage.endTm = current_time; if (current_time > 0 && (current_time == duration_time)) { localStorage.endAt = 'Y'; } }); this.on('play', function () { if (stratChk) { iwazLog.newEvent("MediaProfile", "MediaEvent", "Started", { currTime: 0 // 현재 재생위치 }); videoStatement.verb.display["en-US"] = "initialized"; stratChk = false; } else if (isPauseChk && !isSkipChk) { iwazLog.newEvent("MediaProfile", "MediaEvent", "Resumed", { currTime: localStorage.endTm // 현재 재생위치 }); videoStatement.verb.display["en-US"] = "played"; videoStatement.result.extensions.time = localStorage.endTm; isSkipChk = false; } xAPI.videoEvent(videoStatement); }); this.on("pause", function () { isPauseChk = true; if (!isSkipChk) { cntntsLogUpdate('pause'); iwazLog.newEvent("MediaProfile", "MediaEvent", "Paused", { currTime: localStorage.endTm // 현재 재생위치 }); videoStatement.verb.display["en-US"] = "paused"; videoStatement["result"] = { extensions: { time: localStorage.endTm, completionThreshold: (Math.floor(this.currentTime()) / Math.floor(this.duration())).toFixed(3), progress: ((Math.floor(this.currentTime()) / Math.floor(this.duration())) * 100).toFixed(), playedSegments: "0.000[.]5.000", // string } }; xAPI.videoEvent(videoStatement); } }) //영상종료 this.on('ended', function () { localStorage.endAt = 'Y'; cntntsLogUpdate(); iwazLog.newEvent("MediaProfile", "MediaEvent", "Ended", { currTime: localStorage.endTm // 현재 재생위치 }); videoStatement.verb.display["en-US"] = "completed"; videoStatement["result"] = { extensions: { time: this.duration().toFixed(3), completionThreshold: 1, progress: 100, playedSegments: "0.000[.]5.000[,]5.000[.]100.000", } }; xAPI.videoEvent(videoStatement); }) //배속 변경시 this.on('ratechange', function (e) { if (localStorage.endAt == "N") { iwazLog.newEvent("MediaProfile", "MediaEvent", "ChangedSpeed", { currTime: localStorage.endTm, speed: this.tech_.playbackRate() }); videoStatement["context"] = { extensions: { speed: this.tech_.playbackRate() } }; videoStatement.verb.display["en-US"] = "changedSpeed"; videoStatement["result"]["extensions"]["time"] = localStorage.endTm; xAPI.videoEvent(videoStatement); if (this.tech_.playbackRate() > 1) { cntntsLogUpdate("fastRate"); } else if (this.tech_.playbackRate() < 1) { cntntsLogUpdate("slowRate"); } } }); //스킵한 경우 this.controlBar.progressControl.seekBar.on('mousedown', function () { tempTime = localStorage.endTm; isSkipChk = true; }); this.controlBar.progressControl.seekBar.on('mouseup', function () { videoStatement.verb.display["en-US"] = "seeked"; videoStatement["result"] = { extensions: { timeTo: localStorage.endTm, timeFrom: tempTime }, }; xAPI.videoEvent(videoStatement); tempTime = Number(tempTime) + 5; if (tempTime < Math.floor(myPlayer.currentTime())) { cntntsLogUpdate("skip"); iwazLog.newEvent("MediaProfile", "MediaEvent", "JumpedTo", { currTime: localStorage.endTm, // 현재 재생위치 jumpedToTime: tempTime //이동된 재생위치 }); } }); //음소거시 this.controlBar.volumePanel.volumeControl.on("mouseup", function () { videoStatement.verb.display["en-US"] = "changedVolume"; iwazLog.newEvent("MediaProfile", "MediaEvent", "ChangedVolume", { currTime: localStorage.endTm, // 현재 재생위치 volume: this.player().volume() // 새로 설정된 음량 값 }); if (this.player().muted() || this.player().volume() == 0) { if (localStorage.endAt == "N") { cntntsLogUpdate("mute"); iwazLog.newEvent("MediaProfile", "MediaEvent", "Muted", { currTime: localStorage.endTm // 현재 재생위치 }); videoStatement.verb.display["en-US"] = "muted"; videoStatement["context"]["extensions"]["volume"] = 0; videoStatement["context"]["extensions"]["mute"] = true; isMuteChk = true; } } else if (isMuteChk) { iwazLog.newEvent("MediaProfile", "MediaEvent", "Unmuted", { currTime: localStorage.endTm // 현재 재생위치 }); videoStatement.verb.display["en-US"] = "unmuted"; videoStatement["context"]["extensions"]["volume"] = this.player().volume().toFixed(2) * 100; videoStatement["context"]["extensions"]["mute"] = false; isMuteChk = false; } videoStatement.result.extensions.time = localStorage.endTm; xAPI.videoEvent(videoStatement); }); //음소거 버튼 this.controlBar.volumePanel.muteToggle.on("click", function () { videoStatement.verb.display["en-US"] = "changedVolume"; if (this.player().muted()) { videoStatement.verb.display["en-US"] = "muted"; videoStatement["context"]["extensions"]["volume"] = 0; videoStatement["context"]["extensions"]["mute"] = true; } else { videoStatement.verb.display["en-US"] = "unmuted"; videoStatement["context"]["extensions"]["volume"] = this.player().volume().toFixed(2) * 100; videoStatement["context"]["extensions"]["mute"] = false; } if (localStorage.endAt == "N") { videoStatement.result.extensions.time = localStorage.endTm; xAPI.videoEvent(videoStatement); } }) //전체화면 this.controlBar.fullscreenToggle.on("click", function () { if (myPlayer.isFullscreen_) { iwazLog.newEvent("MediaProfile", "MediaEvent", "EnteredFullScreen", { currTime: localStorage.endTm // 현재 재생위치 }); videoStatement["context"] = { extensions: { fullScreen: true, length: 100.000 }, }; videoStatement["result"]["extensions"]["time"] = localStorage.endTm; videoStatement.verb.display["en-US"] = "enteredFullScreen"; xAPI.videoEvent(videoStatement); isFullExitChk = false; } }); //전체화면 해제 this.on("fullscreenchange", function () { if (!this.isFullscreen_ && !isFullExitChk) { iwazLog.newEvent("MediaProfile", "MediaEvent", "ExitedFullScreen", { currTime: localStorage.endTm // 현재 재생위치 }); videoStatement["context"]["extensions"]["fullScreen"] = false; videoStatement["result"]["extensions"]["time"] = localStorage.endTm; videoStatement.verb.display["en-US"] = "exitedFullScreen"; xAPI.videoEvent(videoStatement); isFullExitChk = true; } }) }); } } //변환율 가져오기 if ("" != "" && Number("") < 98) { var intervalCnt = 0; var tempVal = 0; var dupCnt = 0; let tempInterval = setInterval(function () { intervalCnt++; $.ajax({ type: "post" , url: '/ebs/prg/cntnts/chkMvpCnvrPt.json' , data: { "frstRegisterId": '', "cntntsId": '' } , dataType: "json" , success: function (data) { $("span#perVal").text(data.data.ptVal); if (tempVal === data.data.ptVal) { dupCnt++; if (dupCnt > 60) { clearInterval(tempInterval); alert("현재 변환에 문제가 발생하였습니다. \r추후 이용해 주시기 바랍니다."); window.parent.location.href = "/index.do"; } } else { tempVal = data.data.ptVal; dupCnt = 0; if (Number(data.data.ptVal) > 98) { clearInterval(tempInterval); location.reload(); } } } }) }, 1000); } }); /* 추후 탭이동이나 최소화시 사용 document.addEventListener('visibilitychange', () => { console.log('Current State: ', document.visibilityState) if(document.visibilityState == "hidden"){ videojs("player").pause(); console.log(Math.floor(videojs("player").currentTime())); } }) */ //현재 페이지 벗어날 경우(브라우저 닫기, 새로고침 등) $(window).bind("beforeunload", function (e) { if ($("#clogNo").length != 0 && localStorage.endAt == "N") { cntntsLogUpdate(); } return; }); //영상 로그 업데이트 function cntntsLogUpdate(logtype) { var tempData = {}; tempData.clogNo = $("#clogNo").val(); tempData.cntntsId = ''; tempData.mvpLogType = logtype; tempData.mvpEndAt = localStorage.getItem('endAt'); tempData.mvpEndTm = localStorage.getItem('endTm'); $.ajax({ type: "post" , url: '/embed/ebs/prg/cntnts/cntntsLogUpdate.json' , data: tempData , dataType: "json" , success: function (data) { if (tempData.endAt == "Y") { localStorage.clear(); } } }) } //오류인 유튜브 영상 상태 업데이트 function updateErrorLinkCntnts() { var tempData = {}; tempData.frstRegisterId = ''; tempData.cntntsId = ''; $.ajax({ type: "post" , url: '/ebs/prg/cntnts/updateErrorLinkCntnts.json ' , data: tempData , dataType: "json" , success: function (data) { location.reload(); } }) } function getSessionId() { var c_name = 'JSESSIONID'; if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + "=") if (c_start != -1) { c_start = c_start + c_name.length + 1 c_end = document.cookie.indexOf(";", c_start) if (c_end == -1) c_end = document.cookie.length return unescape(document.cookie.substring(c_start, c_end)); } } else { var JSESSIONID = $("#mySession").val(); return JSESSIONID; } } function getHypermeta(cntntsId) { var hypermetaDomain = "https://hypermeta.itt.link"; if (location.href.indexOf("dev") > -1) { hypermetaDomain = "http://dev-hypermeta.itt.link"; } $.ajax({ url: hypermetaDomain + "/api/acs/contents/acsEaslist" , async: false , dataType: "JSON" , data: { searchContentsKey: cntntsId } , success: function (data) { // 성공 var dataList = data.data.result; metaData = dataList; } , error: function () { //실패 console.log("오류가 발생했습니다."); } }); } function isIos() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); } </script> </head> <body> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: #fff; } #contents2 { width: 100%; height: 100%; margin: 0px auto 0; font-size: 0px; } #contents2 p { font-size: 14px; } iframe { width: 100%; height: 100%; border: none; outline: none; padding: 0; margin: 0; } .view-msg-area { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100%; background-color: rgba(0, 154, 235, 0.05) } .view-img-area { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; min-height: 100%; } .view-img-area img { display: block; max-width: 100%; } </style> <div id="contents2"> <input type="hidden" id="mySession"> <iframe src="https://rl6dik7eh.toastcdn.net/itt/online/AttachFiles/contents/20240626/20240626112505062_kor.hwp" data-gtm-yt-inspected-5="true"> </div> </body> </html> </iframe></div> <script type="text/javascript" id="" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> </body> </html>