如何使用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

如何在加载时的特定时间查找 HTML5 视频作者：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

将以下文本添加到视频文件名中：#t=[h:]mm:ss。因此，假设视频文件名为 myvideo.mp4 并且从 30'' 开始，则源属性应为 src="myvideo.mp4#t=00:30"。如果您想在 1 小时 12 分 34 秒开始播放视频： src="myvideo.mp4#t=1:12:34"。

Answer 4

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