Create button to advance video

Asked

Viewed 822 times

0

I tried to create a javascript function to allow you to skip a few seconds in a video, but when you click the video button it just starts again.

var video = document.getElementById("video1");
var segundos = 30;
function skip(segundos) {
    video.currentTime += segundos;
}

the function is called in HTML

            <button class="pular" onclick="skip(segundos)">Skip</button>

I followed the examples given on https://msdn.microsoft.com/pt-br/library/hh924823(v=vs.85). aspx but it didn’t work.

javascript video html5-video video-player

  • All that matters is the button?

  • In case my problem is being only with the jump button, I need to make one to advance and one to return. The other button is the Paly/pause button, but this one is already working.

  • Consider using a jquery

  • Leo and what Jquery function would do this?

  • only do what is in the answer do not forget the library <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  • Vitor Hugo, did it?

  • I did. Thanks and sorry for the delay in responding

  • Vitor Hugo, if the answer was accepted read this post

  • missing post Lin :) https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

Show 4 more comments

1 answer

-1

With jquery it’s easy

    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;
    }

    $(document).ready(function(){
       var segundos = 30;
       document.getElementById("buttonbar").innerHTML = '<button id="restart" onclick="restart();">restart</button>\n<button id="rew" onclick="skip(-'+segundos+')">-'+segundos+'</button>\n<button id="play" onclick="vidplay()">></button>\n<button id="fastFwd" onclick="skip(+'+segundos+')">+'+segundos+'</button>';

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<video id="Video1">
     <source src="http://kithomepage.com/sos/deo.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">
</div>

Browser other questions tagged javascript video html5-video video-player

You are not signed in. Login or sign up in order to post.