Creating Play & Pause Buttons for Video


(Stephan) #21

Thanks again man.


you’re welcome :wink:

(Larry Torrez) #23


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.



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.

(Larry Torrez) #25


Why mp3? Just curious.
so the controls only work for vids, and not pure Hype files?


You could create a regular audio element by adding regular HTML to the Inner HTML of a rectangle. (Insert > Rectangle > Select the rectangle and click Edit > Edit Inner HTML). If you had a file.mp3 in your resource library, you would embed:

<audio id="myAudio" width="400" height="20" controls="controls" preload="auto">
        <source src="${resourcesFolderName}/file.mp3" type="audio/mpeg">  

This would create an ‘interface’ for your audio. By default in Hype, if you drag an audio file onto the scene we just create a ‘play’ button with the name of the audio file.

The MP3 format is the most widely-support audio format, so it’s just what we recommend.

(Larry Torrez) #27


Ha, I did that originally sourcing the HYPE book example.

I was looking for a little more control. Once again am totally overthinking this. Coming over from the Adobe CS world after decades of trying to find a more efficient and cost effective process to do responsive animations, graphics and ebooks.

It seems that you have already addressed this issue and I am having difficulty getting the name of the folder correct, since I am getting an error message. (thats got to be the issue - operator error).

Will try again, thanks

(Larry Torrez) #28


Well that worked, the audio starts when the play arrow is clicked. click it again and the audio starts over. No pause button. Also how do I start the animation when the user clicks the audio button?


You can use a regular Mouse action to both start a timeline and start the audio.

Use filenames without spaces – it’ll make your life much easier: file.mp3 not file name.mp3.

(Alex) #30


I am using javascript to play or pause video on enter viewpoint, there are two layouts: mobile and desktop, and here are the javascript code:


	if(hypeDocument.currentLayoutName() == "Desktop") {
} else if (hypeDocument.currentLayoutName() == "iPhone") {


    	if(hypeDocument.currentLayoutName() == "Desktop") {
    } else if (hypeDocument.currentLayoutName() == "iPhone") {

what about if there are three or four layouts, for example: mobile, iPad, iPad Landscape, desktop…

what is the right javascript format for more that two layouts please?



For an additional conditional, you would add another else if

if (hypeDocument.currentLayoutName() == "Desktop") {
else if (hypeDocument.currentLayoutName() == "iPhone") {
else if (hypeDocument.currentLayoutName() == "iPad") {

(Paulo Zilberman) #32

I have a video with 3 parts, Each part should play when a button is clicked
I created a play and a rewind button and added the respective functions to each
At the end of the first and second parts of the video I created a timeline action keyframe and added the pause function to it


The buttons work fine but the video does not pause at each action keyframe
Should I add the function directly to the video?

(Hans-Gerd Claßen) #33

should work, but a timelineaction may not be in sync with the video as they run independently …
there are a few topics within the forum covering the topic to sync anmiation and video …

(Paulo Zilberman) #34

Thank you for the answer
So the question is if there is a way to apply the pause command directly to the video

(Hans-Gerd Claßen) #35

you can setup an eventlistener ontimeupdate to pause the video when a currentTime is reached: