Creating Play & Pause Buttons for Video

Elements Audio & Video
41

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

42

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)

2 Likes
43

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.

44

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.

45

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)

46

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”

42

47

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)

48

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…?

49

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.

1 Like
50

Got you. Makes sense.

The assumption was innerHtml/text would be a single entity

2 Likes
51

Works great. Thank you Mark and Daniel!

Quick follow-up … I was able to style the Pause button (font, color, size) using the innerHtml of the rectangle, but how do I style the Play button?

52

Use the element inspector

1 Like
53

You don’t say!!

Thank you!