Текущее время/продолжительность видео html5?

Мне нужен способ получения общей длительности видео и текущего времени с помощью jquery и отображения его в паре <div> теги.

<div id="current">0:00</div>
<div id="duration">0:00</div>

Я искал весь день, и я знаю, как их получить, я просто не могу их отобразить. <Ы > #jquerynoob

Ответы

Ответ 1

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 на MediaController.

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

Ответ 2

Эта страница может помочь вам. Все, что вам нужно знать о видео и аудио HTML5

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

Если у вас уже есть элемент видео, то должен работать .currentTime. Если вам нужна дополнительная информация, эта веб-страница должна помочь.

Ответ 3

Рабочий пример здесь: 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)

Ответ 4

Я предполагаю, что вы хотите отобразить это как часть проигрывателя.

Этот сайт разбивает, как получить текущее и общее время независимо от того, как вы хотите отображать его, используя jQuery:

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

Здесь также рассказывается, как установить его для определенного div. Как уже говорил philip,.currentTime даст вам, где вы находитесь в видео.

Ответ 5

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