{"name":"Interactive Transcript Video (vtt link)","key":"videojstranscript","version":"1.0.6","instructions":"This is a version of the VideoJS player that shows an interactive transcript underneath it. You will need a subtitle file of the same name as the video, but with a .vtt file extension in the same directory as the video file. ","showatto":"0","showplayers":"1","requirecss":"//vjs.zencdn.net/5.8.8/video-js.css","requirejs":"//vjs.zencdn.net/5.8.8/video.js","shim":"","defaults":"WIDTH=640,HEIGHT=480","amd":"1","body":"<div class=\"video_js_main_container\" style=\"display: flex;flex-direction: row;\">\n\t<video id=\"@@AUTOID@@\" class=\"video-js vjs-default-skin vjs-big-play-centered nomediaplugin\" controls preload=\"auto\" width=\"@@WIDTH@@\" height=\"@@HEIGHT@@\"   data-setup='{\"example_option\":true}'><source src=\"@@VIDEOURL@@\" type=\"@@AUTOMIME@@\" />\n\t\t<track kind=\"captions\" src=\"@@URLSTUB@@.vtt\" srclang=\"en\" label=\"English\" default />\n\t</video>\n\t<div id=\"@@AUTOID@@_splitter\" class=\"splitter ui-resizable-handle ui-resizable-e\"></div>\n\t<div id='@@AUTOID@@_transcript' class='videojs_transcript'></div>\n</div>","bodyend":"","script":"//this creates a ref to thje videojs library\nvar videojs = requiredjs_videojstranscript; \n\nvar video = videojs(@@AUTOID@@ ).ready(function(){\n\n     //the transcript library needs the videojs on window\n   // its a bit hacky and prob. won't work with two on page ..\n     window.videojs = videojs;\n     var videojsobject = this;\n\n$.getScript(M.cfg.wwwroot + '/filter/poodll/3rdparty/videojstranscript/videojs-transcript.min.js').done(function(){\n\n       // Set up any options.\n      var options = {\n        showTitle: false,\n        showTrackSelector: false,\n      };\n\n      // Initialize the plugin.\n      var transcript = videojsobject.transcript(options);\n\n      // Then attach the widget to the page.\n      var transcriptContainer = document.querySelector('#' + @@AUTOID@@ + '_transcript');\n     // $('.videojs_transcript').draggable().resizable();\n    \n\n// $('#' + @@AUTOID@@ + '_transcript').draggable().resizable();\n      \n      transcriptContainer.appendChild(transcript.el()); \n  }).fail(function( jqxhr, settings, exception ) {\n    console.warn( \"Something went wrong\"+exception );\n});//end of get script\nif ($(window).width() >= 992) {\n $('#' + @@AUTOID@@).resizable({\n          handles: {'e' : $('#' + @@AUTOID@@ + '_splitter')},\n         resizeHeight: false\n      });\n}\n}); //end of videojs ready\n\n\n","style":"/*\n\tNew Css 11-23-17\n*/\n.vjs-tech{\n\tposition: relative !important;\n}\n.splitter {\n flex: 0 0 auto;\n    width: 2%;\n    background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;\n    min-height: 200px;\n    cursor: col-resize;\n    height: 480px;\n}\n.video-js{\n\twidth: 50%;\n\t/*float: left;*/\n} \n.videojs_transcript{\nflex: 1 1 auto;\n\twidth: 100%;\n\t/*float: left;*/\n\t/*margin-left: 2%;\t*/\n}\n.transcript-body{\n\theight: 100% !important;\n}\n.videojs_transcript{\n    height:480px !important;\n    scroll-behavior: smooth;\n    overflow: scroll;\n}\n@media screen and (max-width: 992px) {\n\t.video_js_main_container{\n           display: block !important;\n       }\n    .splitter{\n   display: none;\n}\n\t.video-js{\n\t\twidth: 100%;\n\t\tfloat: none;\n\t\theight: 200px;\n\t} \n\t.videojs_transcript{\n\t\twidth: 100% !important;\n\t\tfloat: none;\n\t\tmargin-left: 0%;\t\t\n\t}\n\t.videojs_transcript{\n\t\theight: 200px !important;\n\n\t}\n}\n/*\n\tEnd\n*/\n\n\n.video-container {\n  margin: 40px auto;\n  position: relative;\n  width: 900px;\n}\n.videojs_video {\n  margin: 0;\nflex: 0 0 auto;\n}\n.videojs_transcript {\n  width: 600px;\n  font-family: Arial, sans-serif;\n  overflow-x: scroll;\n  border: 1px solid #111;\n height: 265px;\n}\n.transcript-header {\n  height: 19px;\n  padding: 2px;\n  font-weight: bold;\n}\n.transcript-selector {\n  height: 25px;\n}\n.transcript-body {\n  width: 100%;\n /* overflow-y: scroll;*/\n  background-color: #e7e7e7;\n  height: 250px;\n}\n\n.transcript-line {\n  position: relative;\n  padding: 5px;\n  cursor: pointer;\n  line-height: 1.3;\n}\n\n.transcript-line:nth-child(odd) {\n  background-color: #f5f5f5;\n}\n\n\n.transcript-timestamp {\n  position: absolute;\n  display: inline-block;\n  color: #333;\n  width: 50px;\n}\n\n.transcript-text {\n  display: block;\n  margin-left: 50px;\n}\n\n.transcript-line:hover,\n.transcript-line:hover .transcript-timestamp,\n.transcript-line:hover .transcript-text {\n  background-color: #777;\n  color: #e7e7e7;\n}\n\n.transcript-line.is-active,\n.transcript-line.is-active .transcript-timestamp,\n.transcript-line.is-active .transcript-text {\n  background-color: #555;\n  color: #e7e7e7;\n}\n\n","dataset":"","datasetvars":"","alternate":"<video id=\"@@AUTOID@@\"  style=\"background-color: #CCC;\" controls preload=\"auto\" width=\"320\" height=\"240\"\n >\n<source src=\"@@VIDEOURL@@\" type=\"@@AUTOMIME@@\" />\n<track label=\"subtitles\" kind=\"subtitles\" srclang=\"en\" src=\"@@URLSTUB@@.vtt\" default>\n</video>","alternateend":""}