1 Correct answer
I'm not a JavaScript guru either. You just need to be aware of certain things:
- JavaScript can change CSS styles.
- The scripting language in Animate Canvas documents is JavaScript.
- Therefore Animate can change CSS styles.
In your case, for the player style you'd get rid of the z-index and add this:
visibility: hidden;
Then in Animate, on the frame where you want to reveal the player, you'd add this line of code:
document.getElementById("player").style.visibility = "visible";
16
Replies
You rock!
As I think of all the possible scenarios I might want to have available, I realized that autoplay with audio muted, has the video playing while hidden, when the video player is made visible, it isn't at the beginning.
If Animate CC can tell that iframe what to do that would be awesome. If not I guess there is the seconds before calling play as an option.
| This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. The parameter value is a positive integer. Note that similar to the seekTo function, the player will look for the closest keyframe to the time you specify. This means that sometimes the play head may seek to just before the requested time, usually no more than around two seconds. |
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '184',
width: '300',
videoId: '7iRdz7lrlt0',
playerVars: {
'autoplay': 0,
'modestbranding':1,
'controls': 1,
'fs': 0,
'rel': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var playerReady = false;
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
playerReady = true;
player.mute();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
<!-- alert('done'); -->
}
}
AdChoices