forked from cybrespace/pinafore
44 lines
845 B
HTML
44 lines
845 B
HTML
|
<div class="non-autoplay-gifv" style="width: {{width}}px; height: {{height}}px;"
|
||
|
|
on:mouseover="onMouseOver(event)"
|
||
|
|
ref:node
|
||
|
|
>
|
||
|
|
{{#if playing}}
|
||
|
|
<video
|
||
|
|
class="{{class}}"
|
||
|
|
aria-label="{{label}}"
|
||
|
|
poster="{{poster}}"
|
||
|
|
src="{{src}}"
|
||
|
|
width="{{width}}"
|
||
|
|
height="{{height}}"
|
||
|
|
autoplay
|
||
|
|
muted
|
||
|
|
loop
|
||
|
|
playsinline
|
||
|
|
/>
|
||
|
|
{{else}}
|
||
|
|
<img class="{{class}}"
|
||
|
|
alt="{{label}}"
|
||
|
|
src="{{staticSrc}}"
|
||
|
|
width="{{width}}"
|
||
|
|
height="{{height}}"
|
||
|
|
/>
|
||
|
|
{{/if}}
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
.non-autoplay-gifv {
|
||
|
|
cursor: zoom-in;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
import { mouseover } from '../_utils/events'
|
||
|
|
export default {
|
||
|
|
methods: {
|
||
|
|
onMouseOver(mouseOver) {
|
||
|
|
this.set({playing: mouseOver})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
events: {
|
||
|
|
mouseover
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|