Skip to content

Commit

Permalink
Merge pull request #6 from apivideo/add-video-style-attributes
Browse files Browse the repository at this point in the history 
Add videoStyleObjectFit and videoStyleTransform attributes
  • Loading branch information
@olivier-lando
olivier-lando authored Jun 23, 2022
2 parents 71de349 + 9b9f0f6 commit 482b2f4
Show file tree
Hide file tree
Showing 5 changed files with 2,318 additions and 1,868 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
# Changelog
All changes to this project will be documented in this file.

## [1.0.0] - 2022-06-23
- Add `videoStyleObjectFit` and `videoStyleTransform` attributes

## [0.1.3] - 2022-04-27
- Add requestFullscreen(), exitFullscreen(), requestPictureInPicture() and exitPictureInPicture()

Expand Down
36 changes: 19 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,23 +60,25 @@ import ApiVideoPlayer from '@api.video/react-player'

The following properties are used to configure the player. The value of each of these properties can be changed at any time during the playback.

| Property | Mandatory | Type | Description | Default |
| ------------- | --------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | --------- |
| video | **yes** | {<br>&nbsp;&nbsp;id: string;<br>&nbsp;&nbsp;live?: boolean; <br>&nbsp;&nbsp;token?: string;<br>} | `id`: id of the video to play<br>`token` (optional): secret video token<br>`live` (optional): true for live videos | |
| style | no | React.CSSProperties | CSS style to apply to the player container | {} |
| autoplay | no | boolean | Define if the video should start playing as soon as it is loaded | false |
| muted | no | boolean | The video is muted | false |
| metadata | no | { [key: string]: string } | Object containing [metadata](https://api.video/blog/tutorials/dynamic-metadata) (see **example** below) | {} |
| hidePoster | no | boolean | Weither if the poster image displayed before the first play of the video should be hidden | false |
| chromeless | no | boolean | Chromeless mode: all controls are hidden | false |
| loop | no | boolean | Once the video is finished it automatically starts again | false |
| hideTitle | no | boolean | The video title is hidden | false |
| playbackRate | no | number | The playback rate of the video: 1 for normal, 2 for x2, etc. | 1 |
| showSubtitles | no | boolean | Determine if the video subtitles should be displayed | false |
| volume | no | number | The audio volume. From 0 to 1 (0 = muted, 1 = 100%) | 1 |
| controls | no | ControlName[] | List of controls to display. If not specified and chromeless=false, all controls are displayed, see below [controls](#controls) | undefined |
| theme | no | PlayerTheme | Theme to apply to the player, see below [player theme](#player-theme). If not specified, the default theme is used | undefined |
| responsive | no | boolean | Weither if the player shoulb be responsive. See below [responsiveness](#responsiveness) | false |
| Property | Mandatory | Type | Description | Default |
| ------------------- | --------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | --------- |
| video | **yes** | {<br>&nbsp;&nbsp;id: string;<br>&nbsp;&nbsp;live?: boolean; <br>&nbsp;&nbsp;token?: string;<br>} | `id`: id of the video to play<br>`token` (optional): secret video token<br>`live` (optional): true for live videos | |
| style | no | React.CSSProperties | CSS style to apply to the player container | {} |
| autoplay | no | boolean | Define if the video should start playing as soon as it is loaded | false |
| muted | no | boolean | The video is muted | false |
| metadata | no | { [key: string]: string } | Object containing [metadata](https://api.video/blog/tutorials/dynamic-metadata) (see **example** below) | {} |
| hidePoster | no | boolean | Weither if the poster image displayed before the first play of the video should be hidden | false |
| chromeless | no | boolean | Chromeless mode: all controls are hidden | false |
| loop | no | boolean | Once the video is finished it automatically starts again | false |
| hideTitle | no | boolean | The video title is hidden | false |
| playbackRate | no | number | The playback rate of the video: 1 for normal, 2 for x2, etc. | 1 |
| showSubtitles | no | boolean | Determine if the video subtitles should be displayed | false |
| volume | no | number | The audio volume. From 0 to 1 (0 = muted, 1 = 100%) | 1 |
| controls | no | ControlName[] | List of controls to display. If not specified and chromeless=false, all controls are displayed, see below [controls](#controls) | undefined |
| theme | no | PlayerTheme | Theme to apply to the player, see below [player theme](#player-theme). If not specified, the default theme is used | undefined |
| responsive | no | boolean | Weither if the player shoulb be responsive. See below [responsiveness](#responsiveness) | false |
| videoStyleObjectFit | no | "contain" \| "cover" \| "fill" \| "none" \| "scale-down" | The `object-fit` CSS value of the video tag | undefined |
| videoStyleTransform | no | string | The `transform` CSS value of the video tag (examples: "rotateY(180deg)") | undefined |

#### Controls

Expand Down
Loading

0 comments on commit 482b2f4

Please sign in to comment.