Pause videos using class name

1

Hi, I have a whole whack of little videos that I need to pause at some point using a tap action on a button. Rather than creating a function for each video can I just give them all a class name and use one pause function for all of them? Or is there a better way? I have tried this but doesn't seem to work:

hypeDocument.getElementsByClassName("small_videos").pause()

Thanks!

2

There's two general issues with your code:

  1. The hypeDocument object does not have a getElementsByClassName() method. Instead you should use the standard document object or an element for a scoped search. (hypeDocument does have getElementById() which is needed as there are some circumstances where the hype runtime may need to rewrite the actual object ID on the page but your code is expecting a set ID)

  2. getElementsByClassName() returns an array, so you cannot call pause() on its return value and must instead iterate all of its elements.

Here's what more proper code would look like:

var elements = document.getElementsByClassName("small_video");
for(var i  = 0; i< elements.length; i++) {
    elements[i].pause();
}

This assumes that you have set the "small_video" class properly on an actual video element; if you use the basic video element in Hype and set the class name in the Identity Inspector this will work as expected.

Do note that I changed the class name to the singular version instead of plural "small_videos" as class names are usually singular and the result of getElementsByClassName() thus becomes plural referring to the list.

3

Hi Jonathan, thanks so much for you help! I still might be doing something wrong. Can you have a look a my little sample? Thanks.

pause_test.hype.zip (426.3 KB)

4

i<elements.length

var elements = [ ... document.getElementsByClassName("small_video") ];

for(var i  = 0; i< elements.length; i++) {
    elements[i].pause();
}
1 Like
5

Thank you Hans and Jonathan! Perfect. Another reason I love Hype so much...the people that are so willing with their time and expertise to help others.

Cheers!

1 Like
6

Oh shoot! Sorry about that typo... I must be losing it :slight_smile:. Thanks @h_classen for the quick correction.

(I've corrected via edit above)

7

Hi Jonathan and @h_classen thank you for your help on this resource! Check out the finished Social Studies 4-6 piece!

https://www.learnalberta.ca/content/sszi/en/index.html

Cheers,
Maurice

7 Likes
8

Wow, great job with the video integration on that piece! (I also like some of the other effects like the panning around, which I assume is via controlling a timeline). Well done :slight_smile:.

1 Like
9

Thank you! Hype is so awesome to use.

1 Like
10

from western germany i get ERR_CONNECTION_TIMED_OUT while trying to access the your domain?

11

Hello Hans, were you able to get in? I don't think they are blocking anything by country. Try going to www.learnalberta.ca

And then search for "Zooming In"

Cheers,
Maurice