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

我需要一种方法来获取视频的总时间长度和jquery的当前时间，并将其显示在几个标记中

0:00
0:00

---

我已经搜索了一整天，我知道如何获取它们，但我无法显示它们#jquerynoob

此页面可能会帮助您

---

如果您已经有了视频元素，.currentTime应该可以工作。如果您需要更多详细信息，该网页应该能够提供帮助。

我假设您希望将其显示为播放器的一部分

本网站详细介绍了如何通过使用jQuery获取当前时间和总时间，而不管您希望如何显示：

---

本节还将介绍如何将其设置为特定的div。正如philip已经提到的，.currentTime将提供您在视频中的位置。

此处的工作示例：

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>

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>

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

注意事项：

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

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

//获取id=“myVideo”的元素
var vid=document.getElementById（“myVideo”）；
//为元素指定ontimeupdate事件，如果当前播放位置已更改，则执行函数
vid.ontimeupdate=function（）{myFunction（）}；
函数myFunction（）{
//使用id=“demo”在元素中显示视频的当前位置
document.getElementById（“demo”）.innerHTML=vid.currentTime；
}

您可以在

Video

标记的

timeupdate

事件中获取

currentTime

和

duration

值。是否可以不使用jQuery执行此操作？@zok-jQuery仅用作此处的选择器。只需使用document.getElementById（'video-name'）。如果只有mp4视频，这似乎不起作用。当源只有mp4视频（没有webm或ogg）时，这不起作用。因此，我认为持续时间必须只存在于其他格式。根据我对的回答，

持续时间只有在为视频加载元数据后才可用
$(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)
}

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