mirror of
https://github.com/anatolykopyl/vue-three-d-mockup.git
synced 2026-03-26 12:55:08 +00:00
Added video option
This commit is contained in:
17
README.md
17
README.md
@@ -13,7 +13,6 @@ $ npm install github:anatolykopyl/vue-three-d-mockup
|
||||
```html
|
||||
<Mockup
|
||||
screenImg="screen.png"
|
||||
lightClr="hsl(0, 100%, 100%)"
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -44,6 +43,20 @@ export default {
|
||||
```
|
||||
|
||||
### props:
|
||||
|
||||
- `screenImg`: path to image that will be displayed on the phones screen
|
||||
- `lightClr`: color of the light in the environment
|
||||
- `video`: the video element displayed on the phones screen. When using this option there are caveats, watch below
|
||||
- `lightClr`: color of the light
|
||||
- `phoneClr`: color of the phone
|
||||
- `rotation`: object with x, y and z rotation values
|
||||
|
||||
### Caveats:
|
||||
|
||||
- The `video` prop is unreactive, so when using it it's important to
|
||||
only render the `Mockup` element when the video is loaded. Check out
|
||||
[Demo.vue](src/Demo.vue) to see an example of how to do this.
|
||||
- The video on the model will not be shown if the original `<video>`
|
||||
element is hidden with `display: none`, so use `visibility: hidden`
|
||||
instead.
|
||||
- The video may not be autoplaying if the original `<video>` element
|
||||
is scrolled off screen.
|
||||
|
||||
Reference in New Issue
Block a user