javascript pass media EventListener to html (html5) media.currentTime

Question

*update here is my code edit as you see working) https://codeshare.io/a3ZJ9g

i need to pass on a javascript varible to a html link...

my original question was here HTML5 video get currentTime not working with media events javscript addEventListener

working code:

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

  // durationchange
  var isdurationchange = function(e) {
    $("#output").html(media.currentTime);
 var x = document.createElement("a");

  };


 media.addEventListener("timeupdate", isdurationchange, true)
 </script>

that code works but i need it to echo the currentTime value to the html page such as

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

so it would print out

 <a href=time.htm?currentTime=currenttimefromjavascript>link</a>

thank you

i did read: how to pass javascript variable to html tag

How can I pass value from javascript to html?

someone suggested:

 // insert the `a` somewhere appropriate so it can be clicked on:
 const a = document.body.appendChild(document.createElement("a"));
 a.textContent = 'Link to current time';
 const isdurationchange = function(e) {
 a.href = `\\time.htm?currentTime=${media.currentTime}`;
};

but where does that go?

I don't think that a constantly changing href=url will affect another page unless it gets clicked. Wouldn't it make more sense to just get currentTime when the link is actually clicked? — zer00ne, Mar 24 '18 at 05:40

CertainPerformance · Accepted Answer · 2018-03-24T05:04:42.790

0

document.write tries to write to the current document. If the document has already been processed, the document will be replaced with a blank one with your argument. You don't want that; use the proper DOM methods instead.

If, for an element you create dynamically, you want to change its href on every timeupdate, you would do:

// insert the `a` somewhere appropriate so it can be clicked on:
const a = document.body.appendChild(document.createElement("a"));
a.textContent = 'Link to current time';
const isdurationchange = function(e) {
  a.href = `\\time.htm?currentTime=${media.currentTime}`;
};

edited Mar 24 '18 at 05:04

answered Mar 24 '18 at 04:59

CertainPerformance

356,069
52
309
320

thanks but iam still confused on where that would go.................. i tried a few places – Mar 24 '18 at 06:21
Where what would go? If you're asking about the `a`, it's up to you, insert it wherever you think would look nicest so that users can click on it. – CertainPerformance Mar 24 '18 at 06:23
well i put in the script tag and i see nothing – Mar 24 '18 at 06:32
If you want people to see a dynamically created element, you should put it in the body somewhere, as a child of a proper element, not as a child of a `script` tag – CertainPerformance Mar 24 '18 at 06:36
i put in the body nothing shows up – Mar 24 '18 at 06:39
I was showing you how to define the `a` and the `isdurationchange` function - you should put it in the context of your full script, of course, with `var media = document.getElementById('myVideo');` and `media.addEventListener("timeupdate", isdurationchange, true)` – CertainPerformance Mar 24 '18 at 06:43
here is the code you can edit with codeshare thank you – Mar 24 '18 at 06:55
Don't re-declare `a` and `isdurationchange`, that won't work, you have to replace the parts of the old code with the new... https://jsfiddle.net/c3pgxa8k/ – CertainPerformance Mar 24 '18 at 07:01
thanks , although i got ti working thanks you , i will never figure out hwo it works. i get php, timer function in visual basic .. your code puts the link at the very bottom of the page............. even if its within a div – Mar 24 '18 at 07:10
That's why I said "insert the `a` somewhere appropriate so it can be clicked on", it's your HTML, you can figure out where to put it – CertainPerformance Mar 24 '18 at 07:11
where ever i add the script you provided the "link to time" displays at teh very last line. – Mar 24 '18 at 07:15
That's why I said you should insert the `a` wherever you want, don't just copy my code character-for-character - you have to decide where to put the `a` that gets inserted, it's your site. – CertainPerformance Mar 24 '18 at 07:20
CertainPerformance - im not trying to go line by line copy, i am trying to figure it out from scratch........ – Mar 24 '18 at 07:50
i put a.textContent = 'Link to current time'; in script tags but it did not print anything – Mar 24 '18 at 07:51

javascript pass media EventListener to html (html5) media.currentTime

1 Answers1