For this setup, get the video files in all the formats (i.e. mp4, ogg and webm formats) uploaded on an ftp and get the link for the same, implement these links accordingly in the code shown below.

  <source src="VIDEO MP4 Path" type="video/mp4">
  <source src="VIDEO WEBM Path" type="video/webm"> 
  <source src="VIDEO OGG/OGV Path" type="video/ogg"> 

Replace existing paths with the updated ones in below and update question label and text acoordingly.

  <text 
   label="C2">
    <title>When you are finished watching the video, please click next to continue.</title>
    <style name="survey.question.instructions"><![CDATA[
<h2 title="@(instructions)" class="instruction-text">$(comment)</h2>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.1/video-js.min.css" integrity="sha512-D/n19dhr+LY8HOoGuybX+bJYsZOFKb0r7YpAWBMPg5Hnke6lxdHl6q21d7qiwIsMgdSnBG9pSMQlwTtZ+6ISmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.1/video.min.js" integrity="sha512-xT61DWoPRoAa4ir+LqER5L4/zzuO5tQOQywZYqU8BaZVqolq78bRobozDxozcCZ6tmo92zetGVQHRp+sQHIi/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<video controls="true" oncontextmenu="return false;" disablePictureInPicture controlsList="noplaybackrate nodownload" id="my-player" class="video_player video-js" preload="auto" autoplay playsinline> 
  <source src="https://surveylink.in/FW_decipherTheam/3D%20Web%20Explainer%20final_x264.mp4" type="video/mp4">
  <source src="https://surveylink.in/FW_decipherTheam/3D_Web_Explainer_final.webm" type="video/webm"> 
  <source src="https://surveylink.in/FW_decipherTheam/3D_Web_Explainer_final.ogv" type="video/ogg"> 
</video>

<script>
$ (document).ready(function(){
if ($ (".p_times input.text-input").val().length < 1){
$ (".p_times input.text-input").val(0)
}

$ ("#btn_continue, #btn_finish").hide();


var video = document.getElementById('my-player');
if($ (".time_elapsed input.text-input").val()==""){
$ (".time_elapsed input.text-input").val(0);
}
setInterval(function(){
  if (video.paused) {    
console.log("paused");
  } else {
console.log("play");
   $ (".time_elapsed input.text-input").val(parseInt($ (".time_elapsed input.text-input").val()) + 1);

  }
},1000);
});

var video = document.getElementById('my-player');
var supposedCurrentTime = 0;
video.addEventListener('timeupdate', function() {
  if (!video.seeking) {
		supposedCurrentTime = video.currentTime;
  }
});
// prevent user from seeking
video.addEventListener('seeking', function() {
  // guard agains infinite recursion:
  // user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
  var delta = video.currentTime - supposedCurrentTime;
  // delta = Math.abs(delta); // disable seeking previous content if you want
  if (delta > 0.01) {
    video.currentTime = supposedCurrentTime;
  }
});
video.addEventListener('ended', function() {
  // reset state in order to allow for rewind
  $ ("#btn_continue, #btn_finish").show();
	supposedCurrentTime = 0;
	$ (".p_times input.text-input").val(parseInt($ (".p_times input.text-input").val()) + 1);
		
});



</script>
<style>
.video_player{
margin-left: auto;
margin-right: auto;
  display: block;
  max-width: 100%;
  width: 900px;
  height: 506px; 
}

.element{
display: none;
}
</style>
<!-- /.instruction-text -->
]]></style>
    <row label="r1" ss:rowClassNames="p_times">Times a video is played</row>
    <row label="r2" ss:rowClassNames="time_elapsed">Time spent on video</row>
  </text>

  <suspend/>