pinafore/routes/_components/NonAutoplayGifv.html

55 lines
1.3 KiB
HTML
Raw Normal View History

2018-02-02 02:48:59 +00:00
<div class="non-autoplay-gifv" style="width: {{width}}px; height: {{height}}px;"
on:mouseover="onMouseOver(event)"
ref:node
>
{{#if playing}}
<video
2018-02-05 00:34:54 +00:00
style="background: url({{staticSrc}});"
2018-02-02 02:48:59 +00:00
class="{{class}}"
aria-label="{{label}}"
poster="{{poster}}"
src="{{src}}"
width="{{width}}"
height="{{height}}"
autoplay
muted
loop
playsinline
/>
{{else}}
<img class="{{class}} {{imageError ? 'image-error' : ''}}"
2018-02-02 02:48:59 +00:00
alt="{{label}}"
src="{{imageError ? oneTransparentPixel : staticSrc}}"
2018-02-02 02:48:59 +00:00
width="{{width}}"
height="{{height}}"
on:imgLoad="set({imageLoaded: true})"
on:imgLoadError="set({imageError: true})"
2018-02-02 02:48:59 +00:00
/>
{{/if}}
</div>
<style>
.non-autoplay-gifv {
cursor: zoom-in;
}
</style>
<script>
import { mouseover } from '../_utils/events'
import { imgLoad, imgLoadError } from '../_utils/events'
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
2018-02-02 02:48:59 +00:00
export default {
methods: {
onMouseOver(mouseOver) {
this.set({playing: mouseOver})
}
},
events: {
mouseover,
imgLoad,
imgLoadError
},
data: () => ({
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
})
2018-02-02 02:48:59 +00:00
}
</script>