{"name":"Interactive Transcript Audio (vtt link)","key":"videojsaudiotranscript","version":"1.0.4","instructions":"This is a version of VideoJS audio template that shows just an audio player and an interactive transcript. You will need a subtitle file of the same filename but with a .vtt extension in the same directory as the video.\n","showatto":"0","showplayers":"1","requirecss":"//vjs.zencdn.net/5.8.8/video-js.css","requirejs":"//vjs.zencdn.net/5.8.8/video.js","shim":"videojs","defaults":"WIDTH=400,HEIGHT=30","amd":"1","body":"<audio id=\"@@AUTOID@@\" class=\"video-js vjs-default-skin nomediaplugin\" controls preload=\"auto\" width=\"@@WIDTH@@\" height=\"@@HEIGHT@@\" data-setup='{\n  \"controlBar\": {\"fullscreenToggle\": false}}'>\n<source src=\"@@VIDEOURL@@\" type=\"@@AUTOMIME@@\" />\n<track kind=\"captions\" src=\"@@URLSTUB@@.vtt\" srclang=\"en\" label=\"English\" default />\n</audio>\n<div id='@@AUTOID@@_transcript' class='videojs_transcript'></div>","bodyend":"","script":"var 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      transcriptContainer.appendChild(transcript.el()); \n  }).fail(function( jqxhr, settings, exception ) {\n    console.warn( \"Something went wrong\"+exception );\n});//end of get script\n\n}); //end of videojs ready","style":"/* Audio: Remove big play button (leave only the button in controls). */\n.video-js.vjs-audio .vjs-big-play-button {\n  display: none;\n}\n/* Audio: Make the controlbar visible by default */\n.video-js.vjs-audio .vjs-control-bar {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n/* Make player height minimum to the controls height so when we hide video/poster area the controls are displayed correctly. */\n.video-js.vjs-audio {\n  min-height: 3em;\n}\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: 600px;\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","dataset":"","datasetvars":"","alternate":"<audio id=\"@@AUTOID@@\"  style=\"background-color: #CCC;\" class=\"nomediaplugin\" controls preload=\"auto\" width=\"320\" height=\"30\" >\n<source src=\"@@VIDEOURL@@\" type=\"@@AUTOMIME@@\" />\n</audio>","alternateend":""}