Creating Play & Pause Buttons for Video

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:

  1. Insert your video into Tumult Hype.

  2. In the Element Inspector’s video controls, disable autoplay

  3. Go to the identity inspector (command–7) and set an element ID to something like: video1

  4. Add your play and pause buttons. These can be regular buttons, images, or really any element.

  5. Select the Play button

  6. Go to the Mouse Action Inspector and add an ‘On Mouse Click’ action to Run Javascript…

  7. From the next popup menu, choose New Function…

  8. In the code that pops up, add this at the end in the line above the closing “}” curly bracket

    hypeDocument.getElementById('video1').play();

  9. Use the tabs at the top of the window to go back to the scene

  10. 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:

hypeDocument.getElementById('video1').currentTime = 0;

Compatibility

Please note that on iOS devices, no element can appear above a video element. Place your play/pause buttons outside of the <video> element’s area.

More Controls

To create a ‘rewind’ button, check out @MarkHunte’s post on the topic.

10 Likes

Any way to mute or alter the audio playback of a video with a function?

This topic shows how to Mute Audio or Video:

How would you make a button both play and pause when clicked/touched, instead of having two separate buttons.

Link your button to a Javascript that checks if the video is playing or not.

(hypeDocument.getElementById('video').paused ?  hypeDocument.getElementById('video').play() :  hypeDocument.getElementById('video').pause());
1 Like

Hi @Daniel,

is there particular reason you used document.getElementById(‘video1’).play(); instead of hypeDocument .getElementById(‘video1’).play(); which does work?

Nope – no reason. They are interchangeable.

hypeDocument.getElementById('video1').play();

…is preferable.

1 Like

Thanks, I thought I must not be seeing something obvious :relieved:

If any of you want to know how to add rewind buttons see:

1 Like

Hi there,

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.

Thank you so much but I am unable to get it to work.

This is the code I am using:

var myVideo = hypeDocument.getElementById('video1');

if (myVideo.paused) {
this.style.backgroundImage = “${images}/pause.jpg” width=“44px” height=“45px”;
myVideo.play();
} else {
this.style.backgroundImage = “${images}/play.jpg” width=“44px” height=“45px”;
myVideo.pause();
}

It does not play when you click on the play button

the code for your resources folder (if that is where your images are held) is

${resourcesFolderName}/pause.jpg

also your code is not right

using javascript for CSS manipulation you need this pattern

style.backgroundImage = "url('${resourcesFolderName}/pause.jpg')"

I would try this

element.innerHTML = '<img src="${resourcesFolderName}/pause.jpg" width="44px" height="45px">'
1 Like

Need an URL as @DBear mentions.

You can then set up other properties

i.e

      	 this.style.backgroundRepeat="no-repeat";
	 this.style.backgroundSize="95%";
	 this.style.backgroundPosition = "centre";

size can also be done so;

this.style.backgroundSize= "44px 45px";

Hahahaha,

This is crazy. Now, it plays but the icons don’t show up.

This is what I have:

    var myVideo = hypeDocument.getElementById('video1');
if (myVideo.paused) {
    element.innerHTML = '<img src="${images}/pause.jpg" width="44px" height="45px">';
    myVideo.play();
} else {
    element.innerHTML = '<img src="${images}/play.jpg" width="44px" height="45px">';
    myVideo.pause();
    }

Sorry, not sure about the blocks but it is “${images}/pause.jpg” width=“44px” height=“45px”

why are you using

${images}/pause.jpg

The correct route to your resources folder is

${resourcesFolderName}/pause.jpg

if you have your images in a folder within your file system then you can put

element.innerHTML = '<img src="images/pause.jpg"'

but this won’t work when previewing locally. This will only work when exporting as HTML and previewing on a server

My apologies,

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.

Thanks for your patience

Yes, effectively you could use whatever URL you want. Only when previewing within Hype then they won’t show.

The ${resourcesFolderName} is a special variable that points to the .hyperesources. Exactly :wink: