加载时从特定位置开始 HTML5 视频?

发布于 2024-11-07 00:48:41 字数 459 浏览 3 评论 0原文

我需要 HTML5 视频在某个时刻开始。假设时间为 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> 

页面加载时,它只是从头开始播放。 但是,如果我在播放过程中(比如一段时间后)调用它,它就可以正常工作。 我有什么遗漏的吗?

I need HTML5 video to start at certain point. Let's say at time 50 seconds onward.

I tried but its not working as expected. is there something i am doing wrong?

Here is the code:

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

When the page loads, it just starts playing from beginning.
However if I call this during playback like after some time, it works fine.
Is there anything I am missing?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

金兰素衣 2024-11-14 00:48:41

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

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

You have to wait until the browser knows the duration of the video before you can seek to a particular time. So, I think you want to wait for the 'loadedmetadata' event something like this:

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

不使用 JavaScript

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

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

注释: IE 不支持

WITHOUT USING JAVASCRIPT

Just add #t=[(start_time), (end_time)] to the end of your media URL. The only setback (if you want to see it that way) is you'll need to know how long your video is to indicate the end time.
Example:

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

Notes: Not supported in IE

风流物 2024-11-14 00:48:41

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

这是一个示例

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

You can link directly with Media Fragments URI, just change the filename to file.webm#t=50

Here's an example

This is pretty cool, you can do all sorts of things. But I don't know the current state of browser support.

水水月牙 2024-11-14 00:48:41

调整html5中使用video标签时的视频开始和结束时间;

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

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

adjust video start and end time when using the video tag in html5;

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

where left of comma is start time in seconds, right of comma is end time in seconds.
drop the comma and end time to effect the start time only.

冷了相思 2024-11-14 00:48:41

在 Safari Mac 上的 HLS 源中,我需要使用 returneddata 事件而不是元数据事件。

On Safari Mac for an HLS source, I needed to use the loadeddata event instead of the metadata event.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文