在HTML5视频中,如何播放长视频中的小片段?

use*_*116 13 html5 html5-video

我想在长达10多分钟的长视频文件中显示一个小剪辑.该视频片段将在90秒的时间偏移/寻找时间开始,并且持续时间为45秒.我怎样才能做到这一点 ?

Jim*_* S. 39

HTML5视频还支持Media Fragment URI规范.这将允许您仅指定要播放的视频片段.使用它是相当简单的:

<source src="video.mp4#t=30,45" type="video/mp4"/>
Run Code Online (Sandbox Code Playgroud)

将以30秒标记开始播放视频,并以45秒标记暂停视频.

  • 请注意,我注意到Chrome会继续下载视频的其余部分.它会在45秒内暂停视频,但用户可以从该点恢复播放.如果您将此视为限制流量或切断视频其余部分的方法,则这不是您的解决方案. (6认同)

lon*_*ngi 10

菲利普布朗是对的.你可以通过js控制你的html播放器来解决这个问题.例如,在这种情况下,视频将自动启动并将播放视频文件应在00:10分钟到00:40分钟

<video id="yourVideoplayer" width="640" height="480" preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already
  <source src="test.mp4" type="video/mp4" />
  <source src="test.ogv" type="video/ogg" /> 
  This browser is not compatible with HTML 5
</video>

<script type="text/javascript">
   window.onload = playVideoTeaserFrom(10,40);   //this event will call the function after page was loaded

   function playVideoTeaserFrom (startTime, endTime) {
       var videoplayer = document.getElementById("yourVideoplayer");  //get your videoplayer

       videoplayer.currentTime = starttime; //not sure if player seeks to seconds or milliseconds
       videoplayer.play();

       //call function to stop player after given intervall
       var stopVideoAfter = (endTime - startTime) * 1000;  //* 1000, because Timer is in ms
       setTimeout(function(){
           videoplayer.stop();
       }, stopVideoAfter);

   }
 </script>
Run Code Online (Sandbox Code Playgroud)

可能会有一些错误,但我想你会明白这一点

  • 这是一个糟糕的解决方案 - 如果用户与视频交互(例如暂停),它将完全扭曲TO计算.要解决这个问题你应该听'timeupdate`事件,如果`vid.currentTime`不是从开始到结束,则暂停视频 (2认同)