diff --git a/.woodpecker.env b/.woodpecker.env
index 7d3d51bdd91..f18ee8b40f1 100644
--- a/.woodpecker.env
+++ b/.woodpecker.env
@@ -1,3 +1,3 @@
 # The version of OpenCloud to use in pipelines
-OPENCLOUD_COMMITID=cd9095833af0ba1dc7449194e62799931d38a7b1
+OPENCLOUD_COMMITID=81536bbd0e10edfe7fc7ce8a7cee7fadf09c3316
 OPENCLOUD_BRANCH=main
diff --git a/.woodpecker.star b/.woodpecker.star
index 931e991021d..52dfcdc4473 100644
--- a/.woodpecker.star
+++ b/.woodpecker.star
@@ -2,7 +2,7 @@ repo_slug = "opencloud-eu/web"
 docker_repo_slug = "opencloudeu/web"
 
 ALPINE_GIT = "alpine/git:latest"
-APACHE_TIKA = "apache/tika:2.8.0.0"
+APACHE_TIKA = "apache/tika:4.1.0-SNAPSHOT"
 
 # renovate: datasource=docker depName=collabora/code
 COLLABORA_CODE = "collabora/code:26.04.2.4.1"
diff --git a/dev/docker/opencloud/csp.yaml b/dev/docker/opencloud/csp.yaml
index d4aac0e6787..7feeada6692 100644
--- a/dev/docker/opencloud/csp.yaml
+++ b/dev/docker/opencloud/csp.yaml
@@ -35,6 +35,7 @@ directives:
     - '''self'''
   media-src:
     - '''self'''
+    - 'blob:'
   object-src:
     - '''self'''
     - 'blob:'
diff --git a/docker-compose.yml b/docker-compose.yml
index 9cdf7503036..3cad59ad1c9 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -304,7 +304,7 @@ services:
       - traefik
 
   tika:
-    image: apache/tika:3.3.1.0
+    image: apache/tika:4.1.0-SNAPSHOT
     container_name: web_tika
     ports:
       - 9998:9998
diff --git a/packages/design-system/src/assets/icons/motion-pause-line.svg b/packages/design-system/src/assets/icons/motion-pause-line.svg
new file mode 100644
index 00000000000..a0b6b07504d
--- /dev/null
+++ b/packages/design-system/src/assets/icons/motion-pause-line.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9 9H11V15H9M13 9H15V15H13M22 12C22 6.46 17.54 2 12 2C10.83 2 9.7 2.19 8.62 2.56L9.32 4.5C10.17 4.16 11.06 3.97 12 3.97C16.41 3.97 20.03 7.59 20.03 12C20.03 16.41 16.41 20.03 12 20.03C7.59 20.03 3.97 16.41 3.97 12C3.97 11.06 4.16 10.12 4.5 9.28L2.56 8.62C2.19 9.7 2 10.83 2 12C2 17.54 6.46 22 12 22C17.54 22 22 17.54 22 12"/><g class="motion-dot"><path d="M5.47 3.97C6.32 3.97 7 4.68 7 5.47C7 6.32 6.32 7 5.47 7C4.68 7 3.97 6.32 3.97 5.47C3.97 4.68 4.68 3.97 5.47 3.97Z"/></g></svg>
diff --git a/packages/design-system/src/assets/icons/motion-play-line.svg b/packages/design-system/src/assets/icons/motion-play-line.svg
new file mode 100644
index 00000000000..e0e8555f1d5
--- /dev/null
+++ b/packages/design-system/src/assets/icons/motion-play-line.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M10 16.5L16 12L10 7.5M22 12C22 6.46 17.54 2 12 2C10.83 2 9.7 2.19 8.62 2.56L9.32 4.5C10.17 4.16 11.06 3.97 12 3.97C16.41 3.97 20.03 7.59 20.03 12C20.03 16.41 16.41 20.03 12 20.03C7.59 20.03 3.97 16.41 3.97 12C3.97 11.06 4.16 10.12 4.5 9.28L2.56 8.62C2.19 9.7 2 10.83 2 12C2 17.54 6.46 22 12 22C17.54 22 22 17.54 22 12"/><g class="motion-dot"><path d="M5.47 3.97C6.32 3.97 7 4.68 7 5.47C7 6.32 6.32 7 5.47 7C4.68 7 3.97 6.32 3.97 5.47C3.97 4.68 4.68 3.97 5.47 3.97Z"/></g></svg>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 66db32e9cf7..6a528c1002d 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -5,13 +5,20 @@
         class="relative flex items-center justify-center bg-role-surface-container rounded-xl p-4 mb-4"
       >
         <div v-if="preview" data-testid="preview">
-          <img
-            key="file-thumbnail"
-            :src="preview"
-            class="details-preview h-[160px]"
-            alt=""
-            decoding="async"
-          />
+          <motion-photo-overlay
+            :resource="resource"
+            :space="space"
+            badge-size-class="size-5"
+            badge-class="top-1 right-1"
+          >
+            <img
+              key="file-thumbnail"
+              :src="preview"
+              class="details-preview h-[160px]"
+              alt=""
+              decoding="async"
+            />
+          </motion-photo-overlay>
         </div>
         <resource-icon
           v-else
@@ -172,7 +179,7 @@ import {
   isTrashResource,
   ShareTypes
 } from '@opencloud-eu/web-client'
-import { useGetMatchingSpace } from '@opencloud-eu/web-pkg'
+import { MotionPhotoOverlay, useGetMatchingSpace } from '@opencloud-eu/web-pkg'
 import { formatFileSize, formatRelativeDateFromJSDate } from '@opencloud-eu/web-pkg'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 6dbb00206c1..d0121eabbd1 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -40,6 +40,13 @@
             {{ $gettext('Failed to load "%{filename}"', { filename: activeMediaFile.name }) }}
           </p>
         </div>
+        <media-motion-photo
+          v-else-if="activeMediaFile.isMotionPhoto"
+          ref="motionPlayer"
+          :key="activeMediaFile.id"
+          :file="activeMediaFile"
+          :current-image-rotation="currentImageRotation"
+        />
         <media-image
           v-else-if="activeMediaFile.isImage"
           :file="activeMediaFile"
@@ -64,8 +71,11 @@
         :is-full-screen-mode-activated="isFullScreenModeActivated"
         :is-folder-loading="isFolderLoading"
         :show-image-controls="activeMediaFile?.isImage && !activeMediaFile?.isError"
+        :show-motion-control="activeMediaFile?.isMotionPhoto && !activeMediaFile?.isError"
+        :is-motion-playing="motionPlayer?.isPlaying"
         :current-image-rotation="currentImageRotation"
         :photo-roll-enabled="photoRollEnabled"
+        @toggle-motion="motionPlayer?.toggle()"
         @set-rotation-right="imageRotateRight"
         @set-rotation-left="imageRotateLeft"
         @set-zoom="imageZoom"
@@ -93,6 +103,7 @@ import {
   watch
 } from 'vue'
 import omit from 'lodash-es/omit'
+import isEmpty from 'lodash-es/isEmpty'
 import { IncomingShareResource, Resource } from '@opencloud-eu/web-client'
 import {
   createFileRouteOptions,
@@ -115,6 +126,7 @@ import {
 import MediaControls from './components/MediaControls.vue'
 import MediaAudio from './components/Sources/MediaAudio.vue'
 import MediaImage from './components/Sources/MediaImage.vue'
+import MediaMotionPhoto from './components/Sources/MediaMotionPhoto.vue'
 import MediaVideo from './components/Sources/MediaVideo.vue'
 import PhotoRoll from './components/PhotoRoll.vue'
 import { MediaFile } from './helpers/types'
@@ -172,6 +184,7 @@ const isAutoPlayEnabled = ref(true)
 const isAutoAdvancing = ref(false)
 const photoRollEnabled = ref(true)
 const preview = useTemplateRef<HTMLElement>('preview')
+const motionPlayer = useTemplateRef<{ isPlaying: boolean; toggle: () => void }>('motionPlayer')
 const keyBindings: string[] = []
 let loadPreviewImageController: AbortController = null
 
@@ -233,6 +246,7 @@ const buildMediaFiles = () => {
       isVideo: isFileTypeVideo(file),
       isImage: isFileTypeImage(file),
       isAudio: isFileTypeAudio(file),
+      isMotionPhoto: isFileTypeImage(file) && !isEmpty(file.motionPhoto),
       isLoading: true,
       isError: false,
       resource: file
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index 9e209eddbae..5fd793f78f4 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -110,6 +110,17 @@
           />
         </oc-button>
       </div>
+      <oc-button
+        v-if="showMotionControl"
+        v-oc-tooltip="motionDescription"
+        class="preview-controls-motion raw-hover-surface p-1"
+        data-testid="motion-photo-toggle"
+        appearance="raw"
+        :aria-label="motionDescription"
+        @click="emit('toggleMotion')"
+      >
+        <oc-icon fill-type="line" :name="isMotionPlaying ? 'pause-circle' : 'play-circle'" />
+      </oc-button>
 
       <template v-if="showFavoriteButton || showDeleteButton">
         <span
@@ -163,6 +174,8 @@ const {
   isFullScreenModeActivated = false,
   isFolderLoading = false,
   showImageControls = false,
+  showMotionControl = false,
+  isMotionPlaying = false,
   currentImageRotation = 0
 } = defineProps<{
   files: MediaFile[]
@@ -170,6 +183,8 @@ const {
   isFullScreenModeActivated?: boolean
   isFolderLoading?: boolean
   showImageControls?: boolean
+  showMotionControl?: boolean
+  isMotionPlaying?: boolean
   currentImageRotation?: number
   photoRollEnabled?: boolean
 }>()
@@ -187,6 +202,7 @@ const emit = defineEmits<{
   (e: 'resetImage'): void
   (e: 'deleteResource'): void
   (e: 'togglePhotoRoll'): void
+  (e: 'toggleMotion'): void
 }>()
 
 const { $gettext } = useGettext()
@@ -274,4 +290,7 @@ const imageRotateRightDescription = computed(() =>
 )
 const previousDescription = computed(() => $gettext('Show previous media file in folder'))
 const nextDescription = computed(() => $gettext('Show next media file in folder'))
+const motionDescription = computed(() =>
+  isMotionPlaying ? $gettext('Pause motion photo') : $gettext('Play motion photo')
+)
 </script>
diff --git a/packages/web-app-preview/src/components/PhotoRollItem.vue b/packages/web-app-preview/src/components/PhotoRollItem.vue
index b18406adc90..7e553618844 100644
--- a/packages/web-app-preview/src/components/PhotoRollItem.vue
+++ b/packages/web-app-preview/src/components/PhotoRollItem.vue
@@ -12,17 +12,24 @@
       :aria-current="isActive ? 'true' : 'false'"
       @click="$emit('select')"
     >
-      <img
-        v-if="item && item.resource.thumbnail"
-        :src="item.resource.thumbnail"
-        class="object-cover h-25 rounded-md aspect-video"
-        :alt="item.name"
-        referrerpolicy="no-referrer"
-        decoding="async"
-      />
-      <div v-else class="aspect-video h-25 flex items-center justify-center">
-        <resource-icon class="aspect-video" :resource="iconResource" size-class="size-12" />
-      </div>
+      <motion-photo-overlay
+        class="mx-auto w-fit"
+        :resource="item.resource"
+        badge-class="top-0 right-0 m-1"
+        video-class="rounded-md"
+      >
+        <img
+          v-if="item && item.resource.thumbnail"
+          :src="item.resource.thumbnail"
+          class="object-cover h-25 rounded-md aspect-video"
+          :alt="item.name"
+          referrerpolicy="no-referrer"
+          decoding="async"
+        />
+        <div v-else class="aspect-video h-25 flex items-center justify-center">
+          <resource-icon class="aspect-video" :resource="iconResource" size-class="size-12" />
+        </div>
+      </motion-photo-overlay>
       <span class="w-full">
         <resource-name
           :name="item.resource.name"
@@ -43,7 +50,12 @@
 <script setup lang="ts">
 import { Resource } from '@opencloud-eu/web-client'
 import { MediaFile } from '../helpers/types'
-import { ResourceIcon, ResourceName, useResourcesStore } from '@opencloud-eu/web-pkg'
+import {
+  MotionPhotoOverlay,
+  ResourceIcon,
+  ResourceName,
+  useResourcesStore
+} from '@opencloud-eu/web-pkg'
 import { useIsVisible } from '@opencloud-eu/design-system/composables'
 import { computed, ref, useTemplateRef } from 'vue'
 
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index a972ca66c55..e0115d62934 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -10,6 +10,16 @@
       @loaded="initPanzoom"
     />
   </div>
+  <div
+    v-else-if="$slots.overlay"
+    ref="img"
+    :key="`media-image-wrapper-${file.id}`"
+    class="relative grid size-full grid-cols-[100%] grid-rows-[100%] place-items-center pt-4 [&>*]:[grid-area:1/1]"
+    :data-id="file.id"
+  >
+    <img :src="file.url" :alt="file.name" class="max-w-full max-h-full" />
+    <slot name="overlay" />
+  </div>
   <img
     v-else
     ref="img"
@@ -47,6 +57,8 @@ const { file, currentImageRotation } = defineProps<{
 
 const eventBus = useEventBus()
 
+// with an overlay slot this is a stage-filling wrapper around the still: a
+// content-sized wrapper would void the percentage max-w/max-h of its children
 const img = useTemplateRef<HTMLElement>('img')
 const panzoom = ref<PanzoomObject>()
 const isSvgImage = computed(() => file.mimeType === 'image/svg+xml')
diff --git a/packages/web-app-preview/src/components/Sources/MediaMotionPhoto.vue b/packages/web-app-preview/src/components/Sources/MediaMotionPhoto.vue
new file mode 100644
index 00000000000..141d2c04956
--- /dev/null
+++ b/packages/web-app-preview/src/components/Sources/MediaMotionPhoto.vue
@@ -0,0 +1,74 @@
+<template>
+  <media-image :file="file" :current-image-rotation="currentImageRotation">
+    <template #overlay>
+      <video
+        v-if="isPlaying"
+        :key="`motion-photo-video-${file.id}`"
+        :src="videoUrl"
+        :loop="looping"
+        muted
+        autoplay
+        playsinline
+        preload="auto"
+        class="max-w-full max-h-full object-contain"
+        data-testid="motion-photo-video"
+        @loadedmetadata="seekToStill"
+        @ended="onEnded"
+        @error="stop"
+      />
+      <oc-spinner
+        v-if="isLoading && !isPlaying"
+        class="absolute inset-0 m-auto"
+        size="large"
+        :aria-label="$gettext('Loading motion photo')"
+      />
+    </template>
+  </media-image>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useGetMatchingSpace, useMotionPhotoPlayback } from '@opencloud-eu/web-pkg'
+import { MediaFile } from '../../helpers/types'
+import MediaImage from './MediaImage.vue'
+
+const { file, currentImageRotation } = defineProps<{
+  file: MediaFile
+  currentImageRotation: number
+}>()
+
+const { $gettext } = useGettext()
+const { getMatchingSpace } = useGetMatchingSpace()
+
+const { isPlaying, isLoading, videoUrl, play, stop, seekToStill } = useMotionPhotoPlayback(
+  () => file.resource,
+  () => getMatchingSpace(file.resource)
+)
+
+// auto-play on open runs once, playback started from the controls loops
+const looping = ref(false)
+
+const onEnded = () => {
+  if (!unref(looping)) {
+    stop()
+  }
+}
+
+const togglePlayback = () => {
+  if (unref(isPlaying)) {
+    looping.value = false
+    stop()
+  } else {
+    looping.value = true
+    play()
+  }
+}
+
+onMounted(() => {
+  looping.value = false
+  play()
+})
+
+defineExpose({ isPlaying, toggle: togglePlayback })
+</script>
diff --git a/packages/web-app-preview/src/helpers/types.ts b/packages/web-app-preview/src/helpers/types.ts
index 8946ff9a130..3b63cef96f4 100644
--- a/packages/web-app-preview/src/helpers/types.ts
+++ b/packages/web-app-preview/src/helpers/types.ts
@@ -9,6 +9,7 @@ export type MediaFile = {
   isVideo: boolean
   isImage: boolean
   isAudio: boolean
+  isMotionPhoto: boolean
   isLoading: boolean
   isError: boolean
   resource: Resource
diff --git a/packages/web-app-preview/tests/unit/components/MediaMotionPhoto.spec.ts b/packages/web-app-preview/tests/unit/components/MediaMotionPhoto.spec.ts
new file mode 100644
index 00000000000..ce458b83f46
--- /dev/null
+++ b/packages/web-app-preview/tests/unit/components/MediaMotionPhoto.spec.ts
@@ -0,0 +1,115 @@
+import MediaMotionPhoto from '../../../src/components/Sources/MediaMotionPhoto.vue'
+import { defaultComponentMocks, defaultPlugins, shallowMount } from '@opencloud-eu/web-test-helpers'
+import { flushPromises } from '@vue/test-utils'
+import { mock } from 'vitest-mock-extended'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { MediaFile } from '../../../src/helpers/types'
+
+vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useGetMatchingSpace: () => ({ getMatchingSpace: () => mock<SpaceResource>() })
+}))
+
+const mediaFile = (motionPhoto: unknown = { videoSize: 120000, presentationTimestampUs: 0 }) =>
+  ({
+    id: 'mp1',
+    name: 'motion.jpg',
+    url: 'blob:still',
+    ext: 'jpg',
+    mimeType: 'image/jpeg',
+    isVideo: false,
+    isImage: true,
+    isAudio: false,
+    isMotionPhoto: true,
+    isLoading: false,
+    isError: false,
+    resource: {
+      id: 'mp1',
+      fileId: 'mp1',
+      path: '/motion.jpg',
+      size: 200000,
+      motionPhoto
+    } as unknown as Resource
+  }) as MediaFile
+
+describe('MediaMotionPhoto component', () => {
+  beforeEach(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:video')
+    global.URL.revokeObjectURL = vi.fn()
+  })
+
+  it('shows the still image and auto-plays the embedded video once on mount', async () => {
+    const { wrapper, mocks } = getWrapper()
+    expect(wrapper.find('img').exists()).toBe(true)
+
+    await flushPromises()
+
+    expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalled()
+    const video = wrapper.find('[data-testid="motion-photo-video"]')
+    expect(video.exists()).toBe(true)
+    expect(video.attributes('loop')).toBeUndefined()
+  })
+
+  it('reverts to the still when the initial auto-play ends', async () => {
+    const { wrapper } = getWrapper()
+    await flushPromises()
+
+    await wrapper.find('[data-testid="motion-photo-video"]').trigger('ended')
+
+    expect(wrapper.find('[data-testid="motion-photo-video"]').exists()).toBe(false)
+  })
+
+  it('loops on explicit toggle and keeps playing on ended', async () => {
+    const { wrapper } = getWrapper()
+    await flushPromises()
+    await wrapper.find('[data-testid="motion-photo-video"]').trigger('ended')
+    expect(wrapper.find('[data-testid="motion-photo-video"]').exists()).toBe(false)
+
+    ;(wrapper.vm as unknown as { toggle: () => void }).toggle()
+    await flushPromises()
+
+    const video = wrapper.find('[data-testid="motion-photo-video"]')
+    expect(video.exists()).toBe(true)
+    expect(video.attributes('loop')).toBeDefined()
+    await video.trigger('ended')
+    expect(wrapper.find('[data-testid="motion-photo-video"]').exists()).toBe(true)
+  })
+
+  it('stays a still image when the video cannot be located', async () => {
+    // videoSize larger than the file -> negative offset -> not playable
+    const { wrapper, mocks } = getWrapper({ file: mediaFile({ videoSize: 500000 }) })
+    await flushPromises()
+
+    expect(mocks.$clientService.webdav.getFileContents).not.toHaveBeenCalled()
+    expect(wrapper.find('[data-testid="motion-photo-video"]').exists()).toBe(false)
+    expect(wrapper.find('img').isVisible()).toBe(true)
+  })
+})
+
+function getWrapper({
+  file = mediaFile(),
+  body = new Blob([new Uint8Array(80)]),
+  status = 206
+}: { file?: MediaFile; body?: Blob; status?: number } = {}) {
+  const mocks = defaultComponentMocks()
+  mocks.$clientService.webdav.getFileContents.mockResolvedValue({ response: { status }, body })
+  return {
+    mocks,
+    wrapper: shallowMount(MediaMotionPhoto, {
+      props: { file, currentImageRotation: 0 },
+      global: {
+        plugins: [...defaultPlugins()],
+        mocks,
+        provide: mocks,
+        stubs: {
+          // MediaImage renders the still, keep only that and the overlay slot
+          MediaImage: {
+            template:
+              '<div class="media-image"><img :src="file.url" /><slot name="overlay" /></div>',
+            props: ['file', 'currentImageRotation']
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/packages/web-app-preview/tests/unit/components/PhotoRollItem.spec.ts b/packages/web-app-preview/tests/unit/components/PhotoRollItem.spec.ts
index f1d1a991ba4..4302199fab1 100644
--- a/packages/web-app-preview/tests/unit/components/PhotoRollItem.spec.ts
+++ b/packages/web-app-preview/tests/unit/components/PhotoRollItem.spec.ts
@@ -5,6 +5,7 @@ import {
   PartialComponentProps,
   shallowMount
 } from '@opencloud-eu/web-test-helpers'
+import { MotionPhotoOverlay } from '@opencloud-eu/web-pkg'
 import { mock } from 'vitest-mock-extended'
 import { MediaFile } from '../../../src/helpers/types'
 
@@ -15,6 +16,14 @@ describe('PhotoRoll component', () => {
     await button.trigger('click')
     expect(wrapper.emitted('select')).toBeTruthy()
   })
+
+  it('wraps the thumbnail in a motion photo overlay for the resource', () => {
+    const item = mock<MediaFile>({ isMotionPhoto: true })
+    const { wrapper } = getWrapper({ item })
+    const overlay = wrapper.findComponent(MotionPhotoOverlay)
+    expect(overlay.exists()).toBe(true)
+    expect(overlay.props('resource')).toBe(item.resource)
+  })
 })
 
 function getWrapper(props: PartialComponentProps<typeof PhotoRollItem> = {}) {
@@ -28,6 +37,7 @@ function getWrapper(props: PartialComponentProps<typeof PhotoRollItem> = {}) {
         ...props
       },
       global: {
+        renderStubDefaultSlot: true,
         plugins: [...defaultPlugins()],
         mocks: defaultMocks,
         provide: defaultMocks
diff --git a/packages/web-client/src/helpers/resource/functions.ts b/packages/web-client/src/helpers/resource/functions.ts
index 381a5e5ff1d..0095c5e666d 100644
--- a/packages/web-client/src/helpers/resource/functions.ts
+++ b/packages/web-client/src/helpers/resource/functions.ts
@@ -173,6 +173,7 @@ export function buildResource(
     location: convertObjectToCamelCaseKeys(resource.props[DavProperty.Location]),
     image: convertObjectToCamelCaseKeys(resource.props[DavProperty.Image]),
     photo: convertObjectToCamelCaseKeys(resource.props[DavProperty.Photo]),
+    motionPhoto: convertObjectToCamelCaseKeys(resource.props[DavProperty.MotionPhoto]),
     extraProps,
     hasPreview: () => resource.props[DavProperty.HasPreview] === 1,
     canUpload: function () {
diff --git a/packages/web-client/src/helpers/resource/types.ts b/packages/web-client/src/helpers/resource/types.ts
index 0e0561b17e0..84b6b3f736b 100644
--- a/packages/web-client/src/helpers/resource/types.ts
+++ b/packages/web-client/src/helpers/resource/types.ts
@@ -1,5 +1,13 @@
 import { DavFileInfoResponse } from '@opencloud-eu/web-client/webdav'
-import { Audio, GeoCoordinates, Identity, Image, Photo, User } from '../../graph/generated'
+import {
+  Audio,
+  GeoCoordinates,
+  Identity,
+  Image,
+  MotionPhoto,
+  Photo,
+  User
+} from '../../graph/generated'
 import { MongoAbility, SubjectRawRule } from '@casl/ability'
 import { DAVResultResponseProps, FileStat } from 'webdav'
 
@@ -45,6 +53,7 @@ export interface Resource {
   location?: GeoCoordinates
   image?: Image
   photo?: Photo
+  motionPhoto?: MotionPhoto
   path: string
   webDavPath?: string
   downloadURL?: string
diff --git a/packages/web-client/src/webdav/constants/dav.ts b/packages/web-client/src/webdav/constants/dav.ts
index 9911cda4b38..c2b200ce03c 100644
--- a/packages/web-client/src/webdav/constants/dav.ts
+++ b/packages/web-client/src/webdav/constants/dav.ts
@@ -1,4 +1,4 @@
-import { Audio, GeoCoordinates, Image, Photo } from '../../graph/generated'
+import { Audio, GeoCoordinates, Image, MotionPhoto, Photo } from '../../graph/generated'
 
 export abstract class DavPermission {
   static readonly Shared: string = 'S'
@@ -77,6 +77,10 @@ const DavPropertyMapping = {
     value: 'photo',
     type: null as Photo
   },
+  MotionPhoto: {
+    value: 'motion-photo',
+    type: null as MotionPhoto
+  },
   ETag: defString('getetag' as const),
   MimeType: defString('getcontenttype' as const),
   ResourceType: defStringArray('resourcetype' as const),
@@ -164,6 +168,7 @@ export abstract class DavProperties {
     DavProperty.Location,
     DavProperty.Image,
     DavProperty.Photo,
+    DavProperty.MotionPhoto,
     DavProperty.HasPreview
   ]
 
diff --git a/packages/web-client/tests/unit/helpers/resource/functions.spec.ts b/packages/web-client/tests/unit/helpers/resource/functions.spec.ts
index 42c6fb1fd2b..6a94803c957 100644
--- a/packages/web-client/tests/unit/helpers/resource/functions.spec.ts
+++ b/packages/web-client/tests/unit/helpers/resource/functions.spec.ts
@@ -134,6 +134,39 @@ describe('buildResource', () => {
     })
   })
 
+  describe('motionPhoto facet', () => {
+    it('maps the motion photo facet and camel-cases its keys', () => {
+      const webDavResponse = mockDeep<WebDavResponseResource>({
+        props: {
+          // PROPFIND delivers the nested keys in kebab-case, buildResource camelCases them
+          [DavProperty.MotionPhoto]: {
+            version: 1,
+            'presentation-timestamp-us': 500000,
+            'video-size': 1234567
+          } as never,
+          [DavProperty.Tags]: undefined
+        }
+      })
+      const resource = buildResource(webDavResponse)
+      expect(resource.motionPhoto).toEqual({
+        version: 1,
+        presentationTimestampUs: 500000,
+        videoSize: 1234567
+      })
+    })
+
+    it('leaves motionPhoto undefined when the facet is absent', () => {
+      const webDavResponse = mockDeep<WebDavResponseResource>({
+        props: {
+          [DavProperty.MotionPhoto]: undefined,
+          [DavProperty.Tags]: undefined
+        }
+      })
+      const resource = buildResource(webDavResponse)
+      expect(resource.motionPhoto).toBeUndefined()
+    })
+  })
+
   it('handles extraProps', () => {
     const webDavResponse = mockDeep<WebDavResponseResource>({
       props: {
diff --git a/packages/web-pkg/src/components/FilesList/MotionPhotoBadge.vue b/packages/web-pkg/src/components/FilesList/MotionPhotoBadge.vue
new file mode 100644
index 00000000000..ddd7338c92b
--- /dev/null
+++ b/packages/web-pkg/src/components/FilesList/MotionPhotoBadge.vue
@@ -0,0 +1,78 @@
+<template>
+  <component
+    :is="interactive ? 'button' : 'span'"
+    v-oc-tooltip="showTooltip ? tooltip : undefined"
+    class="motion-photo-badge inline-flex items-center justify-center text-white"
+    :class="[
+      sizeClass,
+      {
+        'pointer-events-none': !interactive,
+        'cursor-pointer': interactive,
+        'opacity-50': muted
+      }
+    ]"
+    :type="interactive ? 'button' : undefined"
+    :role="interactive ? undefined : 'img'"
+    :aria-label="tooltip"
+    data-testid="motion-photo-badge"
+  >
+    <oc-icon
+      :name="isPause ? 'motion-pause' : 'motion-play'"
+      fill-type="line"
+      :size-class="sizeClass"
+      class="motion-photo-badge-glyph drop-shadow-[0_1px_2px_rgba(0,0,0,0.65)]"
+      :class="{ 'motion-photo-badge-glyph--loading': loading }"
+    />
+    <span
+      v-if="interactive"
+      class="absolute -inset-3 hidden pointer-coarse:block"
+      aria-hidden="true"
+    />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+const {
+  sizeClass = 'size-4',
+  interactive = false,
+  muted = false,
+  loading = false,
+  icon = 'play-circle',
+  label: labelProp
+} = defineProps<{
+  sizeClass?: string
+  interactive?: boolean
+  muted?: boolean
+  loading?: boolean
+  icon?: string
+  label?: string
+}>()
+
+const isPause = computed(() => icon.includes('pause'))
+
+const { $gettext } = useGettext()
+const label = computed(() => labelProp ?? $gettext('Motion photo'))
+const tooltip = computed(() => (loading ? $gettext('Loading motion photo') : label.value))
+const showTooltip = computed(() => !interactive)
+</script>
+
+<style scoped>
+/* the icon's dot (separate <g> in the svg) orbits the ring while loading */
+.motion-photo-badge-glyph :deep(.motion-dot) {
+  transform-box: view-box;
+  transform-origin: 12px 12px;
+}
+
+.motion-photo-badge-glyph--loading :deep(.motion-dot) {
+  animation: motion-photo-badge-orbit 0.8s linear infinite;
+}
+
+@keyframes motion-photo-badge-orbit {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/packages/web-pkg/src/components/FilesList/MotionPhotoOverlay.vue b/packages/web-pkg/src/components/FilesList/MotionPhotoOverlay.vue
new file mode 100644
index 00000000000..86e4644b4d6
--- /dev/null
+++ b/packages/web-pkg/src/components/FilesList/MotionPhotoOverlay.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="relative" @mouseenter="player?.hoverPlay?.()" @mouseleave="player?.stop?.()">
+    <slot />
+    <motion-photo-player
+      v-if="isMotionPhoto"
+      ref="player"
+      :resource="resource"
+      :space="space"
+      :badge-size-class="badgeSizeClass"
+      :badge-class="badgeClass"
+      :video-class="videoClass"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import isEmpty from 'lodash-es/isEmpty'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import MotionPhotoPlayer from './MotionPhotoPlayer.vue'
+
+const {
+  resource,
+  space = undefined,
+  badgeSizeClass = 'size-4',
+  badgeClass = 'top-0 right-0',
+  videoClass = ''
+} = defineProps<{
+  resource: Resource
+  space?: SpaceResource
+  badgeSizeClass?: string
+  badgeClass?: string
+  videoClass?: string
+}>()
+
+const player = useTemplateRef<InstanceType<typeof MotionPhotoPlayer>>('player')
+const isMotionPhoto = computed(() => !isEmpty(resource?.motionPhoto))
+</script>
diff --git a/packages/web-pkg/src/components/FilesList/MotionPhotoPlayer.vue b/packages/web-pkg/src/components/FilesList/MotionPhotoPlayer.vue
new file mode 100644
index 00000000000..11e0f84ee68
--- /dev/null
+++ b/packages/web-pkg/src/components/FilesList/MotionPhotoPlayer.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="motion-photo-player absolute inset-0 pointer-events-none">
+    <div v-if="isPlaying && videoUrl" class="absolute inset-0 overflow-hidden" :class="videoClass">
+      <video
+        :src="videoUrl"
+        class="size-full object-cover"
+        muted
+        loop
+        autoplay
+        playsinline
+        @loadedmetadata="seekToStill"
+      />
+    </div>
+    <motion-photo-badge
+      class="absolute pointer-events-auto"
+      :class="badgeClass"
+      :size-class="badgeSizeClass"
+      :interactive="canPlay"
+      :muted="!canPlay"
+      :loading="isLoading"
+      :icon="isPlaying ? 'pause-circle' : 'play-circle'"
+      :label="badgeLabel"
+      @click.stop.prevent="toggle"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import MotionPhotoBadge from './MotionPhotoBadge.vue'
+import { useGetMatchingSpace, useMotionPhotoPlayback } from '../../composables'
+
+// Owns the playback state, so mount it only for motion photos. Pointer-transparent
+// apart from the badge; the parent drives hover-to-play via hoverPlay/stop.
+const {
+  resource,
+  space = undefined,
+  badgeSizeClass = 'size-4',
+  badgeClass = 'top-0 right-0',
+  videoClass = ''
+} = defineProps<{
+  resource: Resource
+  space?: SpaceResource
+  badgeSizeClass?: string
+  badgeClass?: string
+  videoClass?: string
+}>()
+
+const { $gettext } = useGettext()
+const { getMatchingSpace } = useGetMatchingSpace()
+
+const { isPlaying, isLoading, videoUrl, canPlay, hoverPlay, stop, toggle, seekToStill } =
+  useMotionPhotoPlayback(
+    () => resource,
+    () => space ?? getMatchingSpace(resource)
+  )
+
+const badgeLabel = computed(() => {
+  if (!unref(canPlay)) {
+    return $gettext('Motion photo (clip not available)')
+  }
+  return unref(isPlaying) ? $gettext('Pause motion photo') : $gettext('Play motion photo')
+})
+
+defineExpose({ isPlaying, hoverPlay, stop, toggle })
+</script>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index cdcae13436f..8d0271bdece 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -3,40 +3,49 @@
     class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"
     :class="{ 'pointer-events-none': !isResourceClickable }"
   >
-    <resource-link
+    <motion-photo-overlay
       v-if="isIconDisplayed"
-      v-oc-tooltip="isResourceClickable ? tooltipLabelIcon : undefined"
       :resource="resource"
-      :link="link"
-      :is-resource-clickable="isResourceClickable"
-      class="relative"
-      :class="{ 'hover:underline': isResourceClickable }"
-      :aria-label="
-        isResourceClickable ? $gettext('Open »%{name}«', { name: resource?.name ?? '' }) : undefined
-      "
-      @click="emitClick"
+      class="inline-flex"
+      badge-size-class="size-3"
+      video-class="rounded-xs"
     >
-      <oc-image
-        v-if="hasThumbnail"
-        :key="thumbnail"
-        v-oc-tooltip="tooltipLabelIcon"
-        :src="thumbnail"
-        :data-test-thumbnail-resource-name="resource.name"
-        class="rounded-xs size-6 object-cover max-w-fit"
-        :aria-label="tooltipLabelIcon"
-        alt=""
-        decoding="async"
-      />
-      <resource-icon
-        v-else
-        v-oc-tooltip="tooltipLabelIcon"
-        :aria-label="tooltipLabelIcon"
-        aria-hidden="true"
+      <resource-link
+        v-oc-tooltip="isResourceClickable ? tooltipLabelIcon : undefined"
         :resource="resource"
-        size-class="size-6"
-        class="rounded-xs"
-      />
-    </resource-link>
+        :link="link"
+        :is-resource-clickable="isResourceClickable"
+        class="relative"
+        :class="{ 'hover:underline': isResourceClickable }"
+        :aria-label="
+          isResourceClickable
+            ? $gettext('Open »%{name}«', { name: resource?.name ?? '' })
+            : undefined
+        "
+        @click="emitClick"
+      >
+        <oc-image
+          v-if="hasThumbnail"
+          :key="thumbnail"
+          v-oc-tooltip="tooltipLabelIcon"
+          :src="thumbnail"
+          :data-test-thumbnail-resource-name="resource.name"
+          class="rounded-xs size-6 object-cover max-w-fit"
+          :aria-label="tooltipLabelIcon"
+          alt=""
+          decoding="async"
+        />
+        <resource-icon
+          v-else
+          v-oc-tooltip="tooltipLabelIcon"
+          :aria-label="tooltipLabelIcon"
+          aria-hidden="true"
+          :resource="resource"
+          size-class="size-6"
+          class="rounded-xs"
+        />
+      </resource-link>
+    </motion-photo-overlay>
     <div class="oc-resource-details block truncate" :class="{ 'pl-2': isIconDisplayed }">
       <resource-link
         :resource="resource"
@@ -81,6 +90,7 @@ import { Resource } from '@opencloud-eu/web-client'
 import ResourceIcon from './ResourceIcon.vue'
 import ResourceLink from './ResourceLink.vue'
 import ResourceName from './ResourceName.vue'
+import MotionPhotoOverlay from './MotionPhotoOverlay.vue'
 import { RouteLocationRaw } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index f8fd10699fe..89feb75b0e6 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -25,64 +25,75 @@
       </div>
     </div>
     <template v-else>
-      <resource-link
-        class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]"
-        :resource="resource"
-        :link="resourceRoute"
-        :is-resource-clickable="isResourceClickable"
-        tabindex="-1"
-        @click="$emit('fileNameClicked', $event)"
-      >
-        <div
-          class="z-10 absolute top-0 left-0 [&_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"
+      <div class="relative flex w-full" @mouseenter="onMediaEnter" @mouseleave="onMediaLeave">
+        <resource-link
+          class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]"
+          :resource="resource"
+          :link="resourceRoute"
+          :is-resource-clickable="isResourceClickable"
+          tabindex="-1"
+          @click="$emit('fileNameClicked', $event)"
         >
-          <div v-if="isLoading" class="oc-tile-card-loading-spinner z-990 m-2">
-            <oc-spinner :aria-label="$gettext('File is being processed')" />
+          <div
+            class="z-10 absolute top-0 left-0 [&_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"
+          >
+            <div v-if="isLoading" class="oc-tile-card-loading-spinner z-990 m-2">
+              <oc-spinner :aria-label="$gettext('File is being processed')" />
+            </div>
+            <slot v-else name="selection" :item="resource" :selected="isResourceSelected" />
           </div>
-          <slot v-else name="selection" :item="resource" :selected="isResourceSelected" />
-        </div>
-        <oc-tag
-          v-if="isProjectSpaceResource(resource) && resource.disabled"
-          class="z-10 absolute text-role-on-surface"
-          type="span"
-        >
-          <span v-text="$gettext('Disabled')" />
-        </oc-tag>
-        <div
-          v-oc-tooltip="tooltipLabelIcon"
-          class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute"
-          :class="{ 'p-2': isResourceSelected, 'hover:p-2': !isResourceSelected }"
-          :aria-label="tooltipLabelIcon"
-        >
-          <slot name="imageField" :item="resource">
-            <oc-image
-              v-if="resource.thumbnail"
-              class="tile-preview rounded-t-sm size-full object-cover aspect-[16/9] pointer-events-none"
-              :class="{
-                'rounded-sm': isResourceSelected
-              }"
-              :src="resource.thumbnail"
-              :data-test-thumbnail-resource-name="resource.name"
-              decoding="async"
-              @click.stop="$emit('tileClicked', [resource, $event])"
-            />
-            <resource-icon
-              v-else
-              :resource="resource"
-              :size-class="isProjectSpaceResource(resource) ? 'size-full' : resourceIconSize"
-              class="tile-default-image relative"
-              :class="[
-                isProjectSpaceResource(resource) ? 'rounded-t-sm' : 'pt-1',
-                { 'rounded-sm': isProjectSpaceResource(resource) && isResourceSelected }
-              ]"
-            >
-              <template v-if="showStatusIcon" #status>
-                <oc-icon v-bind="statusIconAttrs" size-class="size-3" />
-              </template>
-            </resource-icon>
-          </slot>
-        </div>
-      </resource-link>
+          <oc-tag
+            v-if="isProjectSpaceResource(resource) && resource.disabled"
+            class="z-10 absolute text-role-on-surface"
+            type="span"
+          >
+            <span v-text="$gettext('Disabled')" />
+          </oc-tag>
+          <div
+            v-oc-tooltip="tooltipLabelIcon"
+            class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute"
+            :class="{ 'p-2 oc-tile-card-preview-inset': motionInset }"
+            :aria-label="tooltipLabelIcon"
+          >
+            <slot name="imageField" :item="resource">
+              <oc-image
+                v-if="resource.thumbnail"
+                class="tile-preview rounded-t-sm size-full object-cover aspect-[16/9] pointer-events-none"
+                :class="{
+                  'rounded-sm': isResourceSelected
+                }"
+                :src="resource.thumbnail"
+                :data-test-thumbnail-resource-name="resource.name"
+                decoding="async"
+                @click.stop="$emit('tileClicked', [resource, $event])"
+              />
+              <resource-icon
+                v-else
+                :resource="resource"
+                :size-class="isProjectSpaceResource(resource) ? 'size-full' : resourceIconSize"
+                class="tile-default-image relative"
+                :class="[
+                  isProjectSpaceResource(resource) ? 'rounded-t-sm' : 'pt-1',
+                  { 'rounded-sm': isProjectSpaceResource(resource) && isResourceSelected }
+                ]"
+              >
+                <template v-if="showStatusIcon" #status>
+                  <oc-icon v-bind="statusIconAttrs" size-class="size-3" />
+                </template>
+              </resource-icon>
+            </slot>
+          </div>
+        </resource-link>
+        <motion-photo-player
+          v-if="resource.motionPhoto"
+          ref="motionPlayer"
+          :resource="resource"
+          :space="space"
+          badge-size-class="size-5"
+          badge-class="top-0 right-0 m-2.5"
+          :video-class="motionVideoClass"
+        />
+      </div>
       <div class="p-2" @click.stop="$emit('tileClicked', [resource, $event])">
         <div class="flex justify-between items-center">
           <div
@@ -124,6 +135,7 @@ import { computed, ref, unref, useTemplateRef } from 'vue'
 import ResourceIcon from './ResourceIcon.vue'
 import ResourceListItem from './ResourceListItem.vue'
 import ResourceLink from './ResourceLink.vue'
+import MotionPhotoPlayer from './MotionPhotoPlayer.vue'
 import { isProjectSpaceResource, Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
 import { isSpaceResource } from '@opencloud-eu/web-client'
@@ -185,8 +197,27 @@ const { getParentFolderName, getParentFolderLink } = useFolderLink({
   space: ref(space)
 })
 
+// no MotionPhotoOverlay here: the hover has to span the whole media area, so
+// that moving toward the selection checkbox does not stop playback
+const motionPlayer = useTemplateRef<InstanceType<typeof MotionPhotoPlayer>>('motionPlayer')
 const resourcesStore = useResourcesStore()
 const isResourceSelected = computed(() => resourcesStore.selectedIdsSet.has(resource.id))
+// the preview is inset while selected or hovered (the whole media area, badge
+// included, so that hovering the badge does not pop the still back out) and the
+// clip follows that inset; the badge keeps the checkbox's fixed edge distance
+const isMediaHovered = ref(false)
+const motionInset = computed(() => isResourceSelected.value || isMediaHovered.value)
+const motionVideoClass = computed(() =>
+  motionInset.value ? 'tile-motion-video inset-2 rounded-sm' : 'tile-motion-video rounded-t-sm'
+)
+const onMediaEnter = () => {
+  isMediaHovered.value = true
+  motionPlayer.value?.hoverPlay?.()
+}
+const onMediaLeave = () => {
+  isMediaHovered.value = false
+  motionPlayer.value?.stop?.()
+}
 
 const observerTarget = useTemplateRef<InstanceType<typeof OcCard>>('observerTarget')
 const observerTargetElement = computed<HTMLElement>(() => unref(observerTarget)?.$el)
@@ -249,8 +280,8 @@ if (!lazy) {
 @reference '@opencloud-eu/design-system/tailwind';
 
 @layer utilities {
-  .oc-tile-card-preview:hover img,
-  .oc-tile-card-preview:hover .oc-icon {
+  .oc-tile-card-preview-inset img,
+  .oc-tile-card-preview-inset .oc-icon {
     @apply rounded-sm;
   }
 
diff --git a/packages/web-pkg/src/components/FilesList/index.ts b/packages/web-pkg/src/components/FilesList/index.ts
index e4e9501e62e..79c42e9f359 100644
--- a/packages/web-pkg/src/components/FilesList/index.ts
+++ b/packages/web-pkg/src/components/FilesList/index.ts
@@ -8,4 +8,7 @@ export { default as ResourceTiles } from './ResourceTiles.vue'
 export { default as ResourceLink } from './ResourceLink.vue'
 export { default as ResourceName } from './ResourceName.vue'
 export { default as ResourceSize } from './ResourceSize.vue'
+export { default as MotionPhotoBadge } from './MotionPhotoBadge.vue'
+export { default as MotionPhotoOverlay } from './MotionPhotoOverlay.vue'
+export { default as MotionPhotoPlayer } from './MotionPhotoPlayer.vue'
 export { default as ResourceStatusIndicators } from './ResourceStatusIndicators.vue'
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index 4fae12dd952..302464f9a2c 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -20,6 +20,7 @@ export * from './links'
 export * from './loadingService'
 export * from './localStorage'
 export * from './mentions'
+export * from './motionPhoto'
 export * from './navItems'
 export * from './pagination'
 export * from './passwordPolicyService'
diff --git a/packages/web-pkg/src/composables/motionPhoto/index.ts b/packages/web-pkg/src/composables/motionPhoto/index.ts
new file mode 100644
index 00000000000..1a58e346632
--- /dev/null
+++ b/packages/web-pkg/src/composables/motionPhoto/index.ts
@@ -0,0 +1,2 @@
+export * from './useMotionPhoto'
+export * from './useMotionPhotoPlayback'
diff --git a/packages/web-pkg/src/composables/motionPhoto/useMotionPhoto.ts b/packages/web-pkg/src/composables/motionPhoto/useMotionPhoto.ts
new file mode 100644
index 00000000000..184965fb0f7
--- /dev/null
+++ b/packages/web-pkg/src/composables/motionPhoto/useMotionPhoto.ts
@@ -0,0 +1,109 @@
+import { tryOnScopeDispose } from '@vueuse/core'
+import isEmpty from 'lodash-es/isEmpty'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { useClientService } from '../clientService'
+
+/**
+ * Handles the embedded video of a Google Motion Photo.
+ *
+ * A Motion Photo is a still JPEG with a short MP4 clip appended to the end of
+ * the file. The `motionPhoto` facet exposes `videoSize` (the byte length of
+ * that appended clip), which lets us fetch just the video with a single HTTP
+ * Range request instead of downloading the whole file: `Range: bytes=<offset>-`
+ * where `offset = size - videoSize`.
+ *
+ * The composable owns the blob lifecycle: it memoizes the object URL per
+ * resource id (so hover + click don't double-fetch) and revokes every URL it
+ * created when the owning scope is disposed.
+ */
+export function useMotionPhoto() {
+  const clientService = useClientService()
+  const blobUrlCache = new Map<string, string>()
+
+  const isMotionPhoto = (resource: Resource): boolean => !isEmpty(resource?.motionPhoto)
+
+  const getVideoOffset = (resource: Resource): number | null => {
+    if (!isMotionPhoto(resource)) {
+      return null
+    }
+    const size = Number(resource.size)
+    const videoSize = Number(resource.motionPhoto?.videoSize)
+    if (!Number.isFinite(size) || !Number.isFinite(videoSize) || videoSize <= 0) {
+      return null
+    }
+    const offset = size - videoSize
+    if (!Number.isFinite(offset) || offset < 0) {
+      return null
+    }
+    return offset
+  }
+
+  const canPlay = (resource: Resource): boolean => getVideoOffset(resource) !== null
+
+  // the facet marks an unspecified timestamp as -1
+  const getStillTimestampSeconds = (resource: Resource): number | null => {
+    const us = Number(resource?.motionPhoto?.presentationTimestampUs)
+    if (!Number.isFinite(us) || us < 0) {
+      return null
+    }
+    return us / 1_000_000
+  }
+
+  async function loadVideoUrl(
+    space: SpaceResource,
+    resource: Resource,
+    signal?: AbortSignal
+  ): Promise<string> {
+    if (blobUrlCache.has(resource.id)) {
+      return blobUrlCache.get(resource.id)
+    }
+
+    const offset = getVideoOffset(resource)
+    if (offset === null) {
+      throw new Error('resource is not a playable motion photo')
+    }
+
+    const { response, body } = await clientService.webdav.getFileContents(
+      space,
+      { fileId: resource.fileId, path: resource.path },
+      { responseType: 'blob', headers: { Range: `bytes=${offset}-` }, signal }
+    )
+
+    // a 200 means the server ignored the Range header and sent the whole file
+    const raw: Blob = response?.status === 200 ? body.slice(offset) : body
+
+    // the response is typed image/jpeg (the file's type), which <video> rejects
+    const videoBlob = new Blob([raw], { type: 'video/mp4' })
+    const url = URL.createObjectURL(videoBlob)
+    blobUrlCache.set(resource.id, url)
+    return url
+  }
+
+  function revoke(resourceId: string): void {
+    const url = blobUrlCache.get(resourceId)
+    if (!url) {
+      return
+    }
+    URL.revokeObjectURL(url)
+    blobUrlCache.delete(resourceId)
+  }
+
+  function revokeAll(): void {
+    for (const url of blobUrlCache.values()) {
+      URL.revokeObjectURL(url)
+    }
+    blobUrlCache.clear()
+  }
+
+  tryOnScopeDispose(revokeAll)
+
+  return {
+    isMotionPhoto,
+    canPlay,
+    getVideoOffset,
+    getStillTimestampSeconds,
+    loadVideoUrl,
+    revoke,
+    revokeAll
+  }
+}
diff --git a/packages/web-pkg/src/composables/motionPhoto/useMotionPhotoPlayback.ts b/packages/web-pkg/src/composables/motionPhoto/useMotionPhotoPlayback.ts
new file mode 100644
index 00000000000..d3e36b9bbf7
--- /dev/null
+++ b/packages/web-pkg/src/composables/motionPhoto/useMotionPhotoPlayback.ts
@@ -0,0 +1,114 @@
+import { computed, MaybeRefOrGetter, ref, toValue, unref, watch } from 'vue'
+import { tryOnScopeDispose, useMediaQuery } from '@vueuse/core'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { useMotionPhoto } from './useMotionPhoto'
+
+export const HOVER_INTENT_DELAY_MS = 150
+
+export function useMotionPhotoPlayback(
+  resource: MaybeRefOrGetter<Resource>,
+  space: MaybeRefOrGetter<SpaceResource>
+) {
+  const {
+    canPlay: canPlayResource,
+    loadVideoUrl,
+    getStillTimestampSeconds,
+    revoke
+  } = useMotionPhoto()
+
+  const isPlaying = ref(false)
+  const isLoading = ref(false)
+  const videoUrl = ref<string>()
+  let controller: AbortController = null
+  let spinnerTimer: ReturnType<typeof setTimeout>
+  let hoverTimer: ReturnType<typeof setTimeout>
+  // a run cancelled mid-fetch still reaches its finally block; the generation
+  // keeps it from resetting the state of the run that replaced it
+  let generation = 0
+
+  const canPlay = computed(() => canPlayResource(toValue(resource)))
+
+  const play = async (): Promise<void> => {
+    if (unref(isPlaying) || controller) {
+      return
+    }
+    const currentSpace = toValue(space)
+    const currentResource = toValue(resource)
+    if (!currentSpace || !canPlayResource(currentResource)) {
+      return
+    }
+
+    const runGeneration = ++generation
+    const runController = new AbortController()
+    controller = runController
+    const { signal } = runController
+    spinnerTimer = setTimeout(() => {
+      if (!signal.aborted) {
+        isLoading.value = true
+      }
+    }, 200)
+    try {
+      const url = await loadVideoUrl(currentSpace, currentResource, signal)
+      if (signal.aborted || runGeneration !== generation) {
+        return
+      }
+      videoUrl.value = url
+      isPlaying.value = true
+    } catch {
+      // aborted, or nothing to play
+    } finally {
+      if (runGeneration === generation) {
+        controller = null
+        clearTimeout(spinnerTimer)
+        isLoading.value = false
+      }
+    }
+  }
+
+  const stop = (): void => {
+    generation++
+    clearTimeout(hoverTimer)
+    controller?.abort()
+    controller = null
+    clearTimeout(spinnerTimer)
+    isLoading.value = false
+    isPlaying.value = false
+  }
+
+  const toggle = (): void => {
+    clearTimeout(hoverTimer)
+    unref(isPlaying) ? stop() : play()
+  }
+
+  // on touch devices a tap must open the resource, not start playback
+  const canHover = useMediaQuery('(hover: hover)')
+  // sweeping the pointer across a list must not fire a range request per item
+  const hoverPlay = (): void => {
+    if (!unref(canHover)) {
+      return
+    }
+    clearTimeout(hoverTimer)
+    hoverTimer = setTimeout(play, HOVER_INTENT_DELAY_MS)
+  }
+
+  const seekToStill = (event: Event): void => {
+    const timestamp = getStillTimestampSeconds(toValue(resource))
+    if (timestamp !== null) {
+      ;(event.target as HTMLVideoElement).currentTime = timestamp
+    }
+  }
+
+  watch(
+    () => toValue(resource)?.id,
+    (_, previousId) => {
+      stop()
+      if (previousId) {
+        videoUrl.value = undefined
+        revoke(previousId)
+      }
+    }
+  )
+  tryOnScopeDispose(stop)
+
+  return { isPlaying, isLoading, videoUrl, canPlay, play, stop, toggle, hoverPlay, seekToStill }
+}
diff --git a/packages/web-pkg/tests/unit/components/FilesList/MotionPhotoOverlay.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/MotionPhotoOverlay.spec.ts
new file mode 100644
index 00000000000..425e9a13f35
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/FilesList/MotionPhotoOverlay.spec.ts
@@ -0,0 +1,156 @@
+import { defaultComponentMocks, defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
+import { flushPromises } from '@vue/test-utils'
+import { mock } from 'vitest-mock-extended'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import MotionPhotoOverlay from '../../../../src/components/FilesList/MotionPhotoOverlay.vue'
+import { HOVER_INTENT_DELAY_MS } from '../../../../src/composables/motionPhoto'
+
+const space = mock<SpaceResource>()
+
+const motionPhotoResource = () =>
+  ({
+    id: 'mp1',
+    fileId: 'mp1',
+    path: '/motion.jpg',
+    size: 200000,
+    motionPhoto: { videoSize: 120000, presentationTimestampUs: 0 }
+  }) as unknown as Resource
+
+// hover-to-play is gated on useMediaQuery('(hover: hover)')
+function stubMatchMedia(hover = true) {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches: query.includes('hover: hover') ? hover : false,
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }))
+}
+
+describe('MotionPhotoOverlay', () => {
+  beforeEach(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:overlay-video')
+    global.URL.revokeObjectURL = vi.fn()
+    stubMatchMedia()
+  })
+
+  it('renders the still slot and the badge with the play icon, no video initially', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.find('.still').exists()).toBe(true)
+    const badge = wrapper.find('.motion-photo-badge')
+    expect(badge.exists()).toBe(true)
+    expect(badge.attributes('aria-label')).toBe('Play motion photo')
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('renders the still but no badge when the resource has no motion photo facet', () => {
+    const { wrapper } = getWrapper({ resource: mock<Resource>({ motionPhoto: undefined }) })
+    expect(wrapper.find('.still').exists()).toBe(true)
+    expect(wrapper.find('.motion-photo-badge').exists()).toBe(false)
+  })
+
+  it('renders a muted, non-interactive badge when the facet is unusable', () => {
+    // videoSize larger than the file -> no playable clip, but still a motion photo
+    const { wrapper } = getWrapper({
+      resource: { ...motionPhotoResource(), motionPhoto: { videoSize: 500000 } } as Resource
+    })
+    const badge = wrapper.find('.motion-photo-badge')
+    expect(badge.exists()).toBe(true)
+    expect(badge.element.tagName).toBe('SPAN')
+    expect(badge.classes()).toContain('opacity-50')
+    expect(badge.attributes('aria-label')).toBe('Motion photo (clip not available)')
+  })
+
+  it('renders the badge as a real button when the clip is playable', () => {
+    const { wrapper } = getWrapper()
+    const badge = wrapper.find('.motion-photo-badge')
+    expect(badge.element.tagName).toBe('BUTTON')
+    expect(badge.attributes('type')).toBe('button')
+  })
+
+  it('does not fetch when the pointer only sweeps across (leaves within the intent delay)', async () => {
+    vi.useFakeTimers()
+    const { wrapper, mocks } = getWrapper()
+
+    await wrapper.trigger('mouseenter')
+    vi.advanceTimersByTime(HOVER_INTENT_DELAY_MS - 1)
+    await wrapper.trigger('mouseleave')
+    vi.advanceTimersByTime(HOVER_INTENT_DELAY_MS)
+    vi.useRealTimers()
+    await flushPromises()
+
+    expect(mocks.$clientService.webdav.getFileContents).not.toHaveBeenCalled()
+  })
+
+  it('plays on hover and stops on leave', async () => {
+    vi.useFakeTimers()
+    const { wrapper, mocks } = getWrapper()
+
+    await wrapper.trigger('mouseenter')
+    vi.advanceTimersByTime(HOVER_INTENT_DELAY_MS)
+    vi.useRealTimers()
+    await flushPromises()
+
+    expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledWith(
+      space,
+      { fileId: 'mp1', path: '/motion.jpg' },
+      expect.objectContaining({ headers: { Range: 'bytes=80000-' } })
+    )
+    const video = wrapper.find('video')
+    expect(video.exists()).toBe(true)
+    expect(video.attributes('src')).toBe('blob:overlay-video')
+    expect(wrapper.find('.motion-photo-badge').attributes('aria-label')).toBe('Pause motion photo')
+
+    await wrapper.trigger('mouseleave')
+    await flushPromises()
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('does not play on hover on a non-hover (touch) device', async () => {
+    stubMatchMedia(false)
+    vi.useFakeTimers()
+    const { wrapper, mocks } = getWrapper()
+
+    await wrapper.trigger('mouseenter')
+    vi.advanceTimersByTime(HOVER_INTENT_DELAY_MS)
+    vi.useRealTimers()
+    await flushPromises()
+
+    expect(mocks.$clientService.webdav.getFileContents).not.toHaveBeenCalled()
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('toggles playback on badge click (touch / no hover)', async () => {
+    stubMatchMedia(false)
+    const { wrapper } = getWrapper()
+
+    await wrapper.find('.motion-photo-badge').trigger('click')
+    await flushPromises()
+    expect(wrapper.find('video').exists()).toBe(true)
+
+    await wrapper.find('.motion-photo-badge').trigger('click')
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  function getWrapper({ resource = motionPhotoResource() }: { resource?: Resource } = {}) {
+    const mocks = defaultComponentMocks()
+    mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+      response: { status: 206 },
+      body: new Blob([new Uint8Array(80)])
+    })
+    return {
+      mocks,
+      wrapper: mount(MotionPhotoOverlay, {
+        props: { resource, space },
+        slots: { default: '<div class="still" />' },
+        global: {
+          plugins: [...defaultPlugins()],
+          mocks,
+          provide: mocks
+        }
+      })
+    }
+  }
+})
diff --git a/packages/web-pkg/tests/unit/components/FilesList/MotionPhotoPlayer.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/MotionPhotoPlayer.spec.ts
new file mode 100644
index 00000000000..0c7a6c28907
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/FilesList/MotionPhotoPlayer.spec.ts
@@ -0,0 +1,116 @@
+import { defaultComponentMocks, defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
+import { flushPromises } from '@vue/test-utils'
+import { mock } from 'vitest-mock-extended'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import MotionPhotoPlayer from '../../../../src/components/FilesList/MotionPhotoPlayer.vue'
+import { HOVER_INTENT_DELAY_MS } from '../../../../src/composables/motionPhoto'
+
+const space = mock<SpaceResource>()
+
+const motionPhotoResource = (motionPhoto: unknown = { videoSize: 120000 }) =>
+  ({
+    id: 'mp1',
+    fileId: 'mp1',
+    path: '/motion.jpg',
+    size: 200000,
+    motionPhoto
+  }) as unknown as Resource
+
+function stubMatchMedia(hover = true) {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches: query.includes('hover: hover') ? hover : false,
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }))
+}
+
+describe('MotionPhotoPlayer', () => {
+  beforeEach(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:player-video')
+    global.URL.revokeObjectURL = vi.fn()
+    stubMatchMedia()
+  })
+
+  it('is pointer-transparent apart from its badge', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.classes()).toContain('pointer-events-none')
+    expect(wrapper.find('.motion-photo-badge').classes()).toContain('pointer-events-auto')
+  })
+
+  it('shows an interactive play badge and no video until playback starts', () => {
+    const { wrapper } = getWrapper()
+    const badge = wrapper.find('.motion-photo-badge')
+    expect(badge.element.tagName).toBe('BUTTON')
+    expect(badge.attributes('aria-label')).toBe('Play motion photo')
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('greys the badge out and explains when the clip is not playable', async () => {
+    const { wrapper, mocks } = getWrapper({ resource: motionPhotoResource({ videoSize: 500000 }) })
+    const badge = wrapper.find('.motion-photo-badge')
+    expect(badge.element.tagName).toBe('SPAN')
+    expect(badge.classes()).toContain('opacity-50')
+    expect(badge.attributes('aria-label')).toBe('Motion photo (clip not available)')
+
+    ;(wrapper.vm as unknown as { hoverPlay: () => void }).hoverPlay()
+    await flushPromises()
+    expect(mocks.$clientService.webdav.getFileContents).not.toHaveBeenCalled()
+  })
+
+  it('toggles playback via the badge', async () => {
+    const { wrapper, mocks } = getWrapper()
+
+    await wrapper.find('.motion-photo-badge').trigger('click')
+    await flushPromises()
+    expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledWith(
+      space,
+      { fileId: 'mp1', path: '/motion.jpg' },
+      expect.objectContaining({ headers: { Range: 'bytes=80000-' } })
+    )
+    expect(wrapper.find('video').attributes('src')).toBe('blob:player-video')
+    expect(wrapper.find('.motion-photo-badge').attributes('aria-label')).toBe('Pause motion photo')
+
+    await wrapper.find('.motion-photo-badge').trigger('click')
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('plays after the hover intent delay through the exposed hoverPlay/stop', async () => {
+    vi.useFakeTimers()
+    const { wrapper, mocks } = getWrapper()
+    const vm = wrapper.vm as unknown as { hoverPlay: () => void; stop: () => void }
+
+    vm.hoverPlay()
+    vi.advanceTimersByTime(HOVER_INTENT_DELAY_MS)
+    vi.useRealTimers()
+    await flushPromises()
+    expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledTimes(1)
+    expect(wrapper.find('video').exists()).toBe(true)
+
+    vm.stop()
+    await flushPromises()
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  function getWrapper({ resource = motionPhotoResource() }: { resource?: Resource } = {}) {
+    const mocks = defaultComponentMocks()
+    mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+      response: { status: 206 },
+      body: new Blob([new Uint8Array(80)])
+    })
+    return {
+      mocks,
+      wrapper: mount(MotionPhotoPlayer, {
+        props: { resource, space },
+        global: {
+          plugins: [...defaultPlugins()],
+          mocks,
+          provide: mocks
+        }
+      })
+    }
+  }
+})
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceListItem.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceListItem.spec.ts
index 0291ddf26f9..cc1dc6ccfc6 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceListItem.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceListItem.spec.ts
@@ -24,6 +24,11 @@ const fileResourceWithoutParentFoldername = {
   isFolder: false,
   extension: 'pdf'
 } as Resource
+const motionPhotoResource = {
+  ...fileResource,
+  name: 'motion.jpg',
+  motionPhoto: { version: 1, presentationTimestampUs: 500000, videoSize: 1234567 }
+} as Resource
 
 describe('OcResource', () => {
   it("doesn't emit a click if the resource is not clickable", () => {
@@ -40,6 +45,30 @@ describe('OcResource', () => {
     expect(wrapper.emitted('click')).toHaveLength(1)
   })
 
+  it('shows a motion photo badge when the resource has a motionPhoto facet', () => {
+    const wrapper = mount(ResourceListItem, {
+      props: { resource: motionPhotoResource },
+      global: {
+        stubs: { RouterLink: true },
+        renderStubDefaultSlot: true,
+        plugins: [...defaultPlugins()]
+      }
+    })
+    expect(wrapper.find('.motion-photo-badge').exists()).toBeTruthy()
+  })
+
+  it('does not show a motion photo badge for regular resources', () => {
+    const wrapper = mount(ResourceListItem, {
+      props: { resource: fileResource },
+      global: {
+        stubs: { RouterLink: true },
+        renderStubDefaultSlot: true,
+        plugins: [...defaultPlugins()]
+      }
+    })
+    expect(wrapper.find('.motion-photo-badge').exists()).toBeFalsy()
+  })
+
   it('emits a click for a folder', () => {
     const wrapper = getWrapper({ resource: folderResource })
 
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
index fbcffad6b38..695aa8a3360 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
@@ -7,6 +7,7 @@ import {
 import ResourceTile from '../../../../src/components/FilesList/ResourceTile.vue'
 import { mock } from 'vitest-mock-extended'
 import { RouteLocation } from 'vue-router'
+import { defineComponent, h } from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 
 const getSpaceMock = (disabled = false) =>
@@ -46,10 +47,54 @@ describe('OcTile component', () => {
     const wrapper = getWrapper({ resource: getSpaceMock(), isLoading: true })
     expect(wrapper.find('.oc-tile-card-loading-spinner').exists()).toBeTruthy()
   })
+  it('mounts the motion photo player only for resources with a motionPhoto facet', () => {
+    const resource = {
+      ...getSpaceMock(),
+      motionPhoto: { version: 1, presentationTimestampUs: 500000, videoSize: 1234567 }
+    } as unknown as Resource
+    expect(getWrapper({ resource }).find('motion-photo-player-stub').exists()).toBeTruthy()
+    expect(
+      getWrapper({ resource: getSpaceMock() }).find('motion-photo-player-stub').exists()
+    ).toBeFalsy()
+  })
+
+  it('keeps the player outside the media link and drives it from the media area hover', async () => {
+    const hoverPlay = vi.fn()
+    const stop = vi.fn()
+    const resource = {
+      ...getSpaceMock(),
+      motionPhoto: { videoSize: 120000 }
+    } as unknown as Resource
+    const wrapper = getWrapper(
+      { resource },
+      {},
+      {
+        MotionPhotoPlayer: defineComponent({
+          setup(_, { expose }) {
+            expose({ hoverPlay, stop })
+            return () => h('div', { class: 'player-stub' })
+          }
+        })
+      }
+    )
+    // a sibling of the link, never nested inside it (its badge is a button)
+    expect(wrapper.find('resource-link-stub .player-stub').exists()).toBe(false)
+    const player = wrapper.find('.player-stub')
+    expect(player.exists()).toBe(true)
+
+    const mediaArea = wrapper
+      .findAll('div')
+      .find((div) => div.element === player.element.parentElement)
+    await mediaArea.trigger('mouseenter')
+    expect(hoverPlay).toHaveBeenCalled()
+    await mediaArea.trigger('mouseleave')
+    expect(stop).toHaveBeenCalled()
+  })
 
   function getWrapper(
     props: PartialComponentProps<typeof ResourceTile> & { resource: Resource },
-    resourcesStore = {}
+    resourcesStore = {},
+    stubs: Record<string, unknown> = {}
   ) {
     const defaultMocks = defaultComponentMocks({
       currentRoute: mock<RouteLocation>({ name: 'files' })
@@ -64,6 +109,7 @@ describe('OcTile component', () => {
           })
         ],
         renderStubDefaultSlot: true,
+        stubs,
         mocks: defaultMocks,
         provide: defaultMocks
       }
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
index 982a3b7c1e1..0b894b22096 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
@@ -1,9 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcResource > displays parent folder name default if calculated name is empty 1`] = `
-"<div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"><button type="button" aria-label="Open »example.pdf«" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link max-w-full inline-flex relative hover:underline" draggable="false">
-    <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-6 oc-resource-icon inline-flex items-center rounded-xs" aria-hidden="true"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" unique-ids="false" transform-source="(svg) => {
+"<div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible">
+  <div class="relative inline-flex"><button type="button" aria-label="Open »example.pdf«" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link max-w-full inline-flex relative hover:underline" draggable="false">
+      <!--v-if-->
+      <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-6 oc-resource-icon inline-flex items-center rounded-xs" aria-hidden="true"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
 				const title = document.createElement(&quot;title&quot;);
 				title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -12,7 +13,9 @@ exports[`OcResource > displays parent folder name default if calculated name is
 			};
 			return svg;
 		}" aria-hidden="true" focusable="false" class="size-6"></svg></span>
-  </button>
+    </button>
+    <!--v-if-->
+  </div>
   <div class="oc-resource-details block truncate pl-2"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link max-w-full inline-flex hover:outline-offset-0 focus:outline-offset-0 hover:underline" draggable="false">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-resource-name flex items-center min-w-0" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file"><span class="truncate leading-4"><span class="oc-resource-basename whitespace-pre text-role-on-surface"><span class="oc-filter-highlight">example</span></span></span><span class="oc-resource-extension whitespace-pre text-role-on-surface leading-4"><span class="oc-filter-highlight">.pdf</span></span>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
index ea82d1e49e8..fcd6aef6dd3 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
@@ -2,13 +2,16 @@
 
 exports[`OcTile component > renders default space correctly 1`] = `
 "<oc-card-stub tag="div" titletag="h2" headerclass="" bodyclass="p-0 flex flex-col" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1">
-  <resource-link-stub resource="[object Object]" link="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
-    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
+  <div class="relative flex w-full">
+    <resource-link-stub resource="[object Object]" link="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
+      <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
+      <!--v-if-->
+      <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
+        <resource-icon-stub resource="[object Object]" sizeclass="size-12" class="tile-default-image relative pt-1"></resource-icon-stub>
+      </div>
+    </resource-link-stub>
     <!--v-if-->
-    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute hover:p-2">
-      <resource-icon-stub resource="[object Object]" sizeclass="size-12" class="tile-default-image relative pt-1"></resource-icon-stub>
-    </div>
-  </resource-link-stub>
+  </div>
   <div class="p-2">
     <div class="flex justify-between items-center">
       <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
@@ -27,13 +30,16 @@ exports[`OcTile component > renders default space correctly 1`] = `
 
 exports[`OcTile component > renders disabled space correctly 1`] = `
 "<oc-card-stub tag="div" titletag="h2" headerclass="" bodyclass="p-0 flex flex-col" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none" data-item-id="1">
-  <resource-link-stub resource="[object Object]" link="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
-    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
+  <div class="relative flex w-full">
+    <resource-link-stub resource="[object Object]" link="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
+      <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
+      <!--v-if-->
+      <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
+        <resource-icon-stub resource="[object Object]" sizeclass="size-12" class="tile-default-image relative pt-1"></resource-icon-stub>
+      </div>
+    </resource-link-stub>
     <!--v-if-->
-    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute hover:p-2">
-      <resource-icon-stub resource="[object Object]" sizeclass="size-12" class="tile-default-image relative pt-1"></resource-icon-stub>
-    </div>
-  </resource-link-stub>
+  </div>
   <div class="p-2">
     <div class="flex justify-between items-center">
       <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 383e8406908..14f9caa8f31 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -20,7 +20,10 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
     <li data-v-67d39700="" class="oc-tiles-item has-item-context-menu">
       <div data-v-67d39700="" class="oc-card oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1" draggable="false">
         <!--v-if-->
-        <div class="oc-card-body p-0 flex flex-col"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full inline-flex oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1"></a>
+        <div class="oc-card-body p-0 flex flex-col">
+          <div class="relative flex w-full"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full inline-flex oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1"></a>
+            <!--v-if-->
+          </div>
           <div class="p-2">
             <div class="flex justify-between items-center">
               <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
@@ -65,7 +68,10 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
     <li data-v-67d39700="" class="oc-tiles-item has-item-context-menu">
       <div data-v-67d39700="" class="oc-card oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="2" draggable="false">
         <!--v-if-->
-        <div class="oc-card-body p-0 flex flex-col"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full inline-flex oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1"></a>
+        <div class="oc-card-body p-0 flex flex-col">
+          <div class="relative flex w-full"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full inline-flex oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1"></a>
+            <!--v-if-->
+          </div>
           <div class="p-2">
             <div class="flex justify-between items-center">
               <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
diff --git a/packages/web-pkg/tests/unit/composables/motionPhoto/useMotionPhoto.spec.ts b/packages/web-pkg/tests/unit/composables/motionPhoto/useMotionPhoto.spec.ts
new file mode 100644
index 00000000000..1100d80186d
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/motionPhoto/useMotionPhoto.spec.ts
@@ -0,0 +1,190 @@
+import { mock } from 'vitest-mock-extended'
+import { defaultComponentMocks, getComposableWrapper } from '@opencloud-eu/web-test-helpers'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import { useMotionPhoto } from '../../../../src/composables/motionPhoto/useMotionPhoto'
+
+const space = mock<SpaceResource>()
+
+const mp4Blob = () => new Blob([new Uint8Array(80)])
+
+const buildResource = (overrides: Partial<Resource> = {}) =>
+  ({
+    id: 'mp1',
+    fileId: 'mp1',
+    path: '/motion.jpg',
+    size: 200000,
+    motionPhoto: { version: 1, presentationTimestampUs: 500000, videoSize: 120000 },
+    ...overrides
+  }) as unknown as Resource
+
+function getWrapper() {
+  const mocks = { ...defaultComponentMocks() }
+  let instance: ReturnType<typeof useMotionPhoto>
+  const wrapper = getComposableWrapper(
+    () => {
+      instance = useMotionPhoto()
+    },
+    { mocks, provide: mocks }
+  )
+  return { instance, mocks, wrapper }
+}
+
+describe('useMotionPhoto', () => {
+  beforeEach(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
+    global.URL.revokeObjectURL = vi.fn()
+  })
+
+  describe('isMotionPhoto', () => {
+    it('is true when the facet is present, false otherwise', () => {
+      const { instance } = getWrapper()
+      expect(instance.isMotionPhoto(buildResource())).toBe(true)
+      expect(instance.isMotionPhoto(buildResource({ motionPhoto: undefined }))).toBe(false)
+    })
+  })
+
+  describe('getVideoOffset', () => {
+    it('returns size - videoSize for a valid motion photo', () => {
+      const { instance } = getWrapper()
+      expect(instance.getVideoOffset(buildResource())).toBe(80000)
+    })
+    it('returns null when videoSize exceeds the file size', () => {
+      const { instance } = getWrapper()
+      const r = buildResource({ size: 1000, motionPhoto: { videoSize: 5000 } })
+      expect(instance.getVideoOffset(r)).toBeNull()
+    })
+    it('returns null without the facet or with non-numeric sizes', () => {
+      const { instance } = getWrapper()
+      expect(instance.getVideoOffset(buildResource({ motionPhoto: undefined }))).toBeNull()
+      expect(instance.getVideoOffset(buildResource({ size: 'not-a-number' }))).toBeNull()
+    })
+  })
+
+  describe('getStillTimestampSeconds', () => {
+    it('converts presentationTimestampUs to seconds', () => {
+      const { instance } = getWrapper()
+      const r = buildResource({
+        motionPhoto: { presentationTimestampUs: 833153, videoSize: 120000 }
+      })
+      expect(instance.getStillTimestampSeconds(r)).toBeCloseTo(0.833153)
+    })
+    it('returns null when unspecified (-1) or missing', () => {
+      const { instance } = getWrapper()
+      expect(
+        instance.getStillTimestampSeconds(
+          buildResource({ motionPhoto: { presentationTimestampUs: -1, videoSize: 120000 } })
+        )
+      ).toBeNull()
+      expect(
+        instance.getStillTimestampSeconds(buildResource({ motionPhoto: undefined }))
+      ).toBeNull()
+    })
+  })
+
+  describe('loadVideoUrl', () => {
+    it('requests the trailing bytes via a Range header and returns a video/mp4 blob url', async () => {
+      const { instance, mocks } = getWrapper()
+      mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+        response: { status: 206 },
+        body: mp4Blob()
+      })
+
+      const url = await instance.loadVideoUrl(space, buildResource())
+
+      expect(url).toBe('blob:mock-url')
+      expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledWith(
+        space,
+        { fileId: 'mp1', path: '/motion.jpg' },
+        expect.objectContaining({
+          responseType: 'blob',
+          headers: { Range: 'bytes=80000-' }
+        })
+      )
+      const blobArg = vi.mocked(global.URL.createObjectURL).mock.calls[0][0] as Blob
+      expect(blobArg.type).toBe('video/mp4')
+    })
+
+    it('memoizes the blob url per resource (no double fetch)', async () => {
+      const { instance, mocks } = getWrapper()
+      mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+        response: { status: 206 },
+        body: mp4Blob()
+      })
+      const resource = buildResource()
+
+      const first = await instance.loadVideoUrl(space, resource)
+      const second = await instance.loadVideoUrl(space, resource)
+
+      expect(first).toBe(second)
+      expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledTimes(1)
+    })
+
+    it('falls back to slicing the full body when the server ignores Range (200)', async () => {
+      const { instance, mocks } = getWrapper()
+      // small resource so the offset is small: 200 - 120 = 80
+      const resource = buildResource({
+        size: 200,
+        motionPhoto: { version: 1, presentationTimestampUs: 0, videoSize: 120 }
+      })
+      // full body = 80 leading (still) bytes + the mp4
+      const fullBody = new Blob([new Uint8Array(80), new Uint8Array(64)])
+      const sliceSpy = vi.spyOn(fullBody, 'slice')
+      mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+        response: { status: 200 },
+        body: fullBody
+      })
+
+      const url = await instance.loadVideoUrl(space, resource)
+
+      expect(url).toBe('blob:mock-url')
+      expect(sliceSpy).toHaveBeenCalledWith(80)
+    })
+
+    it('throws for a resource that is not a playable motion photo', async () => {
+      const { instance } = getWrapper()
+      await expect(
+        instance.loadVideoUrl(space, buildResource({ motionPhoto: undefined }))
+      ).rejects.toThrow()
+    })
+  })
+
+  describe('revokeAll', () => {
+    it('revokes created blob urls on scope dispose', async () => {
+      const { instance, mocks, wrapper } = getWrapper()
+      mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+        response: { status: 206 },
+        body: mp4Blob()
+      })
+      await instance.loadVideoUrl(space, buildResource())
+
+      wrapper.unmount()
+
+      expect(global.URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
+    })
+  })
+  describe('revoke', () => {
+    it('revokes and forgets the cached url of one resource only', async () => {
+      const { instance, mocks } = getWrapper()
+      mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+        response: { status: 206 },
+        body: mp4Blob()
+      })
+      await instance.loadVideoUrl(space, buildResource())
+      await instance.loadVideoUrl(space, buildResource({ id: 'mp2', fileId: 'mp2' }))
+
+      instance.revoke('mp1')
+      expect(global.URL.revokeObjectURL).toHaveBeenCalledTimes(1)
+
+      // mp1 is fetched again, mp2 is still served from the cache
+      await instance.loadVideoUrl(space, buildResource())
+      await instance.loadVideoUrl(space, buildResource({ id: 'mp2', fileId: 'mp2' }))
+      expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledTimes(3)
+    })
+
+    it('ignores unknown ids', () => {
+      const { instance } = getWrapper()
+      instance.revoke('nope')
+      expect(global.URL.revokeObjectURL).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/packages/web-pkg/tests/unit/composables/motionPhoto/useMotionPhotoPlayback.spec.ts b/packages/web-pkg/tests/unit/composables/motionPhoto/useMotionPhotoPlayback.spec.ts
new file mode 100644
index 00000000000..989f7d1019f
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/motionPhoto/useMotionPhotoPlayback.spec.ts
@@ -0,0 +1,241 @@
+import { mock } from 'vitest-mock-extended'
+import { flushPromises } from '@vue/test-utils'
+import { MaybeRefOrGetter, ref, toValue } from 'vue'
+import { defaultComponentMocks, getComposableWrapper } from '@opencloud-eu/web-test-helpers'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+import type { GetFileContentsResponse } from '@opencloud-eu/web-client/webdav'
+import {
+  HOVER_INTENT_DELAY_MS,
+  useMotionPhotoPlayback
+} from '../../../../src/composables/motionPhoto/useMotionPhotoPlayback'
+
+const mp4Body = () => new Blob([new Uint8Array(80)])
+const space = mock<SpaceResource>()
+
+const buildResource = (overrides: Partial<Resource> = {}) =>
+  ({
+    id: 'mp1',
+    fileId: 'mp1',
+    path: '/motion.jpg',
+    size: 200000,
+    motionPhoto: { videoSize: 120000, presentationTimestampUs: 500000 },
+    ...overrides
+  }) as unknown as Resource
+
+function getWrapper(resource: MaybeRefOrGetter<Resource> = buildResource()) {
+  const mocks = { ...defaultComponentMocks() }
+  let instance: ReturnType<typeof useMotionPhotoPlayback>
+  const wrapper = getComposableWrapper(
+    () => {
+      instance = useMotionPhotoPlayback(
+        () => toValue(resource),
+        () => space
+      )
+    },
+    { mocks, provide: mocks }
+  )
+  return { instance, mocks, wrapper }
+}
+
+describe('useMotionPhotoPlayback', () => {
+  beforeEach(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:video')
+    global.URL.revokeObjectURL = vi.fn()
+  })
+
+  it('play() fetches the clip and sets playing state, stop() resets it', async () => {
+    const { instance, mocks } = getWrapper()
+    mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+      response: { status: 206 },
+      body: mp4Body()
+    })
+
+    expect(instance.isPlaying.value).toBe(false)
+    await instance.play()
+
+    expect(instance.isPlaying.value).toBe(true)
+    expect(instance.videoUrl.value).toBe('blob:video')
+    expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledWith(
+      space,
+      { fileId: 'mp1', path: '/motion.jpg' },
+      expect.objectContaining({ headers: { Range: 'bytes=80000-' } })
+    )
+
+    instance.stop()
+    expect(instance.isPlaying.value).toBe(false)
+  })
+
+  it('toggle() flips playback', async () => {
+    const { instance, mocks } = getWrapper()
+    mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+      response: { status: 206 },
+      body: mp4Body()
+    })
+
+    instance.toggle()
+    await flushPromises()
+    expect(instance.isPlaying.value).toBe(true)
+
+    instance.toggle()
+    expect(instance.isPlaying.value).toBe(false)
+  })
+
+  it('does not play when the resource is not a playable motion photo', async () => {
+    const { instance, mocks } = getWrapper(buildResource({ motionPhoto: undefined }))
+    expect(instance.canPlay.value).toBe(false)
+
+    await instance.play()
+
+    expect(instance.isPlaying.value).toBe(false)
+    expect(mocks.$clientService.webdav.getFileContents).not.toHaveBeenCalled()
+  })
+
+  it('ignores a second play() while one is already in flight', async () => {
+    const { instance, mocks } = getWrapper()
+    mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+      response: { status: 206 },
+      body: mp4Body()
+    })
+
+    const first = instance.play()
+    const second = instance.play()
+    await Promise.all([first, second])
+
+    expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledTimes(1)
+  })
+
+  it('seekToStill sets the video currentTime to the still frame', () => {
+    const { instance } = getWrapper()
+    const video = { currentTime: 0 } as HTMLVideoElement
+    instance.seekToStill({ target: video } as unknown as Event)
+    expect(video.currentTime).toBeCloseTo(0.5)
+  })
+
+  it('reveals the loading spinner only after a short delay and clears it when done', async () => {
+    vi.useFakeTimers()
+    try {
+      const { instance, mocks } = getWrapper()
+      let resolveFetch: (value: GetFileContentsResponse) => void
+      mocks.$clientService.webdav.getFileContents.mockReturnValue(
+        new Promise((resolve) => {
+          resolveFetch = resolve
+        })
+      )
+
+      instance.play()
+      // no spinner while the fetch is still fast
+      expect(instance.isLoading.value).toBe(false)
+
+      await vi.advanceTimersByTimeAsync(200)
+      expect(instance.isLoading.value).toBe(true)
+
+      resolveFetch({ response: { status: 206 }, body: mp4Body() })
+      await vi.runAllTimersAsync()
+      expect(instance.isLoading.value).toBe(false)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('does not show the spinner when playback is stopped before the delay elapses', async () => {
+    vi.useFakeTimers()
+    try {
+      const { instance, mocks } = getWrapper()
+      mocks.$clientService.webdav.getFileContents.mockReturnValue(new Promise(() => {}))
+
+      instance.play()
+      await vi.advanceTimersByTimeAsync(100)
+      instance.stop()
+      await vi.advanceTimersByTimeAsync(200)
+
+      expect(instance.isLoading.value).toBe(false)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('stops playback when the resource changes (e.g. sidebar selection switch)', async () => {
+    const resource = ref(buildResource())
+    const { instance, mocks } = getWrapper(resource)
+    mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+      response: { status: 206 },
+      body: mp4Body()
+    })
+
+    await instance.play()
+    expect(instance.isPlaying.value).toBe(true)
+
+    resource.value = buildResource({ id: 'mp2', fileId: 'mp2' })
+    await flushPromises()
+
+    expect(instance.isPlaying.value).toBe(false)
+  })
+  it('a cancelled play() does not disturb the next one (stale run stays out of the state)', async () => {
+    const { instance, mocks } = getWrapper()
+    const first = Promise.withResolvers<GetFileContentsResponse>()
+    const second = Promise.withResolvers<GetFileContentsResponse>()
+    mocks.$clientService.webdav.getFileContents
+      .mockReturnValueOnce(first.promise)
+      .mockReturnValueOnce(second.promise)
+
+    const firstRun = instance.play()
+    instance.stop()
+    const secondRun = instance.play()
+    expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledTimes(2)
+
+    // the aborted first run settles late (rejects, as an aborted fetch would)
+    first.reject(new DOMException('aborted', 'AbortError'))
+    await firstRun
+    await flushPromises()
+
+    // the second run must still be cancelable: stop() aborts it, nothing plays
+    instance.stop()
+    second.resolve({ response: { status: 206 }, body: mp4Body() } as GetFileContentsResponse)
+    await secondRun
+    await flushPromises()
+    expect(instance.isPlaying.value).toBe(false)
+    expect(instance.videoUrl.value).toBeUndefined()
+  })
+
+  it('hoverPlay() waits for hover intent and is cancelled by stop()', () => {
+    vi.useFakeTimers()
+    try {
+      const { instance, mocks } = getWrapper()
+      mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+        response: { status: 206 },
+        body: mp4Body()
+      })
+
+      instance.hoverPlay()
+      vi.advanceTimersByTime(HOVER_INTENT_DELAY_MS - 1)
+      expect(mocks.$clientService.webdav.getFileContents).not.toHaveBeenCalled()
+      instance.stop()
+      vi.advanceTimersByTime(HOVER_INTENT_DELAY_MS)
+      expect(mocks.$clientService.webdav.getFileContents).not.toHaveBeenCalled()
+
+      instance.hoverPlay()
+      vi.advanceTimersByTime(HOVER_INTENT_DELAY_MS)
+      expect(mocks.$clientService.webdav.getFileContents).toHaveBeenCalledTimes(1)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('revokes the previous clip when the resource changes', async () => {
+    const resource = ref(buildResource())
+    const { instance, mocks } = getWrapper(resource)
+    mocks.$clientService.webdav.getFileContents.mockResolvedValue({
+      response: { status: 206 },
+      body: mp4Body()
+    })
+    await instance.play()
+    expect(instance.videoUrl.value).toBe('blob:video')
+
+    resource.value = buildResource({ id: 'mp2', fileId: 'mp2' })
+    await flushPromises()
+
+    expect(global.URL.revokeObjectURL).toHaveBeenCalledWith('blob:video')
+    expect(instance.isPlaying.value).toBe(false)
+    expect(instance.videoUrl.value).toBeUndefined()
+  })
+})
diff --git a/tests/e2e/features/search/motionPhoto.feature b/tests/e2e/features/search/motionPhoto.feature
new file mode 100644
index 00000000000..dd8e09b5013
--- /dev/null
+++ b/tests/e2e/features/search/motionPhoto.feature
@@ -0,0 +1,51 @@
+Feature: Motion photo indicator
+  As a user
+  I want motion photos to be visually marked and playable
+  So that I can distinguish them from ordinary photos and watch their clip
+
+  Background:
+    Given "Admin" creates following user using API
+      | id    |
+      | Alice |
+    And "Alice" uploads the following local file into personal space using API
+      | localFile                | to                       |
+      | motionphoto-playable.jpg | motionphoto-playable.jpg |
+    And "Alice" waits for the motion photo facet of file "motionphoto-playable.jpg" using API
+    And "Alice" logs in
+    And "Alice" opens the "files" app
+
+
+  @motion-photo
+  Scenario: motion photo badge is shown in tiles and table view
+    When "Alice" switches to the "tiles" view
+    Then "Alice" should see the motion photo badge on resource "motionphoto-playable.jpg"
+    When "Alice" switches to the "table" view
+    Then "Alice" should see the motion photo badge on resource "motionphoto-playable.jpg"
+    And "Alice" logs out
+
+
+  @motion-photo
+  Scenario: motion photo badge is shown in the media viewer preview strip
+    When "Alice" opens the following file in mediaviewer
+      | resource                 |
+      | motionphoto-playable.jpg |
+    Then "Alice" should see the motion photo badge in the media viewer for resource "motionphoto-playable.jpg"
+    And "Alice" closes the file viewer
+    And "Alice" logs out
+
+
+  @motion-photo
+  Scenario: motion photo playback control is shown in the media viewer
+    When "Alice" opens the following file in mediaviewer
+      | resource                 |
+      | motionphoto-playable.jpg |
+    Then "Alice" should see the motion photo control in the media viewer
+    And "Alice" closes the file viewer
+    And "Alice" logs out
+
+
+  @motion-photo
+  Scenario: motion photo can be played inline from the sidebar
+    When "Alice" plays the motion photo inline from the sidebar for resource "motionphoto-playable.jpg"
+    Then "Alice" should see the motion photo clip loaded in the sidebar
+    And "Alice" logs out
diff --git a/tests/e2e/filesForUpload/motionphoto-playable.jpg b/tests/e2e/filesForUpload/motionphoto-playable.jpg
new file mode 100644
index 00000000000..182bbe9b565
Binary files /dev/null and b/tests/e2e/filesForUpload/motionphoto-playable.jpg differ
diff --git a/tests/e2e/steps/api.ts b/tests/e2e/steps/api.ts
index eaa40dc0eb8..0c9cd6faa9e 100644
--- a/tests/e2e/steps/api.ts
+++ b/tests/e2e/steps/api.ts
@@ -192,6 +192,14 @@ Given(
   }
 )
 
+Given(
+  '{string} waits for the motion photo facet of file {string} using API',
+  async ({ world }: { world: World }, stepUser: string, pathToFile: string): Promise<void> => {
+    const user = world.usersEnvironment.getCreatedUser({ key: stepUser })
+    await api.dav.waitForMotionPhotoFacet({ user, pathToFile })
+  }
+)
+
 Given(
   '{string} creates {int} file(s) in personal space using API',
   async ({ world }: { world: World }, stepUser: string, numberOfFiles: number): Promise<void> => {
diff --git a/tests/e2e/steps/ui/motionPhoto.ts b/tests/e2e/steps/ui/motionPhoto.ts
new file mode 100644
index 00000000000..829a81feb48
--- /dev/null
+++ b/tests/e2e/steps/ui/motionPhoto.ts
@@ -0,0 +1,71 @@
+import { Then, When } from '../../environment/fixtures'
+import { World } from '../../environment/world'
+import { objects } from '../../support'
+import { expect } from '@playwright/test'
+
+Then(
+  /^"([^"]*)" (should|should not) see the motion photo badge on resource "([^"]*)"$/,
+  async (
+    { world }: { world: World },
+    stepUser: string,
+    actionType: string,
+    resource: string
+  ): Promise<void> => {
+    const { page } = world.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    const badgeLocator = resourceObject.getMotionPhotoBadgeLocator(resource)
+
+    actionType === 'should'
+      ? await expect(badgeLocator).toBeVisible()
+      : await expect(badgeLocator).not.toBeVisible()
+  }
+)
+
+Then(
+  /^"([^"]*)" (should|should not) see the motion photo badge in the media viewer for resource "([^"]*)"$/,
+  async (
+    { world }: { world: World },
+    stepUser: string,
+    actionType: string,
+    resource: string
+  ): Promise<void> => {
+    const { page } = world.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    const badgeLocator = resourceObject.getPreviewMotionPhotoBadgeLocator(resource)
+
+    actionType === 'should'
+      ? await expect(badgeLocator).toBeVisible()
+      : await expect(badgeLocator).not.toBeVisible()
+  }
+)
+
+Then(
+  '{string} should see the motion photo control in the media viewer',
+  async ({ world }: { world: World }, stepUser: string): Promise<void> => {
+    const { page } = world.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    // the bundled Chromium cannot decode the H.264 clip, so only the control is asserted
+    await expect(resourceObject.getMotionPhotoViewerControlLocator()).toBeVisible()
+  }
+)
+
+When(
+  '{string} plays the motion photo inline from the sidebar for resource {string}',
+  async ({ world }: { world: World }, stepUser: string, resource: string): Promise<void> => {
+    const { page } = world.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    await resourceObject.openRightSidebar(resource)
+    await resourceObject.playMotionPhotoInSidebar()
+  }
+)
+
+Then(
+  '{string} should see the motion photo clip loaded in the sidebar',
+  async ({ world }: { world: World }, stepUser: string): Promise<void> => {
+    const { page } = world.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    await expect
+      .poll(() => resourceObject.getSidebarMotionPhotoVideoSource(), { timeout: 15000 })
+      .toMatch(/^blob:/)
+  }
+)
diff --git a/tests/e2e/support/api/davSpaces/index.ts b/tests/e2e/support/api/davSpaces/index.ts
index 5ae6342eea5..e34c1094f06 100644
--- a/tests/e2e/support/api/davSpaces/index.ts
+++ b/tests/e2e/support/api/davSpaces/index.ts
@@ -5,5 +5,6 @@ export {
   getIdOfFileInsideSpace,
   uploadFileInsideSpaceBySpaceName,
   addTagToResource,
-  deleteFileInPersonalSpace
+  deleteFileInPersonalSpace,
+  waitForMotionPhotoFacet
 } from './spaces'
diff --git a/tests/e2e/support/api/davSpaces/spaces.ts b/tests/e2e/support/api/davSpaces/spaces.ts
index 63e6d490e2d..4964a89b782 100644
--- a/tests/e2e/support/api/davSpaces/spaces.ts
+++ b/tests/e2e/support/api/davSpaces/spaces.ts
@@ -154,6 +154,43 @@ export const uploadFileInsideSpaceBySpaceName = async ({
   await createFile({ user, pathToFile, content, webDavEndPathToRoot })
 }
 
+// the facet is written asynchronously after the upload, once tika has extracted
+// the file; a fresh tika takes a few seconds for its first file
+export const waitForMotionPhotoFacet = async ({
+  user,
+  pathToFile,
+  timeoutMs = 30000
+}: {
+  user: User
+  pathToFile: string
+  timeoutMs?: number
+}): Promise<void> => {
+  const body =
+    '<?xml version="1.0"?>\n' +
+    '<d:propfind xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">\n' +
+    '  <d:prop>\n' +
+    '    <oc:motion-photo />\n' +
+    '  </d:prop>\n' +
+    '</d:propfind>'
+  const path = urlJoin(
+    'remote.php',
+    'dav',
+    'spaces',
+    await getSpaceIdBySpaceName({ user, spaceType: 'personal' }),
+    encodeWebDavPath(pathToFile)
+  )
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    const response = await request({ method: 'PROPFIND', path, body, user })
+    checkResponseStatus(response, `Failed while getting the motion photo facet of ${pathToFile}`)
+    if ((await response.text()).includes('<oc:video-size>')) {
+      return
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  }
+  throw new Error(`Timed out waiting for the motion photo facet of ${pathToFile}`)
+}
+
 export const getDataOfFileInsideSpace = async ({
   user,
   pathToFileName,
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index ab8d2bd0c72..b00886b6b00 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -116,6 +116,10 @@ const highlightedTileCardSelector = '.oc-tile-card-selected'
 const emptyTrashbinButtonSelector = '.oc-files-actions-empty-trash-bin-trigger'
 const resourceLockIcon =
   '//*[@data-test-resource-name="%s"]/ancestor::*[self::li or self::tr]//span[@data-test-indicator-type="resource-locked"]'
+const resourceMotionPhotoBadge =
+  '//*[@data-test-resource-name="%s"]/ancestor::*[contains(@class, "oc-tile-card") or contains(@class, "oc-tbody-tr")]//*[@data-testid="motion-photo-badge"]'
+const previewMotionPhotoBadge =
+  '//*[contains(@class, "photo-roll-item")][.//*[@data-test-resource-name="%s"]]//*[@data-testid="motion-photo-badge"]'
 const sharesNavigationButtonSelector = '.oc-sidebar-nav [data-nav-name="files-shares"]'
 const keepBothButton = '.oc-modal-body-actions-confirm'
 const mediaNavigationButton = `//button[contains(@class, "preview-controls-%s")]`
@@ -780,11 +784,15 @@ const performUpload = async (args: uploadResourceArgs): Promise<void> => {
     await clickResource({ page, path: to, password })
   }
 
-  const respPromise = page.waitForResponse(
-    (resp) =>
-      [201, 204].includes(resp.status()) &&
-      ['POST', 'PUT', 'PATCH'].includes(resp.request().method())
-  )
+  // an upload that is expected to fail may never produce a 2xx response,
+  // a dangling waitForResponse would then reject when the page closes
+  const respPromise = expectToFail
+    ? Promise.resolve()
+    : page.waitForResponse(
+        (resp) =>
+          [201, 204].includes(resp.status()) &&
+          ['POST', 'PUT', 'PATCH'].includes(resp.request().method())
+      )
 
   const inputSelector = type === 'folder' ? folderUploadInput : fileUploadInput
   let uploadAction: Promise<void> = page
@@ -2541,6 +2549,43 @@ export const getFileThumbnailLocator = (args: { page: Page; resource: string }):
   return page.locator(util.format(fileThumbnail, resource))
 }
 
+export const getMotionPhotoBadgeLocator = (args: { page: Page; resource: string }): Locator => {
+  const { page, resource } = args
+  return page.locator(util.format(resourceMotionPhotoBadge, resource))
+}
+
+export const getPreviewMotionPhotoBadgeLocator = (args: {
+  page: Page
+  resource: string
+}): Locator => {
+  const { page, resource } = args
+  return page.locator(util.format(previewMotionPhotoBadge, resource))
+}
+
+const motionPhotoViewerControl = '[data-testid="motion-photo-toggle"]'
+
+// the play/pause control in the media viewer's controls bar
+export const getMotionPhotoViewerControlLocator = (args: { page: Page }): Locator => {
+  return args.page.locator(motionPhotoViewerControl)
+}
+
+const sidebarMotionPhotoBadge = '#oc-file-details-sidebar [data-testid="motion-photo-badge"]'
+const sidebarMotionPhotoVideo = '#oc-file-details-sidebar [data-testid="preview"] video'
+
+export const playMotionPhotoInSidebar = async (args: { page: Page }): Promise<void> => {
+  const { page } = args
+  await page.locator(sidebarMotionPhotoBadge).click()
+}
+
+export const getSidebarMotionPhotoVideoSource = async (args: { page: Page }): Promise<string> => {
+  const { page } = args
+  const locator = page.locator(sidebarMotionPhotoVideo)
+  if ((await locator.count()) === 0) {
+    return ''
+  }
+  return locator.evaluate((el: HTMLVideoElement) => el.currentSrc || el.src || '')
+}
+
 export const shouldSeeFilePreview = async ({
   page,
   resource
diff --git a/tests/e2e/support/objects/app-files/resource/index.ts b/tests/e2e/support/objects/app-files/resource/index.ts
index a6d878bb5bc..ad23d448376 100644
--- a/tests/e2e/support/objects/app-files/resource/index.ts
+++ b/tests/e2e/support/objects/app-files/resource/index.ts
@@ -403,6 +403,26 @@ export class Resource {
     return po.getFileThumbnailLocator({ page: this.#page, resource })
   }
 
+  getMotionPhotoBadgeLocator(resource: string): Locator {
+    return po.getMotionPhotoBadgeLocator({ page: this.#page, resource })
+  }
+
+  getPreviewMotionPhotoBadgeLocator(resource: string): Locator {
+    return po.getPreviewMotionPhotoBadgeLocator({ page: this.#page, resource })
+  }
+
+  getMotionPhotoViewerControlLocator(): Locator {
+    return po.getMotionPhotoViewerControlLocator({ page: this.#page })
+  }
+
+  async playMotionPhotoInSidebar(): Promise<void> {
+    await po.playMotionPhotoInSidebar({ page: this.#page })
+  }
+
+  getSidebarMotionPhotoVideoSource(): Promise<string> {
+    return po.getSidebarMotionPhotoVideoSource({ page: this.#page })
+  }
+
   async shouldSeeFilePreview({ resource }: { resource: string }): Promise<void> {
     await po.shouldSeeFilePreview({ page: this.#page, resource })
   }
diff --git a/tests/woodpecker/csp.yaml b/tests/woodpecker/csp.yaml
index dee86e3b31d..7287abc451e 100644
--- a/tests/woodpecker/csp.yaml
+++ b/tests/woodpecker/csp.yaml
@@ -31,6 +31,7 @@ directives:
     - '''self'''
   media-src:
     - '''self'''
+    - 'blob:'
   object-src:
     - '''self'''
     - 'blob:'