我需要一种方法来获取视频的总时长和使用 jquery 的当前时间并将其显示在几个
<div id="current">0:00</div>
<div id="duration">0:00</div>
我整天都在搜索，我知道如何获得它们，但我无法显示它们。 #jquerynoob
【问题讨论】：
Video标签的timeupdate事件中获取currentTime和duration值。
标签： jquery html time html5-video duration
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 的媒体控制器 位置变化，无论哪个发生频率最低，用户代理必须 排队一个任务以触发一个名为 timeupdate 的简单事件 媒体控制器。
http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position
【讨论】：
此页面可能会对您有所帮助。 Everything you need to know about HTML5 video and audio
var video = document.createElement('video');
var curtime = video.currentTime;
如果您已经拥有视频元素，则 .currentTime 应该可以工作。如果您需要更多详细信息，该网页应该可以提供帮助。
【讨论】：
工作示例：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)
【讨论】：
duration 仅在为视频加载元数据后才可用
我假设您想将其显示为播放器的一部分。
这个网站分解了如何获取当前时间和总时间，不管你想如何通过使用 jQuery 来显示它：
http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
这还将介绍如何将其设置为特定的 div。正如 philip 已经提到的，.currentTime 会告诉你你在视频中的位置。
【讨论】：
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;
}
【讨论】：
这里的答案不允许寻找/擦洗。您需要此代码，否则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 更新很快。但是，您可能希望让多个事件侦听器侦听同一事件，从而允许您随意添加或删除它们。如果是这样，我推荐这种方法：
【讨论】：