@wix/video 1.72.0 → 1.78.0

package/README.md

@@ -17,18 +17,20 @@ function Example() {
         uri: "video-base-uri",
         name: "My Video",
         sources: [/* video sources */],
-        hasAudio: true
-      }}
-      poster={{
+        hasAudio: true,
+        poster: {
         uri: "poster-image-uri",
         width: 1920,
         height: 1080
+        }
       }}
       muted={true}
       loop={true}
       autoplay={true}
       videoRef={videoRef}
       qualityPolicy="proportional"
+      focalPoint={{ x: 50, y: 50 }}
+      onError={(error) => console.error('Video error:', error)}
     />
   );
 }
@@ -52,26 +54,29 @@ or:
 | --------- | ---- | ------- | ----------- |
 | id | string | - | Required unique identifier for the video element |
 | videoMedia | object | - | Video source information (see details below) |
-| poster | object | - | Poster image that displays before video plays (Image props) |
-| alt | string | '' | Alternate text for the video for accessibility |
 | muted | boolean | - | Whether the video's audio is muted |
 | loop | boolean | - | Whether the video should loop when it reaches the end |
 | autoplay | boolean | - | Whether the video should start playing automatically when loaded |
 | playbackRate | number | 1 | Playback speed of the video |
 | posterEffect | 'fade' | - | Effect to apply when transitioning from poster to video |
-| videoRef | React.RefObject<HTMLVideoElement> | - | React ref to access the underlying video element |
-| qualityPolicy | 'proportional' \| 'adaptive' \| 'highest' | Video quality selection strategy: `'proportional'` - dynamically selects quality based on container size, `'adaptive'` - uses adaptive sources (HLS/DASH), `'highest'` - always uses the highest resolution available |
+| videoRef | React.RefObject\<HTMLVideoElement\> | - | React ref to access the underlying video element |
+| qualityPolicy | 'proportional' \| 'adaptive' \| 'highest' | 'proportional' | Video quality selection strategy: `'proportional'` - dynamically selects quality based on container size, `'adaptive'` - uses adaptive sources (HLS/DASH), `'highest'` - always uses the highest resolution available |
+| focalPoint | { x: number; y: number } | - | Focal point for video positioning (values typically 0-100) |
+| motionPart | string | - | Optional identifier for motion/animation part integration |
+| onError | (error: Error) => void | - | Callback function invoked when a video playback error occurs |
 
 ### videoMedia Object
 
 | Property | Type | Required | Description |
 | -------- | ---- | -------- | ----------- |
 | uri | string | Yes | Base URI for the video |
-| name | string | No | Name of the video |
+| name | string | No | Name of the video (also used as alt text for the poster) |
+| poster | ImageMedia | No | Poster image that displays before video plays (see @wix/image for ImageMedia type) |
 | sources | VideoSource[] | No | Array of video sources with different qualities (see below) |
 | adaptiveSources | AdaptiveVideoSource[] | No | Array of adaptive video sources (HLS/DASH) |
 | hasAudio | boolean | No | Whether the video has audio |
 | fps | number | No | Frames per second |
+| duration | number | No | Video duration in seconds (used to skip adaptive streaming for short videos < 40s) |
 
 ### VideoSource Object
 
@@ -94,9 +99,11 @@ or:
 - Automatic quality selection based on container size
 - Supports poster images with transition effects
 - Custom playback rate
-- Accessibility support through alt text
+- Focal point positioning for video framing
 - Responsive scaling and positioning
 - Support for adaptive streaming (HLS/DASH)
+- Error handling via callback
+- Reduced motion preference support
 
 ## Technical Details
 

package/dist/statics/janet/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="main.d8a321d6.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="main.87c66cdb.iframe.bundle.js"></script></body></html>