Creating Play & Pause Buttons for Video

Elements Audio & Video
5

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

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());
1 Like
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.

1 Like
9

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

10

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

1 Like
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.

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">'
1 Like
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";

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

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:

21

Thanks again man.

22

you’re welcome :wink:

23

Daniel,

I am having issues getting the controller to show. Javascript skills are feeble but I am trying to make this work. Could use a little help. The file is too big to direct download here so I am sharing from G-drive file.

Thanks in advance.

Larry

https://drive.google.com/open?id=19_X10a00R9lCFvXgoBsF-m3HS5--RYLq

24

I’m not seeing any videos in this document?

To start audio, I recommend having a ‘start’ button on that page that start the audio instead of using a Timeline Action. Also, I recommend converting to MP3.

1 Like