Video Player Controller

Control and get events from your Webflow video players and embeds.

Currently only supports Vimeo HTML Embeds, as our initial test.

Use Cases

• Perform actions as the player state changes state between stopped, paused, and playing.

• Perform actions as the playback happens, at different times in the video, either by second, or by % complete.

• Perform a specific action such as enabling a button when the video reaches a certain point of playback.

Demonstration

SA5 | Smart Video Player

Demo

Video Player Control - WebflowVideo Player Control

Cloneable

Usage Notes

Currently only supports Vimeo HTML Embeds, as our initial test.

This initial release is focused on player state change eventing.

wfu-video attribute

Add the wfu-video attribute directly to the IFRAME element of the Vimeo embed that you want to watch. Assign it a unique name for that video element, e.g. my-video.

Add the callback ( below )

You will receive playback events for any of the videos you've tagged, including;

• User hits play, pause, or stop.

• Video playing time codes and % complete, which you can use to perform other actions.

Identify which video is state-changed using the name.

Video State Changes

When a video state change occurs, it passes two pieces of information into your callback- the name you've assigned to the video and a player state information object.

The player state object includes this information;

• stateChange - indicates what has changed

  • timeupdate indicates the player time has updated, which typically occurs while it is playing.

• at - indicates the current playback position, in seconds, e.g. 60.088

• duration - indicates the total duration of the video, in seconds, e.g. 62,293

• progress - indicates the percentage complete of watching the video

Use these in you callback to make decisions and perform actions.

Future

• Support Webflow Video element, YouTube element, and other embeds. Wistia, YouTube, etc.

• Prevent skip-ahead?

• Support e.g. auto-pause on scroll off-screen, or on hidden.

• Consolidate all eventing to a single player-status updated event. 5.2.30

  • Choose which event types you wish to be notified of.

Getting Started ( NOCODE )

STEP 1 - Add the Library

There are currently no configuration options for this feature, so we’ll use a no-code integration approach.

Install JS in HEAD, generally site-wide.

<!-- Sygnal Attributes 5 | Video -->
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/nocode/webflow-video.js"></script>

STEP 2 - Apply wfu-video to the Videos you want

See above for details.

STEP 3 - Callbacks

OPTIONAL. If you want to receive player state-change information-

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['playerStateChange', 
  (name, state) => {
    
//    console.log("STATE CHANGED", name, state, state.stateChange, state.status, state.at, state.duration, state.progress); 

    if(state.progress > 50) // 50% complete 
      enableButton(); // Perform some action 
    
  }]); 
</script>