I wrote my toggle screen that worked. Basically I want it to stop video and animation in
Scene2 (phone, desktop), video1
Scene 3 (phone, desktop), video2
Obviously I don't want four scripts. I notice ID's are unique for the ENTIRE animation, not local to the scene/layout. I could use classes, and playing with that. Is there a guideline or outline for doing this? Also, still looking for DOM guide (elements, attributes) for Hype/
Okay, I rewrote the SetPlayPause (which is launched at the start of the scene) as:
//alert('Here');
var thisPlayPause = element.querySelector('.PlayPause');;
thisPlayPause.innerHTML='Pause';
thisPlayPause.style.backgroundColor='#FE9470';
This works perfectly fine in the first scene and in the responsive layout. However, it does not work at all once I jump to the second scene. Will try looping through all elements in class whether they are visible or not...
I know I can successfully use element for the "button" but I would rather not for now. However, is there another method for pausing/playing the movie file when using querySelector?
Okay, the buttons work, but I cannot pause the video at all using this code.
//alert('Hello');
//find out where I am and them move forward
var hypeDocElm = document.getElementById(hypeDocument.documentId());
var thisPlayPause = hypeDocElm.querySelector('.PlayPause');
var thisVideo = hypeDocElm.querySelector('.VideoPlay');
//alert('this play pause is:'+ thisPlayPause + ' and this video is '+ thisVideo);
switch (element.innerHTML) {
case 'Pause':
element.innerHTML='Play';
thisVideo.pause();
element.style.backgroundColor='#00F44B';
hypeDocument.pauseTimelineNamed('Main Timeline');
break;
case 'Play':
element.innerHTML='Pause';
thisVideo.play();
element.style.backgroundColor='#FE9470';
hypeDocument.continueTimelineNamed('Main Timeline');
break;
}//end switch
After a nice KY bourbon (Angel's Envy), the following worked:
//alert('Hello');
//find out where I am and them move forward
/*
var hypeDocElm = document.getElementById(hypeDocument.documentId());
var thisPlayPause = hypeDocElm.querySelector('.PlayPause');
var thisVideo = hypeDocElm.querySelector('.VideoPlay');
*/
var curScene=hypeDocument.currentSceneName();
var curLayout=hypeDocument.currentLayoutName();
// what video to stop?
if (curScene=='Create Table' && curLayout=='iPhone') {
var vidControl='Video1';
}
if (curScene=='Create Table' && curLayout=='Computer') {
var vidControl='Video2';
}
if (curScene=='Pivot Table' && curLayout=='iPhone') {
var vidControl='Video3';
}
if (curScene=='Pivot Table' && curLayout=='Computer') {
var vidControl='Video4';
}
//alert('this play pause is:'+ thisPlayPause + ' and this video is '+ thisVideo);
//alert (document.getElementById(hypeDocument.documentId()));
switch (element.innerHTML) {
case 'Pause':
element.innerHTML='Play';
hypeDocument.getElementById(vidControl).pause();
element.style.backgroundColor='#00F44B';
hypeDocument.pauseTimelineNamed('Main Timeline');
break;
case 'Play':
element.innerHTML='Pause';
hypeDocument.getElementById(vidControl).play();
element.style.backgroundColor='#FE9470';
hypeDocument.continueTimelineNamed('Main Timeline');
break;
}//end switch