logo标签列表

HTML5视频的当前/持续时间是什么？

jqueryhtmltimehtml5-videoduration
50
我需要一种使用jQuery获取视频总时长和当前时间并在几个
标签中显示的方法。
<div id="current">0:00</div>
<div id="duration">0:00</div>

我已经搜寻了一整天，我知道如何获取它们，但却无法显示出来。#jquery初学者

您可以在Video标签的timeupdate事件中获取currentTime和duration值。 - Mr_Green
6个回答
59

HTML：

<video
    id="video-active"
    class="video-active"
    width="640"
    height="390"
    controls="controls">
    <source src="myvideo.mp4" type="video/mp4">
</video>
<div id="current">0:00</div>
<div id="duration">0:00</div>

JavaScript：

$(document).ready(function(){
  $("#video-active").on(
    "timeupdate", 
    function(event){
      onTrackedVideoFrame(this.currentTime, this.duration);
    });
});

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime); //Change #current to currentTime
    $("#duration").text(duration)
}

注：

每15到250毫秒或者每当MediaController的媒体控制器位置变化时，以最少发生的情况为准，用户代理必须排队一个任务，在MediaController上触发一个名为timeupdate的简单事件。

http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position

1
不使用jQuery可以吗？ - zok
1
@zok - 这里只使用了jQuery作为选择器。 可以直接使用document.getElementById('video-name')。 - Tom
1
如果只有一个mp4视频，这似乎无法正常工作。 - lharby
23

这个页面可能会帮到你。 HTML5视频和音频的全部知识

var video = document.createElement('video');
var curtime = video.currentTime;

如果您已经有了视频元素，.currentTime应该可以工作。 如果需要更多详细信息，那个网页应该能够帮助。

18

这里有一个实际的示例： http://jsfiddle.net/tQ2CZ/1/

HTML

<div id="video_container">
<video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="none" controls="" id="video" tabindex="0">
    <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
    <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
    <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>

<div>Current Time : <span  id="currentTime">0</span></div>
<div>Total time : <span id="totalTime">0</span></div>

JS

$(function(){
$('#currentTime').html($('#video_container').find('video').get(0).load());
$('#currentTime').html($('#video_container').find('video').get(0).play());
})
setInterval(function(){
$('#currentTime').html($('#video_container').find('video').get(0).currentTime);
$('#totalTime').html($('#video_container').find('video').get(0).duration);    
},500)
当源文件只有mp4视频时，这种方法不起作用（没有webm或ogg）。因此，我认为持续时间必须仅存在于其他格式中。 - lharby
根据我在 https://stackoverflow.com/questions/41503253/custom-html5-video-controls-not-working-when-mp4-is-the-only-source/41514594#41514594 的回答，只有在视频的元数据加载完成后，duration 才可用。 - Offbeatmammal
2
2
这里的答案不允许寻找/擦除。如果您快速寻找/擦除，尤其是这样做时，您需要此代码或currentTime将无法快速更新。
// Get the <video id="myVideo"> element
const video = document.getElementById('myVideo')

// updates currentTime when playing
video.ontimeupdate = evt => this.currentTime = evt.target.currentTime

// updates currentTime when seeking / scrubbing
video.onseeking = evt => this.currentTime = evt.target.currentTime

// updates currentTime when paused / video ends
video.onpause = evt => this.currentTime = evt.target.currentTime

我也推荐以下内容：

// when resuming playback, fires quicker than ontimeupdate 
video.onplay = evt => this.currentTime = evt.target.currentTime

// when resuming playback, fires quicker than ontimeupdate 
video.onplaying = evt => this.currentTime = evt.target.currentTime

您可能不需要这最后两个事件，但过度使用也没有坏处。
其他值得一提的事件： video.onseeked 似乎与 video.ontimeupdate 同时触发，因此无需为获取 currentTime 而监听它。这仅在 Chrome 上进行了测试。 video.onended 似乎与 video.onpause 同时触发，因此无需为获取 currentTime 而监听它。这仅在 Chrome 上进行了测试。
所有可用事件都记录在 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement 中。
如果您在此帖子中使用了所有建议的事件，则应发现 currentTime 更新很快。但是，您可能希望有多个事件侦听器监听同一事件，从而可以随意添加或删除它们。如果是这样，我建议使用以下方法：

https://dev59.com/Mm035IYBdhLWcg3wC7cR#69273090

2

https://www.w3schools.com/tags/av_event_timeupdate.asp 

// Get the <video> element with id="myVideo"
var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the <video> element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
// Display the current position of the video in a <p> element with id="demo"
    document.getElementById("demo").innerHTML = vid.currentTime;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接