Thanks again man.
you’re welcome 
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
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
Okay,
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">
</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.
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
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?
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.
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
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();
}
1 Like
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?
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 …
Thank you for the answer
So the question is if there is a way to apply the pause command directly to the video
you can setup an eventlistener ontimeupdate to pause the video when a currentTime is reached:
https://www.w3schools.com/tags/av_event_timeupdate.asp
I’ve actually got a more frustrating question. I can get a video to jump to a specific point using the:
hypeDocument.getElementById('video1').currentTime = 0;
and then changing the 0, but I’m having trouble making it actually play from that point.
I’m using the video as a marker for other events happening on the timeline, so I can tee it up to also move to a specific point on the timeline by adding that other behaviour on click.
Have looked into this option (Sync animations to Video & Audio in Tumult Hype) but unfortunately all it does is play that specific moment on the timeline (but not the video) and then revert to the synced video/timeline as if playing straight.
Any help? Am I missing something here?
Thanks in advance.
I think we’d need to take a closer look to see what you’re doing. You’re welcome to post a zip of your .hype document and instructions on how to get to the point to reproduce what you’re hitting.
Hi Jonathan, unfortunately I’m building it for a news project so I can’t share.
Basically, I want to make a timeline play in sync with a video, and use a button to play that video from a key point (with events in the timeline in sync). Essentially just one linear timeline, which the video is in sync with, and which I can have buttons for the viewer to jump ahead to key moments (if they choose).
At the moment I can create a button that will either (using the example I linked to) play a section of the timeline without moving the video or simply jump to a certain point in the video (without playing).
It depends on what you’re trying to do, but you might also want to use the Hype API to set your specific point in time on the timeline. So if you set the video to a certain time:
hypeDocument.getElementById('video1').currentTime = 1.2;
you could set a Hype timeline to a specific time:
hypeDocument.goToTimeInTimelineNamed("syncedTimeline", 1.2);
This approach isn’t really for the sync link you posted; that has a bit more of “trigger points” (T1 and T2) so you’d probably need to figure out where you’re jumping to and reset those. A better approach may be to call goToTimeInTimelineNamed on every video timeupdate call and/or try to match up play/pause states if you need true syncing.
Thanks for your help Jonathan, will try it! Will come back to you with maybe a dummy project if I’m still stuck.
1 Like