HTML:


<div class="job">
  <video id="player" class="player" preload="auto" data-setup="{}">
    <source src="{{url}}" type="video/mp4"></source>
  </video>
  <p></p>
  <button type="button" id="controls" class="controls">Play</button>
  <cml:text label="Validation" validates="required" id="reqs" class="reqs" aggregation="agg"></cml:text>
  <div class="action-log" id="aclog">
    <cml:text label="Action log" validates="required" class="log" id="log" type="hidden" aggregation="agg"></cml:text>
  </div>
  <div class="video-quality" id="vidqual">
    <cml:radios label="What is the visual quality of the video?" validates="required" id="scale" name="scale" aggregation="avg" gold="true">
      <cml:radio label="Bad" value="1"></cml:radio>
      <cml:radio label="Poor" value="2"></cml:radio>
      <cml:radio label="Fair" value="3"></cml:radio>
      <cml:radio label="Good" value="4"></cml:radio>
      <cml:radio label="Excellent" value="5"></cml:radio>
    </cml:radios>
  </div>
  <div class="user-data" id="usdat">
    <cml:text label="User data:" id="userdata" class="userdata" type="hidden" aggregation="agg"></cml:text>
  </div>
</div>




JS:


require({
  paths: {
    jui: "https://code.jquery.com/ui/1.11.3/jquery-ui.min",
  },  
  
  map: {
    "*" : { "jquery" : "jquery-noconflict" }
  }}, [ "jquery-noconflict", 'jui'  ], function($) {
  
  var myApp={};
  
  Window.implement('$', function(el, nc){
    return document.id(el, nc, this.document);
  });

  var jQ = window.jQuery;
 
  jQ.getJSON('https://geoip-db.com/json/geoip.php?jsonp=?') 
  .done ( function(location){ 
    myApp.userLocation = '';
    for (key in location) {
       if ( location[key] != undefined && location[key] != null ) {
          myApp.userLocation += "\"" + key + "\":\"" + location[key]+ "\"," ;
       }
    }

    var userdatainputs = document.querySelectorAll('input.user_data');
    userdatainputs[0].setAttribute("readonly","readonly");
    userdatainputs[0].value = userdatainputs[0].value + '{"data":{';
    userdatainputs[0].value = userdatainputs[0].value + myApp.userLocation ;
    
    var validators =document.querySelectorAll('input.reqs');
    for ( var j = 0; j < validators.length; j++) {
      validators[j].setAttribute("readonly","readonly");
      validators[j].setAttribute("id","reqs"+j.toString());
    }
    
  });

  window.jQuery;

  $( document ).ready(function() {

    myApp.userData="";

    myApp.userData +=  "\"doNotTrack\":\""+window.navigator.doNotTrack+"\","; 
    myApp.userData +=  "\"cookieEnabled\":\""+window.navigator.cookieEnabled+"\",";
    myApp.userData +=  "\"platform\":\""+window.navigator.platform+"\",";
    myApp.userData +=  "\"CPU cores\":\""+window.navigator.hardwareConcurrency+"\","; 
    myApp.userData +=  "\"userAgent\":\""+window.navigator.userAgent+"\",";
    myApp.userData +=  "\"language\":\""+window.navigator.language+"\",";
    myApp.userData +=  "\"screenWidth\":\""+window.screen.width+"\",";
    myApp.userData +=  "\"screenHeight\":\""+window.screen.height+"\",";
    myApp.userData +=  "\"colorDepth\":\""+window.screen.colorDepth+"\",";
    myApp.userData +=  "\"pixelRatio\":\""+window.devicePixelRatio+"\",";

    var orientation = screen.orientation.type || screen.mozOrientation || screen.msOrientation;
    var resOrientation = '';
    if (orientation === "landscape-primary" || orientation === "landscape-secondary") {
        resOrientation = 'landscape';
    } 
    else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
        resOrientation = 'portrait';
    }
    function readDeviceOrientation() {
      switch (window.orientation) {  
        case 0:  
           resOrientation = 'portrait';
            break; 
        case 180:  
           resOrientation = 'portrait';
            break; 
        case -90:  
           resOrientation = 'landscape';
            break;  
        case 90:  
           resOrientation = 'landscape';
            break;
      }
    } 

    myApp.players={};
    myApp.jobs = $(".job");
    var _qty = document.getElementsByClassName("job").length;
    myApp.jobs.each(function(i,v){
      player = $(v).children("#player");
      player.attr("id", "player"+i.toString());
      videoId = $(v).children("#vid_id").val();
      button = $(v).children("#controls");
      button.attr("playerId",i.toString());
      log = $(v).find("input.log")[0];
      $(log).attr("id","log"+i.toString());
      
      scale = $(v).children("div.video-quality").children();
      $(scale).attr("id","scale"+i.toString());
      scale = document.getElementById("scale"+i.toString());
      var num = i;
      scale.addEventListener("click",function() {
        reqs = document.getElementById("reqs"+num.toString());
        reqs.value = "validated!";
      });

      scale.style.display = "none";
      
      usdat = $(v).children("div.user-data").children();
      $(usdat).attr("id","usdat"+i.toString());
      usdat = document.getElementById("usdat"+i.toString());
      usdat.style.display = "none";
      
      aclog = $(v).children("div.action-log").children();
      $(aclog).attr("id","aclog"+i.toString());
      aclog = document.getElementById("aclog"+i.toString());
      aclog.style.display = "none";
      
      var plr = document.getElementById("player"+i.toString());
      plr.addEventListener("play",function() {
        $(this).prop('muted', true);
        var btn = $(this).siblings("button");
        btn.attr("disabled",true);
        btn.css({"display": "none"});
      });
      plr.addEventListener("ended",function() {
        scale = document.getElementById("scale"+i.toString());
        scale.style.display = "inline";
      });
    });

    myApp.userData += "\"screenOrientation\":\""+resOrientation+"\"} }"; 
       
    
    var userdatainputs = document.querySelectorAll('input.user_data');
    
    userdatainputs[0].setAttribute("readonly","readonly");   
    userdatainputs[0].value = userdatainputs[0].value + myApp.userData;
        
    userdatainputs[0].addEventListener('click',function(){
      var content = this.value.replace(/\,/g,"\n");
      alert(content);
    });
   
    $(".controls").click(function(){
      var playerId=$(this).attr("playerId");
      var player = document.getElementById("player"+playerId);
      var log = document.getElementById("log"+playerId);
      if (!player.paused) {
        player.pause();
        log.value=log.value+'Pause('+player.currentTime.toFixed(2)+');';
      }
      else {
        player.play();
        log.value=log.value+'Play('+player.currentTime.toFixed(2)+');';
      }
    });
   
    $("#controlsgood").click(function(){
      var playerId=$(this).attr("playerId");
      var player = document.getElementById("playergood");
      $(player).prop("muted",true);
      player.play();
    });
   
    $("#controlsbad").click(function(){
      var playerId=$(this).attr("playerId");
      var player = document.getElementById("playerbad");
      $(player).prop("muted",true);
      player.play();
    });
   
    $("#controlsfair").click(function(){
      var playerId=$(this).attr("playerId");
      var player = document.getElementById("playerfair");
      $(player).prop("muted",true);
      player.play();
    });
  });
});