我需要一种使用jQuery获取视频总时长和当前时间并在几个
标签中显示的方法。
<div id="current">0:00</div>
<div id="duration">0:00</div>
我已经搜寻了一整天,我知道如何获取它们,但却无法显示出来。#jquery初学者
<div id="current">0:00</div>
<div id="duration">0:00</div>
我已经搜寻了一整天,我知道如何获取它们,但却无法显示出来。#jquery初学者
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
这个页面可能会帮到你。 HTML5视频和音频的全部知识
var video = document.createElement('video');
var curtime = video.currentTime;
如果您已经有了视频元素,.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>
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)
duration
才可用。 - Offbeatmammalhttp://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
这也将涵盖如何将其设置为特定的 div。正如 Philip 已经提到的那样,.currentTime 将告诉您视频的播放位置。currentTime
将无法快速更新。// Get the <video id="myVideo"> element
const video = document.getElementById('myVideo')
// updates currentTime when playing
video.ontimeupdate = evt => this.currentTime = evt.target.currentTime
// updates currentTime when seeking / scrubbing
video.onseeking = evt => this.currentTime = evt.target.currentTime
// updates currentTime when paused / video ends
video.onpause = evt => this.currentTime = evt.target.currentTime
我也推荐以下内容:
// when resuming playback, fires quicker than ontimeupdate
video.onplay = evt => this.currentTime = evt.target.currentTime
// when resuming playback, fires quicker than ontimeupdate
video.onplaying = evt => this.currentTime = evt.target.currentTime
video.onseeked
似乎与 video.ontimeupdate
同时触发,因此无需为获取 currentTime
而监听它。这仅在 Chrome 上进行了测试。
video.onended
似乎与 video.onpause
同时触发,因此无需为获取 currentTime
而监听它。这仅在 Chrome 上进行了测试。currentTime
更新很快。但是,您可能希望有多个事件侦听器监听同一事件,从而可以随意添加或删除它们。如果是这样,我建议使用以下方法:
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;
}
Video
标签的timeupdate
事件中获取currentTime
和duration
值。 - Mr_Green