Links

Video Player ❺

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

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>
Last modified 6mo ago