【问题标题】:how to jump to a location of video using html 5如何使用 html 5 跳转到视频的位置
【发布时间】:2014-01-03 15:34:25
【问题描述】:

我想使用 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>

请帮帮我

【问题讨论】:

标签: html5-video


【解决方案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)。可能发生这种情况的一种情况是网页想要在页面加载的特定时间播放视频。

【讨论】:

  • 从没想过会这么简单 :D +1
【解决方案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

【讨论】:

  • 如果您选择 bytagname 为什么要在 VideoID 中写入?不应该是视频吗?
【解决方案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>

【讨论】:

    猜你喜欢
    • 2011-06-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-31
    • 1970-01-01
    • 2013-08-14
    • 2012-01-25
    相关资源
    最近更新 更多