I’ve been working on a video whose controls also control the playback of the symbol Timeline that it lives in. My play, pause, and replay buttons work easily enough with some code, but I am having a difficult time figuring out how to get rewind, fast-forward, or a draggable slider to control both the video and the timeline. Does anyone have any insight?
A simple way is to:
Set your timeline the same length as the video.
Then lets assume you are using the ontimeupdate Event for the video to update timecode graphics etc…
The ** ontimeupdate** event is a listener that listens for change in the videos current time.
You simply add one line of code for the timeline you want to follow the video.
Doing it in the ontimeupdate call means you do’t have to worry about putting it in your rewind/forward/drag code. When these change the current time of the video, the ontimeupdate and it’s function will be run.
video.ontimeupdate = function() {
hypedocument.goToTimeInTimelineNamed(Number(video.currentTime ), 'timelineName');//
videoTimeCode()
};
if you timeline is in a symbol then you need to call the symbolInstance API.
symbolInstance.goToTimeInTimelineNamed(video.currentTime, 'timelineName');
Thanks for getting back Mark!! Sorry for being so obtuse about this, but at this moment I have NO rewind/forward/drag code for my interactive video project. So I am not sure how to get the ball rolling with this code that you have given me. I hate to ask you to hold my hand, but could you give an example of getting this to work with a rewind or fast forward button? Should onetimeupdate and and the code you gave me be run on scene load? I’d be willing to restructure my current code, which is sadly pretty simple at the moment.
For example, my play button (on click):
var myVideo=document.getElementById("hype_video");
var symbolInstance = hypeDocument.getSymbolInstanceById('mySymbolInstance');
if (myVideo.paused) {
myVideo.play();
$(hypeDocument.getElementById("play-button-white")).fadeOut();
$(hypeDocument.getElementById("pause-button-white")).fadeIn();
symbolInstance.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
}
else {
myVideo.pause();
$(hypeDocument.getElementById("play-button-white")).fadeIn();
$(hypeDocument.getElementById("pause-button-white")).fadeOut();
symbolInstance.pauseTimelineNamed('Main Timeline');
}Have a look at my post I did the other day :
There will be an update coming soon but this should get you going.
The example on that post is a fully working Video controller that can work on your videos. But you can look at the code for rewind and forward.
1 Like
Hi @ktrent7
Here is something to help you out. It’s a document to show you the different options to sync the video with the symbol timeline. These are using the built in controls for the video which you could change to controls built in Hype if you wanted to. It’s not the full scope of what you can do but it will get you on your way.
*Note The code that @MarkHunte suggested above is included in this document so you can see what he was referring to. 
syncVideoandAnimation.zip (774.0 KB)
1 Like
Thank you again so much, Mark and DBear!!
Both of these worked excellently for my purposes. You saved my bacon.
I know this comes after the fact, but after I finished my previous project regarding this, I decided to try to build a custom timeline for fun by combining the sync() code you sent, DBear, with Mark’s Video Controller. This almost worked, however I kept having errors where the play/pause button would frequently not pause the symbol timeline it was synced to, but continued to accurately rewind and jump throughout the timeline. Any thoughts on why this might happen (most likely something I’m overlooking)?
Greetings 
… I’m brand new here, and brand new to Hype as well. I only have about a month of experience on it, but have gotten pretty far in being able to convert my old Flash projects over into HTML. However… I’ve hit a few snags (of course)… So this question is directed @DBear in particular since it is in regards to the “Buck Bunny” example he posted - but I greatly appreciate ANYONE who takes precious time out of their day to help a fellow developer in need.
Ok, so DBear gave an example link where (BuckBunny) had words under him that changed back & forth as you scrubbed the video back & forth. It showed “TIMELINE SYNCHING WITH A VIDEO” - VERY COOL!! 
It took me all damn day - but I FINALLY got it to work on MY project. … HOWEVER - the “Scene” that it’s in no longer AUTOPLAYS, which I need it to do while still synching - if possible.
I tried every way I knew to Autostart the Scene, but it simply wouldn’t work So I’m thinking that Autostart will now need to be activated in conjunction with the Synch On Load script??
Can someone please take a look at that “Buck Bunny” example DBear gave on Jan 2016, titled - (syncVideoandAnimation.zip) - [sorry, I don’t know how to reproduce the actual upload link.] … and provide me the code to AUTOSTART a synched video as soon as the page loads, without losing the synch?
please be sure to let me know where the codes go… (head / button / on load) etc… and be specific. Unfortunately writing code was not one of my gifts 
but I do ok at minor edits to make it fit my projects. Please structure your responses with that in mind.
Any help is GREATLY appreciated… 
Hi,
You have missed out the some important info…
What device is this aimed at and what browser are you using
If it is MacOS then things are a bit easier for you to do. You simply select the video in the Hype project and then in the Element Inspector check Autoplay.
One thing to not about MacOs .
In High Sierra Safari there is auto blocking of Autoplay. This is controlled by the end user. The user opts in or out of auto play per site. This is done via the Safari Preferences -> website-Auto-Play
When you go there you will probably notice that any sites in there are set to [stop media with sound] which seems the default.
Also in there you most likely will see
Thats actually the Hype preview server.
I would change this to [Allow Auto-Play]
If this is for iOS, please do a search for autoplay iOS . basically your doomed…
only kidding, There a many threads discussing this already… but I am not fully up to date about the work arounds which are mainly due to Apple’s policy on auto play and auto play with sound
Greetings Mark and thank you for taking the time to respond. Yes, I’m familiar with clicking the (Autoplay) box, and I AM structuring this for the IOS Ipad… and you’re right - DOOMED!! LOL… I’ve never seen so many restrictions, it’s ridiculous! You’re damn near just limited to making a smiley face wave at the screen… as long as it doesn’t need to play sound while it’s waving lol smh.
But when following that Buck Bunny example to synch video to audio, the Autoplay no longer functions because the video progress is now tied to the timeline. And trying to autostart the timeline with a (Timeline Event) doesn’t work anymore, because the “symbol” isn’t running on timeline either - The player is totally script-controlled during synch… so no built-in Autostarts will work…
What I need is an autostart script that works in conjunction WITH the Buck Bunny Synch script… so that they will start together. It’s weird and hard to explain, but if you download that Buck Bunny example, you can play around and try to get it to autostart on IOS format.
I couldn’t do it and basically just removed the synch script from my project. I’d rather have autostart than synch if I have to choose. If someone can get autostart to work WITH that synch code - I’ll add it back in. So there’s a lil challenge for any Code-Junkie Hotshots who wanna try to get that to work lol. 
Thanks again