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();
}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.
How would I change this code
hypeDocument.getElementById('video1').play();
from
If I wanted to play a video named "film1" inside a symbol named "film1symbol"? Especially, if I have more than one video on the page and so need to name them separately.
Thanks,
Hyper
This code should work if you have multi instances of the same symbol on scene or unrelated symbols.
We simple give each play button a class name which will also be given as the id of the corresponding Symbol.
We then use the class name of the calling play button element to find the correct symbol instance and play its video,
All videos will have the same id inside the innerHTML video tags.
var videoPlayerID = element.classList[1]
var thisSymbol = hypeDocument.getSymbolInstanceById(videoPlayerID).element()
var thisPlayer = thisSymbol.querySelector('#film1')
thisPlayer.paused ? (
thisPlayer.play(),
element.innerHTML= "Pause"
) : (
thisPlayer.pause(),
element.innerHTML= "Play");
video_Buttons_rewind.hype 3.zip (2.6 MB)
Perfection – with all the different scenarios illustrated.
Question:
For a few instances, the video will appear on the screen “already” playing by triggering the JS through another action and not the button. How would I change the innerHTML code accordingly to preserve the Play and Pause toggle function (that is, the default shows “Pause” and changes to “Play” upon clicking)? Tried a few variations of your code, but couldn’t get it to work.
can you post an example. You can use the videos in my example in it since they should be small enough to post back here.
Sorry its taken a while to respond. Here is the situation I am speaking of.
I want to preserve the Play and Pause toggle of the button.
Play:Pause already playing.zip (1.1 MB)
The original code already did that.
var videoPlayerID = element.classList[1]
var thisSymbol = hypeDocument.getSymbolInstanceById(videoPlayerID).element()
var thisPlayer = thisSymbol.querySelector('#film1')
thisPlayer.paused ? (
thisPlayer.play(),
element.innerHTML= "Pause"
) : (
thisPlayer.pause(),
element.innerHTML= "Play");
Just set your play/pause button’s inner html to “Pause” instead of “play/pause”
Also make sure the hover and pressed state are also set to “Pause”
I did what you suggested – I think we are getting there but the button is still buggy (particularly when you hover away from the button where it reverts to “Pause”).
Play:Pause already playing.zip (1.1 MB)
First remove the on prepare for display Action. That should not be there and will not work.
Yer… that really should not be doing that… does seem like a bug with the Hover causing some sort of cache of the text to revert what was there when first loaded…??
@Daniel can you see whats going on…?
The button is set to display 'pause' in the 'normal' state -- so when you unhover it, it returns to that normal state. The innerhtml replacement acts on the 'hover' state since that is that state of the element when it occurs. To workaround this, the button could just be a regular rectangle without any built in hover states.
Got you. Makes sense.
The assumption was innerHtml/text would be a single entity