P3_Sample

by bfelda

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/6.2.8/video-js.css">
<script src="https://vjs.zencdn.net/5.0.0/video.js"></script>
<script src="https://p3.3playmedia.com/p3sdk.current.js"></script>
<video id="qv_vid1" 
       class="video-js vjs-skin-qv center-block" 
       type="video/mp4" 
       src="http://qv.dev.s3.amazonaws.com/video/4ae470f2-ffd3-41f0-b621-257216185ff1.mp4">
<</video>
<div id="selected-text" class="selected_text_container">
  
</div>

 <div class="p3sdk-container" player_id="qv_vid1" player_type="videojs">
    <div class="p3sdk-interactive-transcript" 
         clip_min_length=1
         clip_urls="true"  
         light_scroll = "true" 
         src_type="tpm" 
         remote-src="https://s3-us-west-2.amazonaws.com/qv.dev/transcripts/ace0c940-bfc3-4761-88fa-79b1ee337fdf.tpm">
         <div class="p3sdk-interactive-transcript-content"></div>
     </div> 
 </div><!-- p3sdk-container -->

CSS

.selected_text_container {
  color: blue;
  min-height: 50px;
  background: lightgray;
  border-bottom: gray solid 1px;
  padding: 7px;
}

JavaScript

p3$(p3sdk.get(0)).bind("transcript:selection", function(name, atts) {
      console.log("transcipt selected______________________________________________");
      start_time_ms = atts.in_time;
      end_time_ms = atts.out_time;
      clipping_text = atts.text;
      console.log(start_time_ms, end_time_ms, clipping_text);
			document.getElementById("selected-text").innerHTML = clipping_text;
    });
    videojs("qv_vid1");