0

I'm fairly new to coding so please excuse my lack of knowledge and misuse of terminology. Basically, I have a few videos that display on my web page. I want them to start at 1 second in. The #t=1 trick doesn't work in IE, unfortunately, so I found the JS code below. I've added this to my body.js file, and it works on the first video where I've assigned the ID to, but then it stops. I understand that I need to use Class instead of ID, as ID can only be run once.

The question is, how do I rewrite the JS code so that it becomes a class, which I can then assign to the video tag as <video class="timedel"...>.

I hope that's clear, and thank you very much for any assistance.

My JS code:

document.getElementById('timedel').addEventListener('loadedmetadata', function() {
  this.currentTime = 1;
}, false);

My HTML code:

<video id="timedel" width="160px" height="120px" controls="true">

Actual: Only the first video starts at 1 second in. Desired: I'd like all videos that reference the JS code to start at 1 second in.

2 Answers 2

1

To use a class instead change the javascript Id part to say Class. I've not tested it out, but this should work

document.getElementsByClassName('timedel').addEventListener('loadedmetadata', function() { this.currentTime = 1; }, false);

then the video element needs to have that class name

<video class="timedel" width="160px" height="120px" controls="true">

11
  • Updated my code as I got the method name wrong first time.
    – Chillin'
    Commented Oct 2, 2019 at 10:03
  • Thanks for your quick response. It seems like that should work, but unfortunately, it doesn't appear to work on any videos. If I return back to getElementById, then it does work, but only on the first video. I'm wondering if something else is wrong in my code. I'll have a play around. Thanks again for your help.
    – JamesR
    Commented Oct 2, 2019 at 11:05
  • It should work. an Id is used to uniquely identify an element. A class can group them together. So 5 elements can all have the same class but unique ID's. If it works with an id then it must with a class. Did you definitely change the video element to have a class name instead of an ID?
    – Chillin'
    Commented Oct 2, 2019 at 12:29
  • Alternatively, if you want to keep the ID but get it working for all of them, then change the first video ID name to videoOne and use getEmelentById(videoOne). Then, on your next video, use ID videoTwo and copy the same javascript code, changing the ID the its respective ID name. Do that for all videos. So you should have 5 pieces of javascript doing the same thing but controlling different IDs. You can keep them in the same js file. Its a longer route, and class would be better, but it should work the same way
    – Chillin'
    Commented Oct 2, 2019 at 12:31
  • Hello. Thanks for the additional input. Yep, I changed the video element to reference a class name, but it didn't work for some reason. Your code does look spot on, so I've gone back to one of our technical guys with the proposed solution to see if he can take a look at the rest of the code, as something must be stopping your code from working. As for the other solution that you've proposed, I did try that and it worked, so we may go for that solution with using ids. I think we're talking about 20 videos on each page max, so it wouldn't be too big an issue. Thanks for following up with that :)
    – JamesR
    Commented Oct 2, 2019 at 13:15
-1

Another alternative, if you definitely can't use classes to group them together, is to use Id's on your video but you'll need to have multiple javascript methods to control each id.

So you would have

<video id="timedel1" width="160px" height="120px" controls="true">

<video id="timedel2" width="160px" height="120px" controls="true">

<video id="timedel3" width="160px" height="120px" controls="true">

<video id="timedel4" width="160px" height="120px" controls="true">

And in your Jascript code, in the same file, have a method for each id, like so:

document.getElementById('timedel1').addEventListener('loadedmetadata', function() { this.currentTime = 1; }, false);

document.getElementById('timedel2').addEventListener('loadedmetadata', function() { this.currentTime = 1; }, false);

document.getElementById('timedel3').addEventListener('loadedmetadata', function() { this.currentTime = 1; }, false);

document.getElementById('timedel4').addEventListener('loadedmetadata', function() { this.currentTime = 1; }, false);

As stated in my comments to my other answer, this is not the best method because it duplicates code, and the best method would be to use a class that groups them together and only uses the javascript code once. I would like to point out to anyone reading this that the OP has stated that that method does not work and this alternative answer is the one that helped them solve their problem.

1
  • I appreciate that the other solution is cleaner, but for some reason, it didn't work for me. This solution does work though. Thanks.
    – JamesR
    Commented Oct 4, 2019 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.