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: 300px; height: 168.75px; } .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_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 : "0069DF0A6AE7A4D0D0A302724D310363.onlwas_02", sessionTime : "2024-09-27T10:57: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", "0069DF0A6AE7A4D0D0A302724D310363.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"> <input type="hidden" id="tempCntntsUrl" value="https://www.youtube.com/watch?app=desktop&v=xlLF086EaIE"> <div crossorigin="anonymous" class="video-js vjs-default-skin vjs-controls-enabled vjs-workinghover vjs-v6 vjs-youtube player-dimensions vjs-playing vjs-has-started vjs-user-inactive" style="width:100%;height:100%;" id="player" lang="ko-kr" role="region" aria-label="Video Player"><div><iframe id="player_Youtube_api" style="width:100%;height:100%;top:0;left:0;position:absolute" class="vjs-tech" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="세상에서 가장 무섭다고 알려진 가곡..슈베르트 '마왕' in 서대문 형무소 │F.Schubert 'Der Erlkonig' in the Prison" width="640" height="360" src="https://www.youtube.com/embed/null?controls=0&modestbranding=1&rel=0&showinfo=0&loop=0&fs=0&hl=ko&widget_referrer=https%3A%2F%2Fonline.itt.link%2Fviewer%2Findex.do%3FcntntsId%3DCNTNTS_0000000038358&enablejsapi=1&origin=https%3A%2F%2Fonline.itt.link&widgetid=1" data-gtm-yt-inspected-5="true"></iframe><div class="vjs-iframe-blocker" style="position:absolute;top:0;left:0;width:100%;height:100%"></div></div><div class="vjs-poster" tabindex="-1" aria-disabled="false" style="background-image: url("https://img.youtube.com/vi/xlLF086EaIE/0.jpg");"></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" style="width: 100%;"><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:12</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">2:43</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="7.49" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="0:12 of 2:43"><div class="vjs-load-progress" style="width: 30.6302%;"><span class="vjs-control-text"><span>Loaded</span>: 0%</span><div style="left: 0%; width: 100%;"></div></div><div class="vjs-mouse-display"><div class="vjs-time-tooltip"></div></div><div class="vjs-play-progress vjs-slider-bar" style="width: 7.49%;"><div class="vjs-time-tooltip" style="right: -16.3359px;">0:12</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">-2:31</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>