Added video option

This commit is contained in:
2022-01-30 03:18:33 +03:00
parent 36c46f9064
commit a0b30cafd3
5 changed files with 124 additions and 41 deletions

View File

@@ -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.