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

Posted 2023-05-07

【中文标题】如何使用 html 5 跳转到视频的位置

【英文标题】：how to jump to a location of video using html 5

【发布时间】：2014-01-03 15:34:25

【问题描述】：

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

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

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

请帮帮我

【问题讨论】：

试试看这个***.com/questions/5981427/…

如何让视频自动开始播放

在视频标签内的控件之后添加自动播放属性另见developer.mozilla.org/en-US/docs/Web/Guide/HTML/…

【参考方案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"  >
     <source src="movie.mp4" type="video/mp4" />
</video>

javascript：

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

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

【讨论】：

从没想过会这么简单 :D +1

【参考方案2】：

HTML：

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