64 lines
1.5 KiB
HTML
64 lines
1.5 KiB
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}} {{imageError ? 'image-error' : ''}}"
|
|
alt="{{label}}"
|
|
src="{{imageError ? oneTransparentPixel : staticSrc}}"
|
|
width="{{width}}"
|
|
height="{{height}}"
|
|
on:imgLoad="set({imageLoaded: true})"
|
|
on:imgLoadError="set({imageError: true})"
|
|
/>
|
|
{{/if}}
|
|
<PlayVideoIcon className="{{playing ? 'hidden' : ''}}"/>
|
|
</div>
|
|
<style>
|
|
.non-autoplay-gifv {
|
|
cursor: zoom-in;
|
|
position: relative;
|
|
}
|
|
:global(.non-autoplay-gifv .play-video-icon) {
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { mouseover } from '../_utils/events'
|
|
import { imgLoad, imgLoadError } from '../_utils/events'
|
|
import PlayVideoIcon from './PlayVideoIcon.html'
|
|
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
|
|
|
|
export default {
|
|
methods: {
|
|
onMouseOver(mouseOver) {
|
|
this.set({playing: mouseOver})
|
|
}
|
|
},
|
|
events: {
|
|
mouseover,
|
|
imgLoad,
|
|
imgLoadError
|
|
},
|
|
data: () => ({
|
|
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
|
|
}),
|
|
components: {
|
|
PlayVideoIcon
|
|
}
|
|
}
|
|
</script> |