forked from cybrespace/pinafore
45 lines
891 B
HTML
45 lines
891 B
HTML
<div class="non-autoplay-gifv" style="width: {{width}}px; height: {{height}}px;"
|
|
on:mouseover="onMouseOver(event)"
|
|
ref:node
|
|
>
|
|
{{#if playing}}
|
|
<video
|
|
style="background: url({{staticSrc}});"
|
|
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> |