hooks - useVideoIntersection

View on GitHub

import { useVideoIntersection } from '@sky-uk/ui-core';

A hook that can be used to play video elements only when they they have intersected with the viewport.

The easiest way to consume this functionality is via the VideoOnIntersection component.

This hooks is made availble for cases where a custom trigger is needed.

function Example() {
    const ref = React.useRef();

    useVideoIntersection({ ref, exitBehavior: 'restart'});

    return (
        <Video ref={ref} src="https://assets.contentstack.io/v3/assets/blt77d122705d37a002/blt335ec01d48fb6d9c/example-video.mp4" autoPlay playsInline muted $width="100%" />
    );
}

Arguments

ref

The ref for the video element

triggerRef (Optional)

The ref for the triggering element, if different from the video element

exitBehavior

You can use the exitBehavior argument to fine tune what should happen once the ref element exits the viewport.

It accepts following values:

pause (default) - Pauses the video and resumes once it re-intersects with the viewport.
end - Skips to the end of the video and will not resume once it re-interects with the viewport.
restart - Restarts the video and resumes playing once it re-intersects with the viewport.

intersectionOptions

The intersectionOptions prop allows you to configure the underlying IntersectionObserver. See MDN.