Play at Time videoJS

by Rowan Hamilton

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/4.11/video-js.css">
<script src="https://vjs.zencdn.net/4.11/video.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<video id="videoFile" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
    <!--<source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>-->
    <source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type='video/mp4'> 
</video>
<br>
<video id="videoFile2" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
    <!--<source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>-->
    <source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type='video/mp4'>
</video>
<br>

<div class="input-group well">
    <button id="playAtTime" class="btn btn-sm btn-success">Play from:</button>
    <input type="text" name="timeHr" id="timeHr" class="btn" placeholder="hours" size="4">
    <strong>:</strong>
    <input type="text" name="timeMin" id="timeMin" class="btn" placeholder="minutes" size="4">
    <strong>:</strong>
    <input type="text" name="timeSec" id="timeSec" class="btn" placeholder="seconds" size="4">
</div>

JavaScript

var videoPlayer = videojs('videoFile', {}, function () {
  // Player (this) is initialized and ready.
});
var videoPlayer2 = videojs('videoFile2', {}, function () {
  // Player (this) is initialized and ready.
});


$('#playAtTime').on('click', function() {
    videoJump();
});

function videoJump() {
		// Initialize variables.
		var hrs = Math.abs(document.getElementById('timeHr').value);
		var min = Math.abs(document.getElementById('timeMin').value);
		var sec = Math.abs(document.getElementById('timeSec').value);
    // Convert to seconds.
    var time = (hrs * 60 * 60 + min * 60 + sec);
    var vidLen = videoPlayer.duration();
    // Clamp chosen time to length of video.
    var timeClamp = Math.max(0, Math.min(time, vidLen));

    videoPlayer.play();
    videoPlayer2.play();
    videoPlayer.currentTime(timeClamp);
    videoPlayer2.currentTime(timeClamp);
    videoPlayer.pause();
    videoPlayer2.pause();
}

document.getElementById('timeHr').addEventListener('keydown', function(e) {
    var key   = e.keyCode ? e.keyCode : e.which;
    
    if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
         (key == 65 && ( e.ctrlKey || e.metaKey  ) ) || 
         (key >= 35 && key <= 40) ||
         (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
         (key >= 96 && key <= 105)
       )) e.preventDefault();
});
document.getElementById('timeMin').addEventListener('keydown', function(e) {
    var key   = e.keyCode ? e.keyCode : e.which;
    
    if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
         (key == 65 && ( e.ctrlKey || e.metaKey  ) ) || 
         (key >= 35 && key <= 40) ||
         (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
         (key >= 96 && key <= 105)
       )) e.preventDefault();
});
document.getElementById('timeSec').addEventListener('keydown', function(e) {
    var key   = e.keyCode ? e.keyCode : e.which;
    
    if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
         (key == 65 && (...