Video Title

Here is a short description of the video. You can still see the video playing underneath this overlay. Click here to read more

} /> ``` -------------------------------- ### Set Overlay Transition Duration for Hover Video Player Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Configures the time in milliseconds for the paused and loading overlays to fade in and out. This ensures a seamless user experience as the player's state changes. ```jsx Paused!} // It should take 500ms for the pausedOverlay to fade out when // the video plays and fade back in when the video pauses overlayTransitionDuration={500} /> ``` -------------------------------- ### loop Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Toggles whether the video should loop when it reaches the end. ```APIDOC ## loop ### Description Accepts a boolean value which toggles whether or not the video should loop when it reaches the end. ### Type `boolean` ### Default `true` ### Request Example ```jsx ``` ``` -------------------------------- ### restartOnPaused Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Toggles whether the video should restart from the beginning when paused. ```APIDOC ## restartOnPaused ### Description Accepts a boolean value which will toggle whether the video should be reset to the start every time it is paused or resume from the previous time it was at. ### Type `boolean` ### Default `false` ### Request Example ```jsx ``` ``` -------------------------------- ### Set Video Preload to Metadata Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md The preload prop corresponds to the HTML Video element's preload attribute, determining how much data is loaded before playback. Setting it to 'metadata' ensures only the video's metadata (dimensions, duration) is loaded initially. This is useful for performance but may require a paused overlay in Safari. ```jsx ``` -------------------------------- ### Programmatic Video Control with focused Prop Source: https://context7.com/gyanreyer/react-hover-video-player/llms.txt The `focused` prop offers direct control over video playback, overriding the default hover behavior. Setting it to `true` forces playback, while `false` reverts to standard hover interactions. ```jsx import { useState } from 'react'; import HoverVideoPlayer from 'react-hover-video-player'; function ControlledVideoPlayer() { const [isPlaying, setIsPlaying] = useState(false); return (

} />

); } ``` -------------------------------- ### Apply Custom Styling to HoverVideoPlayer Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Customize the appearance of the `HoverVideoPlayer` component using various props that accept class names and style objects. These props allow targeted styling for the outer container, overlay wrappers, and the video element itself, providing flexibility in UI integration. ```jsx ``` -------------------------------- ### Define Playback Segment with playbackRange Props Source: https://context7.com/gyanreyer/react-hover-video-player/llms.txt The `playbackRangeStart` and `playbackRangeEnd` props allow you to specify a precise segment of the video for playback, measured in seconds. This is ideal for showcasing specific parts of longer videos without altering the original file. ```jsx import HoverVideoPlayer from 'react-hover-video-player'; function VideoPreviewClip() { return ( } /> ); } ``` -------------------------------- ### Define Hover Target Element for Video Player Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Specifies the DOM element, a function returning a DOM element, or a React ref that will trigger the video playback on hover or touch. If not provided, the component's container acts as the target. ```jsx // Passing a function that returns a DOM node document.getElementById("hover-target")} /> ... // Using a React ref const wrapperLinkRef = useRef(); ... // Passing a DOM node // PLEASE BEWARE THAT THIS CAN BE UNSAFE: Only do this if you are confident that the element // will always already exist on the DOM before this component is rendered. ``` -------------------------------- ### Implement Closed Captions with videoCaptions Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md The videoCaptions prop allows you to add closed captions to your video player. It accepts a React node containing one or more elements. Each element specifies the source (src), language (srcLang), and title (label) of the caption file. You can include multiple tracks by wrapping them in a React fragment. ```tsx ) /> ``` ```jsx ) controls /> ``` -------------------------------- ### Control Video Audio with Muted and Volume Props in React Source: https://context7.com/gyanreyer/react-hover-video-player/llms.txt Demonstrates how to control video audio using the `muted` and `volume` props in React. Videos are muted by default. If unmuted playback is blocked, it falls back to muted playback. ```jsx import HoverVideoPlayer from 'react-hover-video-player'; function VideoWithAudio() { return ( } /> ); } ``` -------------------------------- ### Implementing Click-to-Play with Disabled Hover Events Source: https://context7.com/gyanreyer/react-hover-video-player/llms.txt Shows how to disable the default hover event handling of the HoverVideoPlayer using the `disableDefaultEventHandling` prop. This allows for custom playback control, such as implementing a click-to-play interface managed by the `focused` prop. ```jsx import { useState } from 'react'; import HoverVideoPlayer from 'react-hover-video-player'; function ClickToPlayVideo() { const [isPlaying, setIsPlaying] = useState(false); return (

setIsPlaying(!isPlaying)} style={{ cursor: 'pointer' }}>

{isPlaying ? '⏸' : '▶'}

} /> ); } ``` -------------------------------- ### Hover Event Handling Props Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Control the target element for hover events and whether the player should be forced to play. ```APIDOC ## hoverTarget ### Description Accepts a DOM node, a function that returns a DOM node, or a React ref to an element. The component will apply default event handling to this target element so the video plays on hover/touch. If not provided, the component's container `

` is used. ### Method N/A (Prop) ### Endpoint N/A (Prop) ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body - **hoverTarget** (Node | function | React.RefObject) - Optional - The element to use as the hover target. ### Request Example ```jsx // Using a React ref const wrapperLinkRef = useRef(); ``` ### Response #### Success Response (200) N/A #### Response Example N/A --- ## focused ### Description Accepts a boolean value which, if true, will force the video player to play regardless of other user interactions. Useful for custom behavior outside of standard interactions. ### Method N/A (Prop) ### Endpoint N/A (Prop) ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body - **focused** (boolean) - Optional - Forces the video player to play. ### Request Example ```jsx const [isVideoPlaying, setIsVideoPlaying] = useState(false); ``` ### Response #### Success Response (200) N/A #### Response Example N/A ``` -------------------------------- ### onHoverEnd Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Callback function fired when the user stops hovering over the player's hover target. ```APIDOC ## onHoverEnd ### Description Accepts a callback function which will be fired when the user stops hovering on the player's [hover target](#hovertarget). ### Type `function` ### Default `null` ### Request Example ```jsx { console.log('User just moused out of or touched outside of hover target.'); console.log('The video will now stop playing.'); }} /> ``` ``` -------------------------------- ### Migrate videoSrc prop from array of config objects to fragment of source elements (React) Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/BREAKING.md This snippet shows the migration of the `videoSrc` prop from an array of configuration objects to a fragment containing multiple `` elements. Each object in the original array is converted into a `` element with its `src` and `type` attributes. This is required as the `videoSrc` prop no longer supports arrays of config objects. ```diff import HoverVideoPlayer from 'react-hover-video-player'; function MyComponent() { return ( + + + + } /> ); } ``` -------------------------------- ### Enable Video Controls with React Hover Video Player Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md The `controls` prop, when set to true, enables the default browser video playback controls for the video player. This provides users with standard playback functionalities. ```jsx ``` -------------------------------- ### Add Closed Captions with videoCaptions Prop Source: https://context7.com/gyanreyer/react-hover-video-player/llms.txt The `videoCaptions` prop allows the integration of closed captions using `` elements for improved accessibility. When utilizing multiple tracks or non-default captions, ensure the `controls` prop is enabled for user selection. ```jsx import HoverVideoPlayer from 'react-hover-video-player'; function VideoWithCaptions() { return ( } controls /> ); } ``` -------------------------------- ### Configure CORS with crossOrigin Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md The crossOrigin prop configures how the video element handles CORS requests, directly mapping to the HTML Video element's crossorigin attribute. It can be set to 'anonymous' to send cross-origin requests without credentials, or 'use-credentials' to send them with credentials. 'anonymous' is a common setting when encountering CORS issues. ```jsx ``` -------------------------------- ### muted Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Toggles whether the video should play with sound. Be aware of browser autoplay policies. ```APIDOC ## muted ### Description Accepts a boolean value which toggles whether or not the video should be muted. Note that if the video is unmuted, you may encounter issues with [browser autoplay policies](https://developer.chrome.com/blog/autoplay/) blocking the video from playing with sound. This is an unfortunate limitation stemming from the fact that modern browsers will block playing audio until the user has "interacted" with the page by doing something like clicking or tapping anywhere at least once. If playback is initially blocked for an unmuted video, the component will fall back by muting the video and attempting to play again without audio; if the user clicks on the page, the video will be unmuted again and continue playing. ### Type `boolean` ### Default `true` ### Request Example ```jsx ``` ``` -------------------------------- ### Migrate videoCaptions prop from config objects to track elements (React) Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/BREAKING.md This snippet illustrates the migration of the `videoCaptions` prop from an array of caption track configuration objects to a fragment containing multiple `` elements. Properties like `src`, `srcLang`, `label`, `kind`, and `default` from the config objects are directly mapped to attributes on the `` elements. This change is due to the deprecation of config objects for caption tracks. ```diff import HoverVideoPlayer from 'react-hover-video-player'; function MyComponent() { return ( + + + + } /> ); } ``` -------------------------------- ### Customize Video Controls List with React Hover Video Player Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md The `controlsList` prop accepts a string to exclude specific buttons from the video's playback controls, such as 'nodownload' or 'nofullscreen'. Note that browser support for this feature may vary. ```jsx ``` -------------------------------- ### Migrate videoSrc prop from config object to source element (React) Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/BREAKING.md This snippet demonstrates how to migrate the `videoSrc` prop from a configuration object to a single `` element. The `src` and `type` properties from the config object map directly to the attributes of the `` element. This change is necessary because the `videoSrc` prop no longer accepts config objects. ```diff import HoverVideoPlayer from 'react-hover-video-player'; function MyComponent() { return ( + } /> ); } ``` -------------------------------- ### Force Video Player to Play with Focused Prop Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Forces the video player to play regardless of user interactions when set to true. This is useful for implementing custom playback controls or ensuring video playback in specific scenarios. ```jsx const [isVideoPlaying, setIsVideoPlaying] = useState(false); ... ``` -------------------------------- ### Set Video Volume in React Hover Video Player Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md The `volume` prop accepts a number between 0 and 1 to set the audio playback volume. This prop only functions when the `muted` prop is set to `false`. ```jsx ``` -------------------------------- ### Custom Hover Trigger with hoverTarget Prop Source: https://context7.com/gyanreyer/react-hover-video-player/llms.txt The `hoverTarget` prop enables the use of an alternative DOM element as the hover trigger for the video player. This is useful for scenarios where hovering over a parent element or an external component should initiate video playback. ```jsx import { useRef } from 'react'; import HoverVideoPlayer from 'react-hover-video-player'; function CardWithVideoPreview() { const cardRef = useRef(null); return ( } />

Video Title

Hover anywhere on this card to preview the video

); } ``` -------------------------------- ### disableDefaultEventHandling Source: https://github.com/gyanreyer/react-hover-video-player/blob/main/docs/README.md Disables the player's default event handling for mouse and touch interactions, allowing for custom behavior implementation. ```APIDOC ## disableDefaultEventHandling ### Description Accepts a boolean value which, if true, will disable the player's default built-in event handling where `onMouseEnter` and `onTouchStart` events play the video and `onMouseLeave` events and `touchStart` events outside of the player pause the video. This can be useful if you want to build a fully custom implementation of the player's behavior using the [focused](#focused) prop. ### Type `boolean` ### Default `false` ### Request Example ```jsx ``` ```