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