Jqueryを使用してビデオの合計時間と現在の時間を取得し、いくつかの<div>タグで表示する方法が必要です。
<div id="current">0:00</div>
<div id="duration">0:00</div>
私は一日中検索していましたが、それらを取得する方法は知っていますが、表示することはできません。 #jquerynoob
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が機能するはずです。さらに詳しい情報が必要な場合は、そのWebページが役立つはずです。
ここの作業例: 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)
これをプレーヤーの一部として表示することを想定しています。
このサイトでは、jQueryを使用して表示する方法に関係なく、現在時間と合計時間の両方を取得する方法を分析します。
http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
また、特定のdivに設定する方法についても説明します。 philipが既に述べたように、.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;
}