64 lines
1.4 KiB
HTML
64 lines
1.4 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}}
|
|
<LazyImage
|
|
alt="{{label}}"
|
|
src="{{staticSrc}}"
|
|
fallback="{{oneTransparentPixel}}"
|
|
:width
|
|
:height
|
|
background="var(--loading-bg)"
|
|
className="{{class}}"
|
|
/>
|
|
{{/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 PlayVideoIcon from './PlayVideoIcon.html'
|
|
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
|
|
import LazyImage from './LazyImage.html'
|
|
|
|
export default {
|
|
methods: {
|
|
onMouseOver(mouseOver) {
|
|
this.set({playing: mouseOver})
|
|
}
|
|
},
|
|
events: {
|
|
mouseover
|
|
},
|
|
data: () => ({
|
|
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
|
|
}),
|
|
components: {
|
|
PlayVideoIcon,
|
|
LazyImage
|
|
}
|
|
}
|
|
</script> |