JW Player 10-second Fast Forward Button

index.html

<div id="previewPlayer"></div>
<div id="seekerValue">0</div>
<input type="range" id="frameSlider" name="points" min="0" max="30" step="0.05" value="15" oninput="changeFrame()">
<script src="https://app.extremereach.com/Content/js/jwplayer-7.12.8/jwplayer.js"></script>
<script> jwplayer.key = "+dQxixMPdR7e+iUQLHVm0Q2p9oVpzNhmbHu++8aB+YhHEkhW";</script>
<!-- <script src="jwplayer-8.0.0-beta.3/jwplayer.js"></script>
<script> jwplayer.key = "jR9SdfiikzUbJAJJG4qhCSaB55NmYojO88Ni753IwQM/iWDD"; </script> -->

<script>
jwplayer('previewPlayer').setup({
  "file": "https://media-us-westslateappcom.s3.us-west-1.amazonaws.com/madcowfilms/production/clips/514ebae1-ebbb-4477-addd-d52a30cd28c1-1280x720.2500.webm",
  "title": "Mad Cow Films",
	type: 'webm',
	skin: 'vapor',
	abouttext: 'About Extreme Reach',
	aboutlink: 'https://www.extremereach.com',
	playbackRateControls: [0.5, 0.75, 1, 1.25, 1.5, 2],
	width: '100%',
	height: '100%',
	bufferlength: 3,
	primary: 'html5',
  autostart: true
}).onReady(function() {
  var myFFButton = document.createElement("div");
	myFFButton.id = "myFFButton";
	myFFButton.setAttribute('style',"margin-left: 0px; margin-bottom: -8px; background-image: url('https://s3.amazonaws.com/static.sourcecreative.com/icons/ff.svg');background-repeat: no-repeat;background-size:contain;");
	myFFButton.setAttribute('class','jw-icon jw-icon-inline jw-button-color jw-reset');
	myFFButton.setAttribute('onclick','jwplayer("previewPlayer").seek(jwplayer("previewPlayer").getPosition()+10)');
  var leftGroup = document.getElementsByClassName('jw-controlbar-left-group')[0];
	leftGroup.insertBefore(myFFButton, leftGroup.childNodes[2]);
});
</script>

jw-player-10-second-fast-forward-button.markdown

JW Player 10-second Fast Forward Button

jQuery UI range slider with floating and merged values at overlapping point.

A Pen by Elon Zito on CodePen.

License.

script.js

function changeFrame() {
  var frameSliderValue = $('#frameSlider').val();
  //console.log(frameSliderValue);
  jwplayer('previewPlayer').seek(frameSliderValue);
  $('#seekerValue').html(frameSliderValue);
  setTimeout(function() {
  if(jwplayer('previewPlayer').getState() == 'playing') {
    jwplayer('previewPlayer').pause();
  }
  },250)
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  padding: 40px 0 0 0;
}
#previewPlayer {
  min-height:600px;
  margin-bottom:40px;
}
#myFFButton {  -webkit-transition:150ms filter linear;
  transition:150ms filter linear;

}
#myFFButton:hover {
  -webkit-filter: invert(40%) sepia(70%) saturate(500%) hue-rotate(105deg);
  filter: invert(40%) sepia(70%) saturate(500%) hue-rotate(105deg);
}
#frameSlider {
  width:100%;
}
.jw-controlbar {
    opacity:1!important;
    visibility: visible!important;
}
.jw-title, .jw-nextup {
	display:none!important;
}

.jwplayer.jw-state-buffering .jw-display-icon-display .jw-icon {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
	display:none!important;
}