wake-up-neo.net

aktuelle/Dauer des HTML5-Videos?

Ich brauche einen Weg, um die Gesamtzeitdauer des Videos und die aktuelle Uhrzeit mit jquery abzurufen und in einigen <div> -Tags anzuzeigen.

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

Ich habe den ganzen Tag gesucht und weiß, wie ich sie bekomme. Ich kann sie einfach nicht anzeigen. #jquerynoob

35
Cody

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

Anmerkungen:

Alle 15 bis 250 ms oder wenn der Media Controller des MediaControllers Positionsänderungen, je nachdem, was am seltensten geschieht, muss der Benutzeragent Eine Task in eine Warteschlange stellen, um ein einfaches Ereignis mit dem Namen timeupdate am .__ auszulösen. MediaController.

http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position

49
Thomas Bratt

Diese Seite kann Ihnen helfen. Alles was Sie über HTML5 Video und Audio wissen müssen

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

Wenn Sie das Videoelement bereits haben, sollte .currentTime funktionieren. Wenn Sie weitere Informationen benötigen, sollte diese Webseite helfen können.

17
Philip Tinney

Arbeitsbeispiel hier: 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)
12
Mandeep Pasbola

Ich gehe davon aus, dass Sie dies als Teil des Players anzeigen möchten.

Diese Site beschreibt, wie Sie sowohl die aktuelle als auch die Gesamtzeit abrufen können, unabhängig davon, wie Sie sie mit jQuery anzeigen möchten:

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

Hier erfahren Sie auch, wie Sie ein bestimmtes div festlegen. Wie bereits erwähnt, gibt Ihnen .currentTime an, wo Sie sich im Video befinden.

2
Mike Veigel

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;
}
0
Patrick C