html5视频的当前/持续时间？

问题描述：

我需要一种方式获得视频的总时间长度和当前时间与jquery和显示它的几个<div>标签。html5视频的当前/持续时间？

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

我一直在搜索整天，我知道如何让他们我只是不能显示他们。 ~~#jquerynoob~~

您可以在''Video'标签的timeupdate'事件得到'currentTime'和'duration'值。 – 2015-11-24 06:40:50

答

此页面可能会对您有所帮助。 Everything you need to know about HTML5 video and audio

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

如果您已经拥有了视频元素，.currentTime应该工作。如果你需要更多的细节，该网页应该能够提供帮助。

答

我假设你想显示这个作为播放器的一部分。

本网站打破了如何获得当前和总时间不管你怎么想，虽然使用jQuery显示它：

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

这也将讨论如何将它设置为一个特定的div 。正如菲利普已经提到的那样，.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>

$(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)

当只有源视频（无webm或ogg）时，此功能无效。所以我认为这个持续时间只能存在于其他格式中。根据我对https：// stackoverflow的回答，我找到了 – lharby 2017-01-06 09:10:10

。com/questions/41503253/custom-html5-video-controls-not-working-when-mp4-is-only-source/41514594＃41514594，'duration'只可用于元数据加载后的视频 – Offbeatmammal 2017-01-06 21:29:34

答

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

是有可能没有jQuery呢？ – zok 2015-12-04 11:04:54

@zok - jQuery只被用作这里的选择器。请改用document.getElementById（'video-name'）。 – Tom 2016-01-17 11:39:36

如果只有mp4视频，这似乎不起作用。 – lharby 2017-01-06 09:09:33

答

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

html5视频的当前/持续时间？

相关推荐