Skip to content

Event Extraction: Youtube

Jump to bottom
Robert Iepsma edited this page Nov 7, 2015 · 4 revisions

In this template the goal is to identify everything that is happening in a video.

Annotation setting:

The workers are given a video or a video segment. They are asked to annotate anything they see happening in the video (with a maximum of 30 different annotations).

Result vector:

Each annotated label is stored together with the current video timestamp.

Possible adaptations of this template

Since this template makes use of open textfield annotations, it can be used to extract different types of data such as: Objects, Humans, Scenes etc.

Screenshot

Code

<div class="row-fluid">
  <div class="span6">
    <cml:text id='videoplayed' class='videoplayed' name='videoplayed' validates="required" />
    <div id="videoDiv" style="width:550px;height:400px">
      <div id="initialPlay">
        <div id="initialText">Press play to watch the video and enter keywords that describe what's happening in the video.</div> 
        <div id="playNextInitial">
          <div class="play_border playNext">
            <div class="play_button"></div>
          </div>   
        </div>    
      </div>
      <div id="followupPlay" class="hidden">
        <div id="followupText1">If you missed to describe some scenes, replay the video and add more keywords.</div>
        <div id="followupText2">Replay video.</div> 
        <div id="playPrevFollowup">
          <div class="play_border playPrev">
            <div class="play_reverse_button "></div>
          </div>  
        </div>         
      </div>
      <iframe id="videoFrame" class="videoplayer hidden" name="video" width="550px" height="400px" src=""></iframe> 
    </div>
    <div class="videoCounter"></div>
    
    <cml:hidden name="times" value="" />
    <cml:hidden name="confirmed" value="" />
  </div> 
  
  <div class="span6" id="conf">
    <p style="height:40px;"><b></b></p>
    <table id="results"> 
    <tbody>    
<tr id="event0" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel0' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove0' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event1" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel1' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove1' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event2" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel2' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove2' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event3" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel3' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove3' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event4" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel4' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove4' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event5" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel5' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove5' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event6" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel6' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove6' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event7" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel7' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove7' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event8" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel8' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove8' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event9" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel9' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove9' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event10" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel10' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove10' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event11" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel11' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove11' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event12" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel12' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove12' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event13" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel13' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove13' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event14" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel14' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove14' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event15" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel15' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove15' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event16" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel16' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove16' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event17" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel17' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove17' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event18" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel18' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove18' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event19" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel19' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove19' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event20" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel20' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove20' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove These Keywords</span></td></tr>
<tr id="event21" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel21' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove21' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>
<tr id="event22" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel22' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove22' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>
<tr id="event23" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel23' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove23' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>
<tr id="event24" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel24' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove24' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>
<tr id="event25" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel25' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove25' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>
<tr id="event26" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel26' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove26' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>
<tr id="event27" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel27' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove27' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>
<tr id="event28" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel28' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove28' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>
<tr id="event29" class='eventRow hidden'><td width="35%"><cml:text name='eventlabel29' class="eventlabel eventtext" validates="required" placeholder="EVE" /></td><td width="25%"><span id='remove29' class='btn btn-danger btn-small remove'><i class='icon-trash icon-white'></i> Remove Keywords</span></td></tr>


 
 
  
    
    </tbody>    
    </table>
  <span id='add0' class='btn btn-small add'><i class='icon-plus icon-white plusIcon'></i> Add keywords</span>
<!--  <cml:text label="Number or confirmed events" name="confirmedevents" class="confirmedevents" validates="required" instructions="Please make sure you confirm/delete the typed in annotations before submitting the result."/>
  <cml:hidden name="confirmations" value=""/> -->
    <div id='noevents_div' class='noevents hidden'>
      <span id = 'noevent_text'>You didn't see anything happening in the video? Play again it again in case you missed something. Otherwise tell us what's the reason that nothing is happening in this video:</span>
      
      <cml:checkbox name='noevents_checkbox' class='noevents_checkbox' label="There is nothing happening in this video" validates="required"/>
      <cml:text id='noevents_textfield' class='noevents_textfield hidden' name='noevents' label='' validates="required" />
    </div>
  <br />
    <cml:text id='yesevents' class='yesevents hidden' name='eventcount' label='Count the total number of annotations you saw in this video.' validates="required integerRange:{min:1,max:30}" instructions="Only an integer between 1 and 30."/>
    
  </div> 
</div>

  <cml:hidden name='ev0a' id='ev0a' />
  <cml:hidden name='ev1a' id='ev1a' />
  <cml:hidden name='ev2a' id='ev2a' />
  <cml:hidden name='ev3a' id='ev3a' />
  <cml:hidden name='ev4a' id='ev4a' />
  <cml:hidden name='ev5a' id='ev5a' />
  <cml:hidden name='ev6a' id='ev6a' />
  <cml:hidden name='ev7a' id='ev7a' />
  <cml:hidden name='ev8a' id='ev8a' />
  <cml:hidden name='ev9a' id='ev9a' />
  <cml:hidden name='ev10a' id='ev10a' />
  <cml:hidden name='ev11a' id='ev11a' />
  <cml:hidden name='ev12a' id='ev12a' />
  <cml:hidden name='ev13a' id='ev13a' />
  <cml:hidden name='ev14a' id='ev14a' />
  <cml:hidden name='ev15a' id='ev15a' />
  <cml:hidden name='ev16a' id='ev16a' />
  <cml:hidden name='ev17a' id='ev17a' />
  <cml:hidden name='ev18a' id='ev18a' />
  <cml:hidden name='ev19a' id='ev19a' />
  <cml:hidden name='ev20a' id='ev20a' />
  <cml:hidden name='ev21a' id='ev21a' />
  <cml:hidden name='ev22a' id='ev22a' />
  <cml:hidden name='ev23a' id='ev23a' />
  <cml:hidden name='ev24a' id='ev24a' />
  <cml:hidden name='ev25a' id='ev25a' />
  <cml:hidden name='ev26a' id='ev26a' />
  <cml:hidden name='ev27a' id='ev27a' />
  <cml:hidden name='ev28a' id='ev28a' />
  <cml:hidden name='ev29a' id='ev29a' />

<cml:hidden name='ev0label' id='ev0label' />
  <cml:hidden name='ev1label' id='ev1label' />
  <cml:hidden name='ev2label' id='ev2label' />
  <cml:hidden name='ev3label' id='ev3label' />
  <cml:hidden name='ev4label' id='ev4label' />
  <cml:hidden name='ev5label' id='ev5label' />
  <cml:hidden name='ev6label' id='ev6label' />
  <cml:hidden name='ev7label' id='ev7label' />
  <cml:hidden name='ev8label' id='ev8label' />
  <cml:hidden name='ev9label' id='ev9label' />
  <cml:hidden name='ev10label' id='ev10label' />
  <cml:hidden name='ev11label' id='ev11label' />
  <cml:hidden name='ev12label' id='ev12label' />
  <cml:hidden name='ev13label' id='ev13label' />
  <cml:hidden name='ev14label' id='ev14label' />
  <cml:hidden name='ev15label' id='ev15label' />
  <cml:hidden name='ev16label' id='ev16label' />
  <cml:hidden name='ev17label' id='ev17label' />
  <cml:hidden name='ev18label' id='ev18label' />
  <cml:hidden name='ev19label' id='ev19label' />
  <cml:hidden name='ev20label' id='ev20label' />
  <cml:hidden name='ev21label' id='ev21label' />
  <cml:hidden name='ev22label' id='ev22label' />
  <cml:hidden name='ev23label' id='ev23label' />
  <cml:hidden name='ev24label' id='ev24label' />
  <cml:hidden name='ev25label' id='ev25label' />
  <cml:hidden name='ev26label' id='ev26label' />
  <cml:hidden name='ev27label' id='ev27label' />
  <cml:hidden name='ev28label' id='ev28label' />
  <cml:hidden name='ev29label' id='ev29label' />
  
<div id='videoSource' src='{{video_url}}'></div>
<div id='videoFragment' src='{{fragment}}'></div>

<hr>

<cml:textarea class='feedback hidden' name='feedback' label='We appreciate your feedback on this task, e.g. was it clear, easy, how can we improve it?' />
.cml .cml_field .instructions {
  color: #e32636;
}

.cml .cml_field .addedevents {
  height: 25px;
  resize: none;
}

.play_border {
    margin:5px;
    border: 2px solid rgba(0,0,0,0.7);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
}
.play_border:hover{
    border-color: transparent;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}
.play_border:active,.play_border:focus{
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5.play_button:hoverpx 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}
.play_button {
  position:relative;
  top: 30px;
  left: 40%;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid rgba(0,0,0,0.8);
} 
.play_reverse_button {
    position:relative;
   top: 30px;
  left: 30%;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid rgba(0,0,0,0.8);
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
} 

.hidden{
  display:none;
}

#videoDiv{
 border: 1px solid; 
}

#followupText1{
  font-weight: bold;
  font-size: x-large;
  margin-top: 50px;
  text-align: center;
}
#followupText2{
  margin-top: 50px;
  /* margin-left: 219px; */
  text-align: center;
}
#followupText3{
  margin-top: -20px;
  margin-left: 350px;
}

#playNextFollowup{
   margin-top: 20px;
  margin-left: 365px; 
}

#playPrevFollowup{
  margin-left: 220px;
}

#initialText{
   font-weight: bold;
  font-size: x-large;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  text-align: center;
}

#playNextInitial{
   margin-top: 50px;
  margin-left: 39%;
}

.typedvalue {  
  position: relative;
  top: -23px;
}

.eventtext .legend { display: none; }

.noevents .legend { color: red; }

.checkbox label{ font-weight: bold;}

#noevent_text{ color: red; font-weight: bold;}

.remove {  
  position: relative;
  top: -22px;
  margin-left: 10px;
  margin-top: 23px;
}



.videoCounter{
  position: relative;
  top: -390px;
  left: 15px;
  height: 20px;
  width: 43px;
  background: white;
  text-align: center;
}

.videoplayed .legend{
  display:none;  
}
input.videoplayed.validates-required.videoplayed.validates {
  width: 0px;
  height: 0px;
  color: white;
  border: none;
  background: white;
  background-color: white;
  -webkit-box-shadow: inset 0 0px 0px white;
  -moz-box-shadow: inset 0 0px 0px white;
  box-shadow: inset 0 0px 0px white;
}

.add{
  width: 200px;
  height: 50px;
  font-size: large;
  line-height: 45px;
  background: #00CC00;
  background-image: linear-gradient(to bottom, #33D633, #00A300);
  background-position: 0 0px !important; 
}

.plusIcon{
  top: 5px;
  position: relative;
}

.errorMessage {
  max-width: 180px;
}
require(['jquery-noconflict'], function(jQuery) {
    
  
  //Ensure MooTools is where it must be
  Window.implement('$', function(el, nc){
    return document.id(el, nc, this.document);
  });
  var $ = window.jQuery;
  var index = 0;
  var newLine = false;
  var otherChar = false;
  var consecutiveEnter = 0;
  var radio = [];
  var videoFragmentLenght = 30;//seconds
  var curVideoFragment = $("#videoFragment").attr('src');
  var timeVideoStart = -1;
  var eventcounter = 0; 
  var video_url = $("#videoSource").attr('src').split('/watch?v=')[1];
  var cur_video_time_left = videoFragmentLenght;
  var focusVideoTime = -1;
  var focusValue = '';
  
  $('input.eventlabel').attr("placeholder", "What are the keywords?");
  $('input.noevents_textfield').attr("placeholder", "Why is there nothing happening?");
  $('input.eventlabel').on( "blur", function(){
    var id = parseInt($(this).closest('tr').attr('id').replace('event',''));
    var videoTime = -1;
    if( timeVideoStart > -1 ){
      var videoFragmentDuration = Date.now()-timeVideoStart;
      if( videoFragmentDuration  > videoFragmentLenght*1000 ){//milliseconds
        videoFragmentDuration = videoFragmentLenght*1000;
      }
      videoTime = curVideoFragment*videoFragmentLenght*1000+videoFragmentDuration ; 
      
    } 
    $('.ev'+ id +'a').val(videoTime);
  });
  //Set focus to next textfield on enter press for the EVENT
  eventTypeTextFields = $('input.eventlabel');
  for(var i = 0; i<eventTypeTextFields.length; i++){    
    eventTypeTextFields[i].onkeydown=function(e){
        var keyValue = e.which;
        if (keyValue == "13") {
          e.preventDefault();
          $( "#add0" ).trigger( "click" );
          //$($($(this).closest('tr')).children()[1]).find('input').focus();      
        }
      };
  }
  //Remove focus to textfield on enter press for the EVENT TYPE
  eventTypeTextFields = $('.eventtype');
  for(var i = 1; i<eventTypeTextFields.length; i+=2){
      eventTypeTextFields[i].onkeydown=function(e){
        var keyValue = e.which;
        //On ENTER and TAB, go to next TYPE field
        if (keyValue == "13" || keyValue == "9") {
          e.preventDefault();
          var nextRowId = '#event'+(parseInt($(this).closest('tr').attr('id').replace('event',''))+1);
                      
          $($(nextRowId).children()[1]).find('input').focus();
          
          this.blur();
        }
      };
  }
  
  $('input.noevents_checkbox').change(function() {
    if($(this).is(":checked")) {
      if($('.noevents_textfield').hasClass('hidden')){//Hidenoevents textfield
        $('.noevents_textfield').removeClass('hidden');
      }            
    }
    else{
      if(!$('.noevents_textfield').hasClass('hidden')){//Hidenoevents textfield
        $('.noevents_textfield').addClass('hidden');
      }   
    }  
  });
  
  
  hiddenTimes = document.getElementsByClassName("times"); 
  confirmed = document.getElementsByClassName("confirmed"); 
  //confirmedevents = document.getElementsByClassName("confirmedevents validates-required confirmedevents validates");
  
  
  $(".input.videoplayed.validates-required.videoplayed.validates.validation-passed").attr('readonly',true);
  
  
    
$('body').on('click', 'input.radioopt', function() {
//  alert(radio[0].checked);
//  alert(radio.length);
  var allString = confirmed[0].value;
  var values = confirmed[0].value.split(' ### ');
  //alert(confirmed[0].value.split(' ### '));
  for (i = 0; i < values.length - 1; i ++) {
    var newSplit = values[i].split('---');
//    alert(newSplit[1]);
    if (radio[i * 2].checked && newSplit[1] == "confirm") {
    //   alert("1");
      confirmed[0].value = allString.replace(values[i], newSplit[0] + "---confirm");
    }
    else if (radio[i * 2].checked && newSplit[1] == "delete") {
    //  alert("2");
       confirmed[0].value = allString.replace(values[i], newSplit[0] + "---confirm");
    }
    else if (radio[i * 2 + 1].checked && newSplit[1] == "confirm") {
    //  alert("3");
      confirmed[0].value = allString.replace(values[i], newSplit[0] + "---delete");
    }
    else if (radio[i * 2 + 1].checked && newSplit[1] == "delete") {
    //    alert("4");
      confirmed[0].value = allString.replace(values[i], newSplit[0] + "---delete");
    }
  }
});
  //hide table row and remove text
  $('.remove').click(function() {
    var id = $(this).attr('id');
    id = id.replace('remove','');
    if(!$('#event'+id).hasClass('hidden')){
      $('#event'+id).addClass('hidden');
    }
  
    var children = $('#event' + id).find('.eventtext');
    $(children[1]).val('');
    $(children[3]).val('');   
    $('.ev' + id  + 'a').val("");
    eventcounter--;
    check_eventCounter();
  });
  
  // Show next event row
  $('#add0').click(function() {    
        
    var rows = $('#results tr');
    for(var i = rows.length-1; i >= 0; i--){
      var valid = false;
      var row = rows[i];
      var rowID = parseInt(row.id.replace('event',''))-1;
      var usable_row = false;
      //If first row reached 
      if(i == 0){
        //If it is unused
        if( $(row).hasClass('hidden')){
          valid = true;
        }
        else{
          alert('Only 30 events can be annotated per video.');
        }
      }
      else{   
        //if row is unused and next row is used
        if( $(row).hasClass('hidden') && !$(rows[i-1]).hasClass('hidden')){
          valid = true;
        }
      }
      if(valid){
        $(row).removeClass('hidden');
        $($(row).children()[0]).find('input').focus();
        eventcounter++;
        check_eventCounter();
        break;
      }
    }
  });
  
  //plays next fragment of the video
  $(".playNext").click(function(){
    hidePlayDivs();
    var start = 10*curVideoFragment;
    var end = start+videoFragmentLenght;
    
    // Set correct video settings
    $("#videoFrame").attr('src', "https://www.youtube.com/embed/"+video_url+"?autoplay=1&disablekb=1&controls=0&iv_load_policy=3&rel=0&showinfo=0&start="+start+"&end="+end);
    timeVideoStart = Date.now();
  // Show add event button
  if($('#add0').hasClass('hidden')){
        $('#add0').removeClass('hidden');
      }
      
    // Show buttons after "videoFragmentLenght" seconds      
    setTimeout(function() {
      showPlayDiv();
      //Show noevents textfield
    $('.videoplayed').val("done");
    $('.feedback').removeClass('hidden');
    }, videoFragmentLenght*1000+500);
  //Show noevents after half the video seconds if still no events entered
  setTimeout(function() {
     if(eventcounter == 0 && $('.noevents')[0].hasClass('hidden')){
        $('.noevents')[0].removeClass('hidden');
      }
    }, videoFragmentLenght*1000/2); 
      //Update video duration counter 
    videoCounterInterval = setInterval(function () {
      cur_video_time_left--; 
      var timetoshow = secondsToMinutes(cur_video_time_left);
      $('.videoCounter').html(timetoshow )
        }, 1000); 
     // Stop interval
    setTimeout(function() {
      cur_video_time_left = videoFragmentLenght; 
      window.clearInterval(videoCounterInterval )
        },videoFragmentLenght*1000+500);     
  });
  
  //replays previous fragment of the video
  $(".playPrev").click(function(){
    hidePlayDivs();     
    var start = 10*curVideoFragment;
    var end = start+videoFragmentLenght;  
    
    // Set correct video settings 
    $("#videoFrame").attr('src', "https://www.youtube.com/embed/"+video_url+"?autoplay=1&disablekb=1&controls=0&iv_load_policy=3&rel=0&showinfo=0&start="+start+"&end="+end);
    timeVideoStart = Date.now();
    // Show buttons after "videoFragmentLenght" seconds
    setTimeout(function() {
      showPlayDiv();
    }, videoFragmentLenght*1000+500)
      
    //Update video duration counter 
    videoCounterInterval = setInterval(function () {
      cur_video_time_left--;
      var timetoshow = secondsToMinutes(cur_video_time_left);
      $('.videoCounter').html(timetoshow )
        }, 1000); 
    //Stop interval
    setTimeout(function() {
      cur_video_time_left = videoFragmentLenght; 
      window.clearInterval(videoCounterInterval )
        },videoFragmentLenght*1000+500);
  });
  
  function hidePlayDivs(){//hides play buttons and text, shows video
    if(!$("#followupPlay").hasClass('hidden')){
      $("#followupPlay").addClass('hidden');
    }
    if(!$("#initialPlay").hasClass('hidden')){
      $("#initialPlay").addClass('hidden');
    }     
    if($("#videoFrame").hasClass('hidden')){
      $("#videoFrame").removeClass('hidden')
    } 
  }
  
  function showPlayDiv(){//shows play buttons and text, hides video
    if(!$("#videoFrame").hasClass('hidden')){
      $("#videoFrame").addClass('hidden')
    } 
    if($("#followupPlay").hasClass('hidden')){
      $("#followupPlay").removeClass('hidden');
    }    
  }
  
  function secondsToMinutes(seconds){
    minutes = String(Math.floor(seconds/60));
    seconds = String(seconds%60);
    if(minutes.length == 1){
      minutes = '0'+minutes;
    }
    if(seconds.length == 1){
      seconds = '0'+seconds; 
    }
    return minutes+':'+seconds;
  }
  
  function fillnewrow(event, videoTime){
    var table = $('#results');
    var rows = $('#results tr');
    for(var i = rows.length-1; i >= 0; i--){
      var rowtofill = false;
      var rowEventText = $(rows[i]).find('.eventtext')[0].value;
      if( i == 0 ){//reached first row and its unused
        if( rowEventText.length == 0 ){//its unused
          rowtofill = true;
        }
      }
      else{        
        var nextrowEventText = $(rows[i-1]).find('.eventtext')[0].value;
        if(rowEventText.length == 0 && nextrowEventText.length > 0){//if row is unused and next row is used
          rowtofill = true;
        }
      }
      if(rowtofill){
        row = rows[i];
        if($(row).hasClass('hidden')){//show row if its hidden
          $(row).removeClass('hidden');          
        }
        $(row).find('.eventtext')[0].value = event;//fill event text   
        $('.ev'+ i +'label').val(event);
        $('.ev'+ i +'a').val(videoTime);
        if(eventcounter > 0){//if some events annotated
          if(!$('.noevents')[0].hasClass('hidden')){//Hidenoevents textfield
            $('.noevents')[0].addClass('hidden');
           }
          if($('.yesevents').hasClass('hidden')){//Show eventcounter textfield
            $('.yesevents').removeClass('hidden');
          }
        }
        break;
      }
    }
    
  }
  function check_eventCounter(){
    console.log('gothere eventcounter '+ eventcounter );
    if(eventcounter > 0){//if no events annotated
          if(!$('.noevents')[0].hasClass('hidden')){//Hidenoevents textfield
            $('.noevents')[0].addClass('hidden');
          }
          if($('.yesevents').hasClass('hidden')){//Show eventcounter textfield
            $('.yesevents').removeClass('hidden');
          }
          $('#add0').html("<i class='icon-plus icon-white plusIcon'></i> Add more keywords");
        }
    else if(eventcounter == 0){
      //Show noevents textfield
      if($('.noevents')[0].hasClass('hidden')){
      $('.noevents')[0].removeClass('hidden');
      }
      //Hide eventcounter textfield
      if(!$('.yesevents').hasClass('hidden')){
        $('.yesevents').addClass('hidden');
        $('.yesevents').val("")
      }
      $('#add0').html("<i class='icon-plus icon-white plusIcon'></i> Add keywords");
    }
  }
  
  
});

Navigation

Clone this wiki locally