I'm trying to write some JavaScript to do this and I can't figure out why my method isn't working.
var vid = document.getElementById('myvid'),
ticks = 50, // number of frames during fast-forward
frms = 10, // number of milleseconds between frames in fast-forward/rewind
endtime = 24.0; // time to fast-forward/remind to (in seconds)
// fast-forward/rewind video to end time
var tdelta = (endtime - vid.currentTime)/ticks;
for ( var i = 0; i < ticks; ++i )
{
(function(j){
setTimeout(function() {
vid.currentTime = vid.currentTime + tdelta * j;
}, j * frms);
})(i);
}
fiddle: /
Are HTML videos just not advanced enough to support this kind of rapid movement from place to place in the video?
I'm trying to write some JavaScript to do this and I can't figure out why my method isn't working.
var vid = document.getElementById('myvid'),
ticks = 50, // number of frames during fast-forward
frms = 10, // number of milleseconds between frames in fast-forward/rewind
endtime = 24.0; // time to fast-forward/remind to (in seconds)
// fast-forward/rewind video to end time
var tdelta = (endtime - vid.currentTime)/ticks;
for ( var i = 0; i < ticks; ++i )
{
(function(j){
setTimeout(function() {
vid.currentTime = vid.currentTime + tdelta * j;
}, j * frms);
})(i);
}
fiddle: https://jsfiddle.net/f90yu2t4/1/
Are HTML videos just not advanced enough to support this kind of rapid movement from place to place in the video?
Share Improve this question edited Apr 20, 2016 at 0:33 Khaled Awad 1,8241 gold badge12 silver badges24 bronze badges asked Apr 19, 2016 at 23:29 Subpar Web DevSubpar Web Dev 3,2607 gold badges23 silver badges42 bronze badges2 Answers
Reset to default 11<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
<body>
<video id="Video1" >
// Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogv" type="video/ogg" />
HTML5 Video is required for this example.
<a href="demo.mp4">Download the video</a> file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
</body>
Two things:
For JSFiddle, the code is already wrapped in window.onload, code inside another window.onload isn't actually executed. You should remove the wrapper (at least when using JSFiddle).
Second, in the setTimeout function, vid.currentTime = vid.currentTime + tdelta * j; doesn't work as intended because the second instance of vid.currentTime isn't a constant start time. You should assign a startTime before the setTimeout function, and have vid.currentTime = startTime + tdelta * j;
With those changes, check it out here: updated fiddle: https://jsfiddle.net/f90yu2t4/8/