Creating Play & Pause Buttons for Video

knowledgebase

(Stephan) #21

Thanks again man.


#22

you’re welcome :wink:


(Larry Torrez) #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.


(Larry Torrez) #25

Okay,

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


#26

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">  
</audio>  

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

Daniel,

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

Daniel,

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?


#29

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

Hi,

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:

Play:

	if(hypeDocument.currentLayoutName() == "Desktop") {
    hypeDocument.getElementById('movie').play();
} else if (hypeDocument.currentLayoutName() == "iPhone") {
    hypeDocument.getElementById('moviemobile').play();
}

pause:

    	if(hypeDocument.currentLayoutName() == "Desktop") {
        hypeDocument.getElementById('movie').pause();
    } else if (hypeDocument.currentLayoutName() == "iPhone") {
        hypeDocument.getElementById('moviemobile').pause();
    }

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?

Thanks


#31

For an additional conditional, you would add another else if

if (hypeDocument.currentLayoutName() == "Desktop") {
    hypeDocument.getElementById('movie').play();
} 
else if (hypeDocument.currentLayoutName() == "iPhone") {
    hypeDocument.getElementById('moviemobile').play();
}
else if (hypeDocument.currentLayoutName() == "iPad") {
    hypeDocument.getElementById('movieipad').play();
}

(Paulo Zilberman) #32

Hello
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

hypeDocument.getElementById('videoCenas').pause();

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:
https://www.w3schools.com/tags/av_event_timeupdate.asp