html5視頻的當前/持續時間？

Question

我需要一種方式獲得視頻的總時間長度和當前時間與jquery和顯示它的幾個<div>標籤。

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

我一直在搜索整天，我知道如何讓他們我只是不能顯示他們。 #jquerynoob

Answer 1

此頁面可能會對您有所幫助。 Everything you need to know about HTML5 video and audio

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

如果您已經擁有了視頻元素，.currentTime應該工作。如果你需要更多的細節，該網頁應該能夠提供幫助。

Answer 2

我假設你想顯示這個作爲播放器的一部分。

本網站打破瞭如何獲得當前和總時間不管你怎麼想，雖然使用jQuery顯示它：

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

這也將討論如何將它設置爲一個特定的div 。正如菲利普已經提到的那樣，.currentTime會給你你在視頻中的位置。

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

Answer 4

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

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