加载时在特定位置启动HTML5视频?

时间:2011-05-12 16:40:22

标签: javascript html5-video

我正在尝试播放HTML5视频(VP8编码)。我想要的是在某个位置玩它。让我们说50秒后的时间。

我试过但似乎有些问题。你能否说一下我做错了什么?

以下是代码:

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script> 

我已经尝试但它不起作用。视频加载时,它从刚开始播放。但是,如果我在播放过程中调用它,就像播放视频一段时间后它可以正常工作。有什么我想念的吗?

6 个答案:

答案 0 :(得分:105)

您必须等到浏览器知道视频的持续时间才能寻找特定时间。所以,我想你想要等待'loadedmetadata'事件,如下所示:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);

答案 1 :(得分:43)

您可以直接与Media Fragments URI关联,只需将文件名更改为 file.webm #t = 50

Here's an example

这很酷,你可以做各种各样的事情。但我不知道浏览器支持的当前状态。

答案 2 :(得分:38)

不使用JAVASCRIPT

只需将#t=[(start_time), (end_time)]添加到媒体网址的末尾即可。唯一的挫折(如果您希望以这种方式看到它)是您需要知道您的视频指示结束时间的长度。 示例:

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

注意: IE不支持

答案 3 :(得分:26)

在html5中使用视频标记时调整视频开始和结束时间;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

逗号左边是以秒为单位的开始时间,逗号右边是以秒为单位的结束时间。 删除逗号和结束时间仅影响开始时间。

答案 4 :(得分:4)

使用#t=10,20片段为我工作。

答案 5 :(得分:3)

在Safari Mac上,对于HLS源,我需要使用loadeddata事件而不是元数据事件。