Creating Play & Pause Buttons for Video

knowledgebase

#1

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.


Play video while "mouse over" or hover
Help Needed: Play Audio and Video later in scene
Video Wont Start Over On Scene Load
Adding Audio and Video to your iBooks Widget
Web DVD Menu Creation and Functionality
Edit Inner HTML - can't access
How can you trim a MP4 clip?
Video autoplay mobile devices
Timeline Actions and navigation within a timeline
Custom Video Embedding: Youtube, Vimeo, or hosted video files | Stopping Audio when exiting the scene
Pause streaming video (not YouTube or Vimeo)
Any way to auto play video "On Enter viewpoint"?
Embedding within the Baker Framework: Ebooks for the iPad
Knowledge base: Guides from the Tumult Team
Stop video sound with action
Keyboard shortcuts to pause and play embedded videos?
#2

(rootoftheproblem) #3

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


#4

This topic shows how to Mute Audio or Video:


(Leo) #5

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


(Mark Hunte) #6

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());

(Mark Hunte) #7

Hi @Daniel,

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


#8

Nope – no reason. They are interchangeable.

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

…is preferable.


(Mark Hunte) #9

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


(Mark Hunte) #10

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


(Stephan) #11

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());


#12

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.


(Stephan) #13

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


#14

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">'

(Mark Hunte) #15

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";


(Stephan) #16

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();
    }

(Stephan) #17

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


#18

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


(Stephan) #19

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


#20

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: