current/duration time of html5 video?

前端 未结 5 985
青春惊慌失措
青春惊慌失措 2020-11-28 07:23

I need a way of getting the total time length of the video and the current time with jquery and displaying it in a couple of

tags.

相关标签:
5条回答
  • 2020-11-28 07:57

    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 讨论(0)
  • 2020-11-28 08:01

    This page might help you out. Everything you need to know about HTML5 video and audio

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

    If you already have the video element, .currentTime should work. If you need more details, that webpage should be able to help.

    0 讨论(0)
  • 2020-11-28 08:02

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

    Notes:

    Every 15 to 250ms, or whenever the MediaController's media controller position changes, whichever happens least often, the user agent must queue a task to fire a simple event named timeupdate at the MediaController.

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

    0 讨论(0)
  • 2020-11-28 08:04

    Working example here at : 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)
    
    0 讨论(0)
  • 2020-11-28 08:06

    I am assuming you want to display this as part of the player.

    This site breaks down how to get both the current and total time regardless of how you want to display it though using jQuery:

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

    This will also cover how to set it to a specific div. As philip has already mentioned, .currentTime will give you where you are in the video.

    0 讨论(0)
提交回复
热议问题