使用Javascript当前时间功能

问题描述：

我试图让我的自定义视频控件显示视频的当前时间。但是我无法让它运作。我在代码中缺少什么？使用Javascript当前时间功能

JavaScript代码

var time = document.getElementById("current"); 

time.addEventListener("timeupdate", currentTime, true); 

// Current time function 

function currentTime() { 

    var currentMinutes = Math.floor(video.currentTime/60); 
    var currentSeconds = Math.floor(video.currentTime - currentMinutes * 60); 


    time.innerHTML = currentMinutes + ":" + currentSeconds;  
}

HTML5

<div id="time"> 
    <span id="current">00:00</span> 
    <span id="duration">00:00</span> 
</div>

您希望在该“”元素上触发“timeupdate”事件是什么？ – Pointy

答

你需要有一个事件触发器关的事件。由于您使用的是视频，因此我会使用视频ontimeupdate事件。

显示时间似乎有问题。但我得到了视频事件的东西，在这个提琴在这里工作：https://jsfiddle.net/83peL34r/

的Javascript：

var time = document.getElementById("current"); 
var video = document.getElementById("video"); 

time.addEventListener("timeupdate", currentTime, true); 
video.ontimeupdate = function() {currentTime()}; 

// Current time function 

function currentTime() { 

    var currentMinutes = Math.floor(video.currentTime/60); 
    var currentSeconds = Math.floor(video.currentTime - currentMinutes * 60); 


    time.innerHTML = currentMinutes + ":" + currentSeconds; 

}

HTML：

<video id="video" width="400" controls> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
</video> 
<div id="time"> 
    <span id="current">00:00</span> 
    <span id="duration">00:00</span> 
</div>

编辑：我做了一些改动，让你远一点。在这一个中，它抓取持续时间并将其放入持续时间部分。如果秒数小于10，则在它前面填上0。

https://jsfiddle.net/83peL34r/1/

谢谢Joshua Terrill。这真的很有帮助。我会确保我记得这一点。 –

答

我假设你有这样的事情：

<video id="myVideo" width="320" height="176" controls> 
    <source src="mov_bbb.mp4" type="video/mp4"/> 
    <source src="mov_bbb.ogg" type="video/ogg"/> 
</video> 

<div id="time"> 
    <span id="current">00:00</span> 
    <span id="duration">00:00</span> 
</div>

这样做：

var video = document.getElementById('myVideo'); 
var currentTime = document.getElementById('current'); 
video.addEventListener('timeupdate', function() { 
    var currentMinutes = Math.floor(video.currentTime/60); 
    var currentSeconds = Math.floor(video.currentTime - currentMinutes * 60); 

    currentTime.innerHTML = currentMinutes + ":" + currentSeconds; 
});

在你的代码，你加入了timeupdate事件监听到你的跨度。您应该将其添加到视频元素。

使用Javascript当前时间功能

相关推荐