Code - yangart/sejongOn

<html> <head> <style class="vjs-styles-defaults"> .video-js { width: 300px; height: 150px; } .vjs-fluid { padding-top: 56.25% } </style> <style class="vjs-styles-dimensions"> .player-dimensions { width: 1280px; height: 720px; } .player-dimensions.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_0000000043508", definitionName: { "ko-KR": "고교학점제(3차년도)_환경 2-3" }, definitionDescription: { "ko-KR": "고교학점제(3차년도)_환경 2-3" }, 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("668".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_0000000043508", 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: "CNTNTS_0000000039565", type: "VideoObject", name: "고교학점제(3차년도)_환경 2-3", description: "", mediaType: "", // video/mp4, video/vnd.youtube.yt 등 https://www.iana.org/assignments/media-types/media-types.xhtml 에 나와있는 기준대로 작성 creators: ["taoneo@gne.go.kr"], // 작성자 id keywords: [""], // 관련 핵심어 count: Number("4"), // 현재 사용자가 동영상을 재생한 횟수 duration: Number("668"), // 동영상 재생 길이 (초단위) 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_0000000043508".indexOf("://online.itt.link") != -1 ? document.referrer : ""; var tempCurrentPageNm = "https://online.itt.link/viewer/index.do?cntntsId=CNTNTS_0000000043508".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 = 'https://icdn.itt.link/online/AttachFiles/contents/CNTNTS_IMG/20240708/CNTNTS_IMG202407081725111820'; 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("CNTNTS_0000000039565"); //objectInfo > mediaObject 값 세팅하기 위한 작업 if ("1" != "0") { let templrnSeqIdArr = []; templrnSeqIdArr.push("E2015_H13_세계지리_MR_PCW_LSEQ_064"); 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 ("https://icdn.itt.link/online/AttachFiles/contents/CNTNTS_MVP/20240708/CNTNTS_MVP202407081725113060" != "" && Number("100") < 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": 'USRCNFRM_00000269334', "cntntsId": 'CNTNTS_0000000039565' } , 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 = 'CNTNTS_0000000039565'; 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 = 'USRCNFRM_00000269334'; tempData.cntntsId = 'CNTNTS_0000000039565'; $.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"> <input type="hidden" id="clogNo" value="403279"> <input type="hidden" id="tempCntntsUrl" value="https://icdn.itt.link/online/20240708/CNTNTS_0000000039565.mp4"> <div crossorigin="anonymous" class="video-js vjs-default-skin vjs-controls-enabled vjs-workinghover vjs-v6 vjs-playing vjs-has-started player-dimensions vjs-user-inactive" style="width:100%;height:100%;" id="player" lang="ko-kr" role="region" aria-label="Video Player"><video id="player_Html5_api" class="vjs-tech" autoplay="" src="https://icdn.itt.link/online/20240708/CNTNTS_0000000039565.mp4" poster="https://icdn.itt.link/online/AttachFiles/contents/CNTNTS_IMG/20240708/CNTNTS_IMG202407081725111820"></video> <div class="vjs-poster" tabindex="-1" aria-disabled="false" style="background-image: url("https://icdn.itt.link/online/AttachFiles/contents/CNTNTS_IMG/20240708/CNTNTS_IMG202407081725111820");"> </div> <div class="vjs-text-track-display" aria-live="off" aria-atomic="true"></div> <div class="vjs-loading-spinner" dir="ltr"></div><button class="vjs-big-play-button" type="button" aria-live="polite" title="Play Video" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Play Video</span></button> <div class="vjs-control-bar" dir="ltr" role="group"><button class="vjs-play-control vjs-control vjs-button vjs-playing" type="button" aria-live="polite" title="Pause" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Pause</span></button> <div class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal"><button class="vjs-mute-control vjs-control vjs-button vjs-vol-3" type="button" aria-live="polite" title="Mute" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Mute</span></button> <div class="vjs-volume-control vjs-control vjs-volume-horizontal"> <div tabindex="0" class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Volume Level" aria-live="polite" aria-valuetext="100%"> <div class="vjs-volume-level"><span class="vjs-control-text"></span></div> </div> </div> </div> <div class="vjs-current-time vjs-time-control vjs-control"> <div class="vjs-current-time-display" aria-live="off">0:11</div> </div> <div class="vjs-time-control vjs-time-divider"> <div><span>/</span></div> </div> <div class="vjs-duration vjs-time-control vjs-control"> <div class="vjs-duration-display" aria-live="off">11:07</div> </div> <div class="vjs-progress-control vjs-control"> <div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="1.80" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="00:11 of 11:07"> <div class="vjs-load-progress" style="width: 7.17618%;"><span class="vjs-control-text"><span>Loaded</span>: 0%</span> <div style="left: 0%; width: 100%;"></div> </div> <div class="vjs-mouse-display" style="left: 118.963px;"> <div class="vjs-time-tooltip" style="right: -18.7656px;">00:58</div> </div> <div class="vjs-play-progress vjs-slider-bar" style="width: 1.8%;"> <div class="vjs-time-tooltip" style="right: -18.3984px;">00:11</div><span class="vjs-control-text"><span>Progress</span>: 0%</span> </div> </div> </div> <div class="vjs-live-control vjs-control vjs-hidden"> <div class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type</span>LIVE </div> </div> <div class="vjs-remaining-time vjs-time-control vjs-control"> <div class="vjs-remaining-time-display" aria-live="off">-10:56</div> </div> <div class="vjs-custom-control-spacer vjs-spacer "> </div> <div class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"><button class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Playback Rate" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Playback Rate</span></button> <div class="vjs-menu"> <ul class="vjs-menu-content" role="menu"> <li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="false"><span class="vjs-menu-item-text">4x</span><span class="vjs-control-text"></span></li> <li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="false"><span class="vjs-menu-item-text">2x</span><span class="vjs-control-text"></span></li> <li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="false"><span class="vjs-menu-item-text">1.5x</span><span class="vjs-control-text"></span></li> <li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">1x</span><span class="vjs-control-text">, selected</span> </li> <li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="false"><span class="vjs-menu-item-text">0.5x</span><span class="vjs-control-text"></span></li> </ul> </div> <div class="vjs-playback-rate-value">1x</div> </div> <div class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"> <button class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Chapters" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Chapters</span></button> <div class="vjs-menu"> <ul class="vjs-menu-content" role="menu"> <li class="vjs-menu-title" tabindex="-1">Chapters</li> </ul> </div> </div> <div class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"> <button class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Descriptions" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Descriptions</span></button> <div class="vjs-menu"> <ul class="vjs-menu-content" role="menu"> <li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">descriptions off</span><span class="vjs-control-text">, selected</span></li> </ul> </div> </div> <div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"> <button class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Subtitles" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Subtitles</span></button> <div class="vjs-menu"> <ul class="vjs-menu-content" role="menu"> <li class="vjs-menu-item vjs-texttrack-settings" tabindex="-1" role="menuitem" aria-live="polite" aria-disabled="false"><span class="vjs-menu-item-text">subtitles settings</span><span class="vjs-control-text">, opens subtitles settings dialog</span></li> <li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">subtitles off</span><span class="vjs-control-text">, selected</span></li> </ul> </div> </div> <div class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"> <button class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Audio Track" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Audio Track</span></button> <div class="vjs-menu"> <ul class="vjs-menu-content" role="menu"></ul> </div> </div><button class="vjs-fullscreen-control vjs-control vjs-button" type="button" aria-live="polite" title="Fullscreen" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Fullscreen</span></button> </div> <div class="vjs-error-display vjs-modal-dialog vjs-hidden " tabindex="-1" aria-describedby="player_component_479_description" aria-hidden="true" aria-label="Modal Window" role="dialog"> <p class="vjs-modal-dialog-description vjs-control-text" id="player_component_479_description">This is a modal window.</p> <div class="vjs-modal-dialog-content" role="document"></div> </div> <div class="vjs-modal-dialog vjs-hidden vjs-text-track-settings" tabindex="-1" aria-describedby="player_component_485_description" aria-hidden="true" aria-label="Caption Settings Dialog" role="dialog"> <p class="vjs-modal-dialog-description vjs-control-text" id="player_component_485_description">Beginning of dialog window. Escape will cancel and close the window.</p> <div class="vjs-modal-dialog-content" role="document"> <div class="vjs-track-settings-colors"> <fieldset class="vjs-fg-color vjs-track-setting"> <legend id="captions-text-legend-player_component_485">Text</legend><label id="captions-foreground-color-player_component_485" class="vjs-label">Color</label><select aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485"> <option id="captions-foreground-color-player_component_485-White" value="#FFF" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485 captions-foreground-color-player_component_485-White"> White</option> <option id="captions-foreground-color-player_component_485-Black" value="#000" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485 captions-foreground-color-player_component_485-Black"> Black</option> <option id="captions-foreground-color-player_component_485-Red" value="#F00" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485 captions-foreground-color-player_component_485-Red"> Red</option> <option id="captions-foreground-color-player_component_485-Green" value="#0F0" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485 captions-foreground-color-player_component_485-Green"> Green</option> <option id="captions-foreground-color-player_component_485-Blue" value="#00F" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485 captions-foreground-color-player_component_485-Blue"> Blue</option> <option id="captions-foreground-color-player_component_485-Yellow" value="#FF0" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485 captions-foreground-color-player_component_485-Yellow"> Yellow</option> <option id="captions-foreground-color-player_component_485-Magenta" value="#F0F" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485 captions-foreground-color-player_component_485-Magenta"> Magenta</option> <option id="captions-foreground-color-player_component_485-Cyan" value="#0FF" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-color-player_component_485 captions-foreground-color-player_component_485-Cyan"> Cyan</option> </select><span class="vjs-text-opacity vjs-opacity"><label id="captions-foreground-opacity-player_component_485" class="vjs-label">Transparency</label><select aria-labelledby="captions-text-legend-player_component_485 captions-foreground-opacity-player_component_485"> <option id="captions-foreground-opacity-player_component_485-Opaque" value="1" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-opacity-player_component_485 captions-foreground-opacity-player_component_485-Opaque"> Opaque</option> <option id="captions-foreground-opacity-player_component_485-Semi-Transparent" value="0.5" aria-labelledby="captions-text-legend-player_component_485 captions-foreground-opacity-player_component_485 captions-foreground-opacity-player_component_485-Semi-Transparent"> Semi-Transparent</option> </select></span> </fieldset> <fieldset class="vjs-bg-color vjs-track-setting"> <legend id="captions-background-player_component_485">Background</legend><label id="captions-background-color-player_component_485" class="vjs-label">Color</label><select aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485"> <option id="captions-background-color-player_component_485-Black" value="#000" aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485 captions-background-color-player_component_485-Black"> Black</option> <option id="captions-background-color-player_component_485-White" value="#FFF" aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485 captions-background-color-player_component_485-White"> White</option> <option id="captions-background-color-player_component_485-Red" value="#F00" aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485 captions-background-color-player_component_485-Red"> Red</option> <option id="captions-background-color-player_component_485-Green" value="#0F0" aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485 captions-background-color-player_component_485-Green"> Green</option> <option id="captions-background-color-player_component_485-Blue" value="#00F" aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485 captions-background-color-player_component_485-Blue"> Blue</option> <option id="captions-background-color-player_component_485-Yellow" value="#FF0" aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485 captions-background-color-player_component_485-Yellow"> Yellow</option> <option id="captions-background-color-player_component_485-Magenta" value="#F0F" aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485 captions-background-color-player_component_485-Magenta"> Magenta</option> <option id="captions-background-color-player_component_485-Cyan" value="#0FF" aria-labelledby="captions-background-player_component_485 captions-background-color-player_component_485 captions-background-color-player_component_485-Cyan"> Cyan</option> </select><span class="vjs-bg-opacity vjs-opacity"><label id="captions-background-opacity-player_component_485" class="vjs-label">Transparency</label><select aria-labelledby="captions-background-player_component_485 captions-background-opacity-player_component_485"> <option id="captions-background-opacity-player_component_485-Opaque" value="1" aria-labelledby="captions-background-player_component_485 captions-background-opacity-player_component_485 captions-background-opacity-player_component_485-Opaque"> Opaque</option> <option id="captions-background-opacity-player_component_485-Semi-Transparent" value="0.5" aria-labelledby="captions-background-player_component_485 captions-background-opacity-player_component_485 captions-background-opacity-player_component_485-Semi-Transparent"> Semi-Transparent</option> <option id="captions-background-opacity-player_component_485-Transparent" value="0" aria-labelledby="captions-background-player_component_485 captions-background-opacity-player_component_485 captions-background-opacity-player_component_485-Transparent"> Transparent</option> </select></span> </fieldset> <fieldset class="vjs-window-color vjs-track-setting"> <legend id="captions-window-player_component_485">Window</legend><label id="captions-window-color-player_component_485" class="vjs-label">Color</label><select aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485"> <option id="captions-window-color-player_component_485-Black" value="#000" aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485 captions-window-color-player_component_485-Black"> Black</option> <option id="captions-window-color-player_component_485-White" value="#FFF" aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485 captions-window-color-player_component_485-White"> White</option> <option id="captions-window-color-player_component_485-Red" value="#F00" aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485 captions-window-color-player_component_485-Red"> Red</option> <option id="captions-window-color-player_component_485-Green" value="#0F0" aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485 captions-window-color-player_component_485-Green"> Green</option> <option id="captions-window-color-player_component_485-Blue" value="#00F" aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485 captions-window-color-player_component_485-Blue"> Blue</option> <option id="captions-window-color-player_component_485-Yellow" value="#FF0" aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485 captions-window-color-player_component_485-Yellow"> Yellow</option> <option id="captions-window-color-player_component_485-Magenta" value="#F0F" aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485 captions-window-color-player_component_485-Magenta"> Magenta</option> <option id="captions-window-color-player_component_485-Cyan" value="#0FF" aria-labelledby="captions-window-player_component_485 captions-window-color-player_component_485 captions-window-color-player_component_485-Cyan"> Cyan</option> </select><span class="vjs-window-opacity vjs-opacity"><label id="captions-window-opacity-player_component_485" class="vjs-label">Transparency</label><select aria-labelledby="captions-window-player_component_485 captions-window-opacity-player_component_485"> <option id="captions-window-opacity-player_component_485-Transparent" value="0" aria-labelledby="captions-window-player_component_485 captions-window-opacity-player_component_485 captions-window-opacity-player_component_485-Transparent"> Transparent</option> <option id="captions-window-opacity-player_component_485-Semi-Transparent" value="0.5" aria-labelledby="captions-window-player_component_485 captions-window-opacity-player_component_485 captions-window-opacity-player_component_485-Semi-Transparent"> Semi-Transparent</option> <option id="captions-window-opacity-player_component_485-Opaque" value="1" aria-labelledby="captions-window-player_component_485 captions-window-opacity-player_component_485 captions-window-opacity-player_component_485-Opaque"> Opaque</option> </select></span> </fieldset> </div> <div class="vjs-track-settings-font">"> <fieldset class="vjs-font-percent vjs-track-setting"> <legend id="captions-font-size-player_component_485" class="">Font Size</legend><select aria-labelledby="captions-font-size-player_component_485"> <option id="captions-font-size-player_component_485-50%" value="0.50" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-50%"> 50%</option> <option id="captions-font-size-player_component_485-75%" value="0.75" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-75%"> 75%</option> <option id="captions-font-size-player_component_485-100%" value="1.00" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-100%"> 100%</option> <option id="captions-font-size-player_component_485-125%" value="1.25" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-125%"> 125%</option> <option id="captions-font-size-player_component_485-150%" value="1.50" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-150%"> 150%</option> <option id="captions-font-size-player_component_485-175%" value="1.75" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-175%"> 175%</option> <option id="captions-font-size-player_component_485-200%" value="2.00" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-200%"> 200%</option> <option id="captions-font-size-player_component_485-300%" value="3.00" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-300%"> 300%</option> <option id="captions-font-size-player_component_485-400%" value="4.00" aria-labelledby="captions-font-size-player_component_485 captions-font-size-player_component_485-400%"> 400%</option> </select> </fieldset> <fieldset class="vjs-edge-style vjs-track-setting"> <legend id="player_component_485" class="">Text Edge Style</legend><select aria-labelledby="player_component_485"> <option id="player_component_485-None" value="none" aria-labelledby="player_component_485 player_component_485-None">None</option> <option id="player_component_485-Raised" value="raised" aria-labelledby="player_component_485 player_component_485-Raised">Raised</option> <option id="player_component_485-Depressed" value="depressed" aria-labelledby="player_component_485 player_component_485-Depressed">Depressed </option> <option id="player_component_485-Uniform" value="uniform" aria-labelledby="player_component_485 player_component_485-Uniform">Uniform</option> <option id="player_component_485-Dropshadow" value="dropshadow" aria-labelledby="player_component_485 player_component_485-Dropshadow">Dropshadow </option> </select> </fieldset> <fieldset class="vjs-font-family vjs-track-setting"> <legend id="captions-font-family-player_component_485" class="">Font Family</legend><select aria-labelledby="captions-font-family-player_component_485"> <option id="captions-font-family-player_component_485-Proportional Sans-Serif" value="proportionalSansSerif" aria-labelledby="captions-font-family-player_component_485 captions-font-family-player_component_485-Proportional Sans-Serif"> Proportional Sans-Serif</option> <option id="captions-font-family-player_component_485-Monospace Sans-Serif" value="monospaceSansSerif" aria-labelledby="captions-font-family-player_component_485 captions-font-family-player_component_485-Monospace Sans-Serif"> Monospace Sans-Serif</option> <option id="captions-font-family-player_component_485-Proportional Serif" value="proportionalSerif" aria-labelledby="captions-font-family-player_component_485 captions-font-family-player_component_485-Proportional Serif"> Proportional Serif</option> <option id="captions-font-family-player_component_485-Monospace Serif" value="monospaceSerif" aria-labelledby="captions-font-family-player_component_485 captions-font-family-player_component_485-Monospace Serif"> Monospace Serif</option> <option id="captions-font-family-player_component_485-Casual" value="casual" aria-labelledby="captions-font-family-player_component_485 captions-font-family-player_component_485-Casual"> Casual</option> <option id="captions-font-family-player_component_485-Script" value="script" aria-labelledby="captions-font-family-player_component_485 captions-font-family-player_component_485-Script"> Script</option> <option id="captions-font-family-player_component_485-Small Caps" value="small-caps" aria-labelledby="captions-font-family-player_component_485 captions-font-family-player_component_485-Small Caps"> Small Caps</option> </select> </fieldset> </div> <div class="vjs-track-settings-controls"><button class="vjs-default-button" title="restore all settings to the default values">Reset<span class="vjs-control-text"> restore all settings to the default values</span></button><button class="vjs-done-button">Done</button></div> </div><button class="vjs-close-button vjs-control vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Close Modal Dialog"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">Close Modal Dialog</span></button> <p class="vjs-control-text">End of dialog window.</p> </div> </div> </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>