If you’re just starting out with Video in Tumult Hype, please read our video documentation
When you drag a video into Hype, it creates a Video element controlled by Hype. You can set whether you wish to show controls, whether you want the video to autoplay, and even if you want the video muted. All controls for these types of videos exist on the video element itself (a rectangle). To create controls outside of the element keep reading:
By default, play and pause buttons (and their design) are handled by the browser displaying the video. Creating your own buttons requires a small snippet of JavaScript. Below are instructions:
Insert your video into Tumult Hype.
In the Element Inspector’s video controls, disable autoplay
Go to the identity inspector (command–7) and set an element ID to something like: video1
Add your play and pause buttons. These can be regular buttons, images, or really any element.
Select the Play button
Go to the Mouse Action Inspector and add an ‘On Mouse Click’ action to Run Javascript…
From the next popup menu, choose New Function…
In the code that pops up, add this at the end in the line above the closing “}” curly bracket
hypeDocument.getElementById('video1').play();
Use the tabs at the top of the window to go back to the scene
Do steps 4–8 for the pause button, but instead use this line in the Javascript
hypeDocument.getElementById('video1').pause();
Want to reset your video? Set the ‘currentTime’ to 0 with:
is there particular reason you used document.getElementById(‘video1’).play(); instead of hypeDocument .getElementById(‘video1’).play(); which does work?
On the play / pause function. How can I change the image for each state. It needs to remain the same button, just the image of each state changes.
This is the working code I am currently using:
(hypeDocument.getElementById(‘video1’).paused ?
hypeDocument.getElementById(‘video1’).play() :
hypeDocument.getElementById(‘video1’).pause());
As you are using shorthand I would change back to the usual if … else statement then by adding other actions it would be easier to read.
var myVideo = hypeDocument.getElementById('video1');
if (myVideo.paused) {
this.style.backgroundImage = "path to your image";
myVideo.play();
} else {
this.style.backgroundImage = "path to your image";
myVideo.pause();
}
assuming this function is being called on the button in question.
After I posted the last message I realised what I was doing. I assumed the {resourcesFolderName} was a reference to what folder I placed the images in, not considering that that will be the default location that after publishing the images will be in i.e…, the .hyperesources folder. Once I engaged my brain, it made sense. I copied the images into the resource library and once published it worked.
Your last link I assume will be to a “images” folder in the same location as your setup file?
Anyway, apologies again for keep hammering on the same folder issue.
