如何使用 html 5 跳转到视频的位置

Question

我想使用 html5 视频标签来播放我的视频。 如何设置视频开始播放的时间。

例如，我的视频时长 90 秒，我想从 30 秒开始播放

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

请帮帮我

Answer 1

来自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;

Javascript 语句将 video1 视频的当前时间设置为 10 秒标记。但是，这只有在浏览器已经加载了视频的元数据时才有效。元数据包含相关的视频信息，例如尺寸和持续时间。浏览器需要知道视频的持续时间才能查找视频。如果没有，则不会设置当前时间（保持为 0）。可能发生这种情况的一种情况是网页想要在页面加载的特定时间播放视频。

Answer 2

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;  

你也可以使用get elementbyid

Answer 3

在html中

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

还有java脚本：

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