HTML5 video get currentTime not working with media events javascript addEventListener

Question

Im trying to show the current duration (print currenttime live) when the video is playing.

I did read Kurt Van den Branden answer on Detect if HTML5 Video element is playing but to no avail

i eventually want to carry the currenttime value to a php variable $currenttime below is my current code

<html> 
<head>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head> 
<body >
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
    <source src="http://action.news/videos/Britney%20Spears%20-%20Overprotected%20(2009)%20Full%20HD%201080p_60%20fps.mp4" type="video/mp4">
</video>

<script>
    var media = document.getElementById('myVideo');

    // Playing event
    var isPlaying = function(e) {
    #$("#output").html("Playing event triggered");

    };

      // durationchange
    var isdurationchange = function(e) {
        $("#output").html(vid.currentTime);


    };

    media.addEventListener("playing", isPlaying, false);   
    media.addEventListener("durationchange", isdurationchange, true);    
</script>   
</body> 
</html>

You define `media` but then use `vid.currentTime`...? – Jeto Mar 18 '18 at 22:11 — Jeto, Mar 18 '18 at 22:11
i need to pass it to html .. document.write("link;); – Mar 24 '18 at 04:47 — , Mar 24 '18 at 04:47

scraaappy · Answer 1 · 2018-03-19T00:27:19.110

0

listen event timeupdate instead of durationchange (also correct your typo error as @Jeto mentions in comment)

var media = document.getElementById('myVideo');

    // Playing event
    var isPlaying = function(e) {
    $("#output").html("Playing event triggered");

    };

      // durationchange
    var isdurationchange = function(e) {
        $("#output").html(media.currentTime);
    };

    media.addEventListener("playing", isPlaying, false);   
 //   media.addEventListener("durationchange", isdurationchange, true);   
 
  media.addEventListener("timeupdate", isdurationchange, true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
    <source src="http://fiber.westnet.ca:81/videos/Britney%20Spears%20-%20Overprotected.mp4" type="video/mp4">
</video>

edited Mar 19 '18 at 00:27

answered Mar 18 '18 at 23:18

scraaappy

2,830
2
19
29

thanks is possible to transfer the current time to a php variiable? – Mar 18 '18 at 23:24
and instead of milisecond time display the format from the video which is H:M:S i searched w3schools to no avial – Mar 18 '18 at 23:30
i tried to carry it to a url &ft>
but no luck – Mar 18 '18 at 23:51
thansk for your help, if my filename has ?& etc in it how do i access it via apache? i tried rewrite htaccess to no avial – Mar 18 '18 at 23:54
scraaappy is the answer i am new to this what do i do to reward him/you – Mar 19 '18 at 06:29
Hello Nance, welcome to SO. If the answer brings you a solution and you think it's the best you have received, accept it. If it's just helpfull, upvote (contrary, if it's out of topic or false, downvote). If others question come on the same topic, update your own question without modifying the original one (add a paragraph, with a title like "edit" or "updated"), or post another question (before posting, be sure to check that the question has not already been asked on SO, otherwise, it will be downvoted) – scraaappy Mar 19 '18 at 09:19
For example, see here to format your output: https://stackoverflow.com/questions/29816872/how-can-i-convert-milliseconds-to-hhmmss-format-using-javascript or here to send variable from javascript to php https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php Also check https://stackoverflow.com/help/how-to-ask – scraaappy Mar 19 '18 at 09:20
still not working i need to pass the current time to a url a href=file.htm?currentime=currenttime – Mar 24 '18 at 06:41

score 0 · Accepted Answer · answered Mar 24 '18 at 04:42

0

you should be able to carry it like this , the pros will help you with syntax

 document.write("<a href=/time.htm?currentTime='.media.addEventListener("timeupdate", isdurationchange, true).'>link</a>;);

answered Mar 24 '18 at 04:42

DOMDocumentVideoSource

626
1
7
16

thanks thats what i pretty much want but it wont work. – Mar 24 '18 at 04:47

HTML5 video get currentTime not working with media events javascript addEventListener

2 Answers2

Linked