custom video controller

An attempt at making my own method for controlling multiple video elements on one page as minimalist as possible. Currently working at making the progress bars sync up with the videos.

by Doc Whitaker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Test Website (for hover video and custom player)</title>
<p>When the user clicks on a video that isn't playing any other video element on the page is stopped and the clicked video is playedm but if it is playing when clicked then it will be stopped.</p>
<body>
  <div class="video-container">
    <div class="vid-txt-header">
      <p>Example #1</p>
    </div>
    <div class="previewVideo">
      <video loop width="300px" height="auto">
        <source src="http://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
        <source src="http://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
      </video>
    </div>
    <div class="vid-txt-header">
      <p>Example #2</p>
    </div>
    <div class="previewVideo">
      <video loop width="300px" height="auto">
        <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
        <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      </video>
    </div>

  </div>

</body>

JavaScript

$(".previewVideo").append("<progress value='0' max=initialMax></progress>"); //add progress bar to HTML

var preVID = $(".previewVideo").click(function clickTrigger() {

	var maxVar = $("video", this).get(0).duration; // var for the length of video
	var progress = $(this).find("progress"); // var to select html progress element
	var vidtime = $("video", this).get(0).currentTime; // var for current time of video

	progress.attr("max", function(i, attr) {
		return attr.replace("initialMax", maxVar);
	});
  
    // The below functions (pbAnim1, 2 & 3) are my attempts to get the progress bar to sync with their corrosponing video elements
    // pbAnim2 is the currently active function, with the other two commented out.

		/* 
    var pbAnim1 = function(){
      //phAnim1 gives this error "Cannot read property 'currentTime' of undefined at function"
      progress.attr("value", $("video", this)[0].currentTime); 
      setTimeout(pbAnim1, 17);
    }
    pbAnim1();
		*/
    
    var pbAnim2 = function(){
      //pbAnim2 only animates whichever element is specified with ["#"]
      progress.attr("value", $("video")[0].currentTime);
      setTimeout(pbAnim2, 17);
    }
    pbAnim2();

		/* 
    var pbAnim3 = function(){
    //pbAnim3 doesn't return an error but doesn't serve it's function either.
      progress.attr("value", $("video", this).currentTime);
      setTimeout(pbAnim3, 17);
    }
    pbAnim3();
		*/
    
  
	if ($("video", this)[0].paused == false) {
		$("video", this)[0].pause();
		$("video", this)[0].currentTime = 0;

	} else {
	$("video").each(function() {
		$(this).get(0).pause();
		$(this).get(0).currentTime = 0;
	});
	$("video", this)[0].play();

	}
});