how to jump to a location of video using html 5

问题

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

回答1:

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.

回答2:

Html :

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

JavaScript:

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

回答3:

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>

来源：https://stackoverflow.com/questions/20607619/how-to-jump-to-a-location-of-video-using-html-5

标签

html5-video