jQuery html5 视频的当前/持续时间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6380956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
current/duration time of html5 video?
提问by Cody
I need a way of getting the total time length of the video and the current time with jquery and displaying it in a couple of <div> tags.
我需要一种使用 jquery 获取视频总时长和当前时间并将其显示在几个 <div> 标签中的方法。
<div id="current">0:00</div>
<div id="duration">0:00</div>
I've been searching all day and I know how to get them I just can't display them. #jquerynoob
我已经搜索了一整天，我知道如何获取它们，但我无法显示它们。#jquerynoob
回答by Thomas Bratt
HTML:
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:
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)
}
Notes:
笔记：
Every 15 to 250ms, or whenever the MediaController's media controller position changes, whichever happens least often, the user agent must queue a task to fire a simple event named timeupdate at the MediaController.
每 15 到 250 毫秒，或者每当 MediaController 的媒体控制器位置发生变化时，以发生频率最低的为准，用户代理必须将任务排队以在 MediaController 上触发一个名为 timeupdate 的简单事件。
http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position
http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position
回答by Philip Tinney
This page might help you out. Everything you need to know about HTML5 video and audio
此页面可能会帮助您。您需要了解的有关 HTML5 视频和音频的所有信息
var video = document.createElement('video');
var curtime = video.currentTime;
If you already have the video element, .currentTime should work. If you need more details, that webpage should be able to help.
如果您已经拥有视频元素，则 .currentTime 应该可以工作。如果您需要更多详细信息，该网页应该可以提供帮助。
回答by Mandeep Pasbola
Working example here at : http://jsfiddle.net/tQ2CZ/1/
这里的工作示例：http: //jsfiddle.net/tQ2CZ/1/
HTML
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
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)
回答by Mike Veigel
I am assuming you want to display this as part of the player.
我假设您想将其显示为播放器的一部分。
This site breaks down how to get both the current and total time regardless of how you want to display it though using jQuery:
该站点分解了如何获取当前和总时间，而不管您想如何使用 jQuery 显示它：
http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
This will also cover how to set it to a specific div. As philip has already mentioned, .currentTime will give you where you are in the video.
这还将介绍如何将其设置为特定的 div。正如 philip 已经提到的， .currentTime 会告诉你你在视频中的位置。
回答by Patrick C
https://www.w3schools.com/tags/av_event_timeupdate.asp
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;
}
