एचटीएमएल 5 वीडियो के वर्तमान/अवधि का समय?

Question

मुझे वीडियो की कुल समय की लंबाई और वर्तमान समय jquery के साथ प्राप्त करने और इसे <div> टैग में प्रदर्शित करने का एक तरीका चाहिए।

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

मैं पूरे दिन खोज रहा हूं और मुझे पता है कि उन्हें कैसे प्राप्त किया जाए, मैं उन्हें प्रदर्शित नहीं कर सकता। #jquerynoob

Answer 1

यह पृष्ठ आपकी मदद कर सकता है। Everything you need to know about HTML5 video and audio

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

आप पहले से ही वीडियो तत्व है, तो .currentTime काम करना चाहिए। यदि आपको अधिक जानकारी चाहिए, तो वह वेबपृष्ठ मदद करने में सक्षम होना चाहिए।

Answer 2

मुझे लगता है कि आप इसे प्लेयर के हिस्से के रूप में प्रदर्शित करना चाहते हैं।

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

यह भी एक विशिष्ट div के लिए सेट करने का तरीका बताएगी:

इस साइट में कैसे दोनों वर्तमान और कुल समय की परवाह किए बिना प्राप्त करने के लिए आप हालांकि jQuery का उपयोग कर इसे प्रदर्शित करना चाहते हैं की टूट जाती है । जैसा कि फिलिप ने पहले से ही उल्लेख किया है, .currentTime आपको वीडियो में कहां देगा।

Answer 3

पर यहाँ उदाहरण कार्य करना: http://jsfiddle.net/tQ2CZ/1/

एचटीएमएल

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

जे एस

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

Answer 4

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

नोट्स:

हर 15 250ms करने के लिए, या जब भी MediaController के मीडिया नियंत्रक स्थिति में परिवर्तन, इनमें से जो भी कम से कम अक्सर ऐसा होता है, उपयोगकर्ता एजेंट चाहिए मीडियाकंट्रोलर पर टाइमअपडेट नामक एक साधारण घटना को आग लगाने के लिए एक कार्य कतार करें।

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

Answer 5

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