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
})
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");
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…
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 = "";
}
});
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
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!
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 http://www.patreon.com/hype_expert
And I just signed an account on patrion to support your kindness, and learn some important stuff at the same time
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?
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 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.
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!
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.
