Stop multiple videos

Is there a way to stop multiple embedded videos with one command. At the moment I use the java script:

var emptyInnerHTML = ‘’;
hypeDocument.getElementById(“Video1”).innerHTML = emptyInnerHTML

Now. could I use a “kill all” command that works with all videos? Or something like:

var emptyInnerHTML = ‘’;
hypeDocument.getElementById. --> (“Video.*”) <-- .innerHTML = emptyInnerHTML

So that all numbers after the element id + Video is stopped = Video1, Video2, Video3 etc.

Or is there any other way to make a global javascript stop?

All the best. Erik

Yes. I would give each video a class and then create an array of all the videos and then use the .pause() property of the video tag.

var videos = document.querySelectorAll(".your-class");
videos.forEach(function(video){
    video.pause();
    // video.currentTime =0; // if you want to go back to beginning
})
3 Likes

Alternatively if you want something that is truly global for the HTML5 <video> tag, you don’t need to assign a class and can use this for the first line from @DBear’s tip:

var videos = document.getElementsByTagName("video");
2 Likes

Thanks Dear and jonathan!

But I just can’t get it to work. Is this method working on embedded Vimeo links as well?
At the moment I have made multiple java scripts connected to one button with the code:

var emptyInnerHTML = ‘’;
hypeDocument.getElementById(“Video1”).innerHTML = emptyInnerHTML

var emptyInnerHTML = ‘’;
hypeDocument.getElementById(“Video2”).innerHTML = emptyInnerHTML

ect…

But I’d love to have the possibility to just run a global one. Maybe I’m just not doing it right…

Which means

var videos = document.getElementsByTagName("video");

    videos.forEach(function(video){
        video.pause();
        // video.currentTime =0; // if you want to go back to beginning
    })

(note that you can use a triple tick ` to begin and end code blocks - makes it easier to read and won’t get reformatted by the forums)

This method only works with the HTML5 <video> tag; vimeo videos are embedded in an iframe and use a separate API. The method that you are using (I assume from this post) will stop the vimeo video by basically removing it entirely. This is probably only appropriate on a scene change where it is okay if it goes blank but will be re-recreated when revisiting the scene. If that’s the desired behavior you want, then I’d recommend @DBear’s original method to get the element. What you’d do is assign a class name ("your-class") to the Hype Element that contains the vimeo video. Then you can blank out the inner HTML. It’d look something like:

var videos = document.querySelectorAll(".your-class");
videos.forEach(function(video){
   if(video.pause) {
       video.pause();
       // video.currentTime =0; // if you want to go back to beginning
   } else {
       video.innerHTML = "";
   }
});
1 Like

I just can’t get it to work.


Can you fill in what Im doing wrong?

The videos just don’t stop…

Any ideas? Is it that I haven’t made an array of the videos? And if so, how do I do that?
At the moment all the videos has the “Class” --> “video”

Is it more to add?

Best. Erik

The code you’re using will only work with HTML5 <video> tag videos and isn’t looking at the class name anyhow (as it calls getElementsByTagName() instead of getElementsByClassName()). Did you try using the code I posted above?

var videos = document.querySelectorAll(".video");
videos.forEach(function(video){
   if(video.pause) {
       video.pause();
       // video.currentTime =0; // if you want to go back to beginning
   } else {
       video.innerHTML = "";
   }
});

I don’t know what your setup is and exactly why you want a “kill all” or “stop all” button. I am guessing that you have more than one vimeo embed in different scenes? and when you traverse to a new scene the video continues to play? These are assumptions and I cannot give you a definitive answer based on the information you’ve supplied.

I can confirm what Jonathan is saying about the fact you are getting the elements by Tag name and not Class so that’s one reason why it’s not working and also you mention vimeo videos and again as Jonathan has stated the methods (I posted) above deals with ordinary embedded videos using a “<video>” tag.

Is it possible to upload your document? So we don’t have to guess how you’ve set it up.

Vimeo has it’s own API that you can use to control videos and there may be a better way to control the vimeo embeds in your doc

Here’s a document showing you one way to use the Vimeo API to control embeds in Hype

vimeoAPI.zip (571.8 KB)

Well all I really want is to stop the video with the right javascript when changing scene. So if I go from scene laser magic, and play the video on that scene, I want the sound to stop if I press topcam for example. Just to stop the audio if another scenen is selected…

So I guess you guys will figure out whats on the to do list for me quite quick : )

All the best and thanks for your patience with this topic!

It ain't gonna be quick as you have iframes within iframes and to get to that content is gonna be difficult. When I have some time I'll look at it

One of the major issues I see in your current project is that several bits of code have smart quotes:

var emptyInnerHTML = ‘’;

vs what it should be:

var emptyInnerHTML = '';

Regardless, I’m curious why you can’t use the above code from my post for every scene on scene unload?

The are both single and double smart quotes - look in videoStop,videoAirdrumsSTOP,videoHome2STOP

videoStop also has a load of "}" which should not be there...

Hi @Sirqus (Erik)

Had a little time to look at this. Haven't completed it all for you as that would have taken a lot longer but I have attached what I have done below. Before that though I'll give a little explanation...

I have removed all instances of HTML widgets because as mentioned earlier, each time you added a HTML widget you then added code for another if iFrame (Hype HTML widgets are iFrames too).

In the Show, Event and Event Lasermagic scenes I have added Rectangle elements and then given them a class name of ".player" and an individual ID.

Basically I've used the Javascript API for Vimeo players and created a player for each of the rectangles and saved them in an object and loaded them with different videos from the get go and then when you click the links to traverse the different scenes I've looped through the "players" and called a stop function on them all.

If you follow the workflow of adding a rect to the scene (for each scene you want a video in) and giving it a class name of ".player" and an original id then you can follow the pattern in the setup() function to add whichever video you want and on each link you call the "vimeoStopAll()" function when you want the videos to stop.

May I also suggest becoming a Patron here as it may help with learning some of these techniques in the future :wink:
http://www.patreon.com/hype_expert

2 Likes

Thank a bunch all of you and especially DBear!

And I just signed an account on patrion to support your kindness, and learn some important stuff at the same time :smile:

Just one thing. I had an iframe in the composition that wasn’t a video. It was a iframe with a 3D file. How do I link to this file without the HTML widget? Check the sirqusalfon.com to see what I mean. When clicking the arrows on the video, you will be prompted a 3D scenen of my groups setup. With your new file, all thous are gone. What would you recommend me to do instead of using the HTML widget? Finally, how do I play and stop the youtube videos trough your new setup?

All the best. Erik

1 Like

Thanks!

The 3D HTML Widget is fine to use ... I think I inadvertently deleted it in the version I sent you ... oops. You can see on the "Lasermagic" scene it is still there :wink: It's fine to use a HTML widget for that.

When you say "youtube" I didn't see any youtube vids in there. If they are all Vimeo vids then you can use the "vimeoStopAll()" function to stop them. To play you can check which video is on the scene and just call "play()" on it. To be honest though ... I'd use the built in controls that are there.

Got it!

I’ll continue on the project I have made where all the 3D HTML widgets are…

But I feel I’m missing something still. When I have:

*Copy pasted all the code into three different Javascripts with the exact same names,
*Copied the vimeo script into the HTML header,
*Loaded the getScene on scene load.
*Created rectangles in the scenes with the .player class and used the unique id from the setup file.

It doesn’t work any more. I have erased all other javascript files as well. Is there something more I need to change in the original document? Would be good for me to understand the whole process…

I think I’ll upload the other videos from youtube onto vimeo instead, less fuzz!

Thank you once agan!

This is just to console log out the scene so that I could see what scene was what :slight_smile:

Have you loaded the "videoSetup()" function on load of the first scene?

This is where the function gets all the ".player" elements and injects a Vimeo Player into them and then stores each of them in an object.

Also, you can see that you can load (loadVideo) a video into whichever player you want at the beginning too. Say you have 6 videos throughout your scenes here you can load a vimeo video into them by using the ID you gave each one (show, event, lasermagic, etc)

You can also see a "stopAll" function that the "vimeoStopAll()" function calls.

1 Like