CodeAPI

PlayableMixin

Provides functionality for elements that can be played.

Table of Contents

PROPERTIES

?
Store values associated with an object.
isPlayingIndicates if the element is currently playing.

FUNCTIONS

?
Perform actions on an object.
next( )Moves to the next item.
onPause( )Adds an event handler that runs when playback is paused.
onPlay( )Adds an event handler that runs when playback is started or restarted.
pause( )Pauses playback.
play( )Begins or resumes playback.
previous( )Moves to the previous image or slide.

isPlaying

Indicates if the element is currently playing.

Description

To set the isPlaying property on an element, use the element's play() and pause() functions.

If you select Autoplays on loading in the element's Settings panel in the Editor, the isPlaying property is set to true when the page loads.

See Also

play( ), pause( )

Syntax

get isPlaying(): boolean
TYPE
?
The kind of data the property stores.
boolean

Examples

Get an element's current playing status

let isPlaying = $w("#myElement").isPlaying; // false

Toggle an element's current playing state

if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

next( )

Moves to the next item.

Description

The next() function returns a Promise that is resolved when the next item is completely rendered. Calling next() when on the last item, moves to the first item.

Note

When using next() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support next(), your code may longer function correctly.

See Also

previous( ), play( ), pause( )

Syntax

function next(): Promise<Element>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<Element>
Fulfilled - The newly displayed image or slide.

Examples

Move to the next item

$w("#myElement").next();

Move to the next item and log a message when done

$w("#myElement").next()
  .then( () => {
    console.log("Finished moving to the next item");
  } );

onPause( )

Adds an event handler that runs when playback is paused.

Description

An element can be paused by a user clicking the gallery or slideshow's pause button or by calling its pause() function

Note

When using onPause() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support onPause(), your code may longer function correctly.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

pause( )

Syntax

function onPause(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element is paused.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The gallery or slideshow that triggered the event.

Examples

Get the ID of the element that has been paused

$w("#myElement").onPause( (event) => {
  let targetId = event.target.id; // "myElement"
});

onPlay( )

Adds an event handler that runs when playback is started or restarted.

Description

An element can be played by a user clicking the gallery or slideshow's play button or by calling its play() function.

Note

When using onPlay() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support onPlay(), your code may longer function correctly. Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

play( )

Syntax

function onPlay(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element is played.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The gallery or slideshow that triggered the event.

Examples

Get the ID of the element that is playing

$w("#myElement").onPlay( (event) => {
  let targetId = event.target.id; // "myElement"
});

pause( )

Pauses playback.

Description

The pause() function pauses a slideshow or playable gallery and fires a pause event.

The pause event handlers set on this element by the onPause( ) function or in the Editor are called.

Note

When using pause() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support pause(), your code may longer function correctly.

See Also

play( ), onPause( )

Syntax

function pause(): void

Examples

Pauses playback

$w("#myElement").pause();

Toggle an element's current playing state

if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

play( )

Begins or resumes playback.

Description

The play() function plays a slideshow or playable gallery and fires a play event.

The play event handlers set on this element by the onPlay( ) function or in the Editor are called.

Note

When using play() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support play(), your code may longer function correctly.

See Also

pause( ), onPlay( )

Syntax

function play(): void

Examples

Begins or resumes playback

$w("#myElement").play();

Toggle an element's current playing state

if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

previous( )

Moves to the previous image or slide.

Description

The previous() function returns a Promise that is resolved when the previous image or slide is completely rendered. Calling previous() when on the first item, moves to the last item.

Note

When using previous() on a gallery, make sure the gallery is one where the isPlayable capability is true.

If you change a gallery's type to one that doesn't support previous(), your code may longer function correctly.

See Also

next( )

Syntax

function previous(): Promise<Element>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<Element>
Fulfilled - The newly displayed image or slide.

Examples

Move to the previous item

$w("#myElement").previous();

Move to the previous item and log a message when done

$w("#myElement").previous()
  .then( () => {
    console.log("Finished moving to the previous item");
  } );