how to jump to a location of video using html 5

Question

I want to use html5 video tag to play my video. How can I set the time from which the video starts playing.

for example my video is 90 seconds long i want to start playing at 30 seconds

  <video width="320" height="240" controls>
  <source src="<?php echo base_url() ?>/programs/prg1.mp4" type="video/mp4">
  Your browser does not support the video tag.
  </video>

please help me

Try to check this http://stackoverflow.com/questions/5981427/start-html5-video-at-a-particular-position-when-loading — gregjer, Dec 16 '13 at 09:45
add autoplay attribute right after controls inside your video tag See also https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video — gregjer, Dec 16 '13 at 09:54

score 13 · Answer 1 · answered Dec 16 '13 at 09:49

From http://blog.grio.com/2012/08/how-to-seek-an-html5-video-at-a-specific-time-on-load.html

How To Seek an HTML5 Video at A Specific Time On Loadby Peter Tubig

HTML:

<video id="video1" width="320" height="240">
     <source src="movie.mp4" type="video/mp4" />
</video>

Javascript:

document.getElementById("video1").currentTime = 10;

The Javascript statement sets the video1 video’s current time to the 10-second mark. However, this will only work if the browser has already loaded the video’s metadata. The metadata contains pertinent video information such as dimensions and duration. Knowing the video’s duration is required for the browser to seek the video. If it doesn’t have that, then current time will not be set (remains 0). A scenario where this could happen is when a webpage wants to play a video at a specific time when the page loads.

Never thought it would be that easy :D +1 – Rahul Desai Jan 08 '15 at 09:54 — Rahul Desai, Jan 08 '15 at 09:54

score 4 · Answer 2 · edited May 05 '21 at 18:59

4

Html :

<video width="400" controls id="VideoId">
  <source src="Intro.mp4" type="video/mp4"> 
</video>`

JavaScript:

var video = document.getElementsByTagName("video")[0];
video.currentTime = 40.066667;

you can also use get elementbyid

edited May 05 '21 at 18:59

MindRoasterMir

324
1
2
18

answered Nov 10 '15 at 07:28

Monika Kamble

41
1

1

if you are selecting bytagname why are you writing inside VideoID ? should it not be video ? – MindRoasterMir May 02 '21 at 17:26

score 0 · Answer 3 · answered Dec 16 '13 at 09:49

In html

<video id="player" width="320" height="240" src="video1.ogv" type="video/ogg" controls="controls">
</video>

and the java script:

<script language="javascript">
  var video1 = "video1.ogv";
  var video2 = "video2.ogv";
  var player = document.getElementById("player");
  player.setAttribute("ontimeupdate", "update();");
  var time = 0.0;
  var toUpdate = false;

  function changeVideo() {
    time = player.currentTime;
    if (player.src.match(video1+"$") == video1)
      player.src = video2;
    else
      player.src = video1;
    player.load();
    toUpdate = true;
    player.play();
  }

  function update() {
    if (flag) {
      player.currentTime = time;
      toUpdate = false;
    }
  }
</script>

how to jump to a location of video using html 5

3 Answers3

Linked