[BUG] Videos not playing in mobile browsers

[FrankelJb]

The bug

I have shared a link to an album from my desktop browser to some friends. They are able to view the shared album and images work correctly. However, they are unable to watch videos. I tested myself and the problem is reproduced on multiple devices in the mobile browser. I've checked the server and web logs and there is no output.

I'm not sure how to get the logs on mobile browser or even how to debug further. This issue does not appear to be limited to the shared albums, I cannot play videos on mobile browsers even when signed in and all videos are available.

The OS that Immich Server is running on

Kubernetes (RKE v1.26.1+rke2r1)

Version of Immich Server

v1.68.0

Version of Immich Mobile App

1.68.0

Platform with the issue

• [ ] Server
• [X] Web
• [ ] Mobile

Your docker-compose.yml content

---
apiVersion: helm.toolkit.fluxcd.io/v2beta1
kind: HelmRelease
metadata:
  name: immich-server
  namespace: cloud
spec:
  interval: 15m
  chart:
    spec:
      chart: app-template
      version: 1.5.1
      sourceRef:
        kind: HelmRepository
        name: bjw-s
        namespace: flux-system
      interval: 15m
  install:
    createNamespace: true
    remediation:
      retries: 5
  upgrade:
    remediation:
      retries: 5
  values:
    args:
      - start-server.sh
    controller:
      annotations:
        reloader.stakater.com/auto: "true"
    envFrom:
      - secretRef:
          name: immich-secret
      - configMapRef:
          name: immich-configmap
    image:
      repository: ghcr.io/immich-app/immich-server
      tag: v1.68.0@sha256:b17f2525185f0a4c5c79a774d9441361dec7aabc39b9a09f7f094b98c60aec8c
    persistence:
      library:
        enabled: true
        existingClaim: immich-pvc
        mountPath: /usr/src/app/upload
    resources:
      requests:
        cpu: 10m
        memory: 100Mi
    service:
      main:
        ports:
          http:
            port: 3001
---
---
apiVersion: helm.toolkit.fluxcd.io/v2beta1
kind: HelmRelease
metadata:
  name: immich-web
  namespace: cloud
spec:
  interval: 15m
  chart:
    spec:
      chart: app-template
      version: 1.5.1
      sourceRef:
        kind: HelmRepository
        name: bjw-s
        namespace: flux-system
      interval: 15m
  install:
    createNamespace: true
    remediation:
      retries: 5
  upgrade:
    remediation:
      retries: 5
  values:
    controller:
      annotations:
        reloader.stakater.com/auto: "true"
    envFrom:
      - secretRef:
          name: immich-secret
      - configMapRef:
          name: immich-configmap
    image:
      repository: ghcr.io/immich-app/immich-web
      tag: v1.68.0@sha256:44d1174efaea60ae16a9ad773f0cc0b86efabbfe292541b93e56167a782e7216
    ingress:
      main:
        enabled: true
        ingressClassName: nginx
        annotations:
          external-dns.home.arpa/enabled: "true"
          external-dns.alpha.kubernetes.io/target: ${ROOT_DOMAIN}
          nginx.ingress.kubernetes.io/configuration-snippet: |
            rewrite /api/(.*) /$1 break;
          nignx.ingress.kubernetes.io/force-ssl-redirect: "true"
          nginx.ingress.kubernetes.io/proxy-body-size: "0"
          whitelist-source-range.home.arpa/disabled: "true"
        hosts:
          - host: &host immich.${ROOT_DOMAIN}
            paths:
              - path: /
                pathType: Prefix
              - path: /api
                pathType: Prefix
                service:
                  name: immich-server
                  port: 3001
        tls:
          - hosts:
              - *host
    persistence:
      library:
        enabled: true
        existingClaim: immich-pvc
        mountPath: /usr/src/app/upload
    resources:
      requests:
        cpu: 10m
        memory: 100Mi
      limits:
        memory: 500Mi
    service:
      main:
        ports:
          http:
            port: 3000

### Your .env content

```Shell
apiVersion: v1
data:
  DISABLE_REVERSE_GEOCODING: "true"
  LOG_LEVEL: "verbose"
  NODE_ENV: "production"
  REDIS_HOSTNAME: redis-master.default.svc.cluster.local
  IMMICH_SERVER_URL: http://immich-server.cloud.svc.cluster.local:3001
  IMMICH_WEB_URL: http://immich-web.cloud.svc.cluster.local:3000
  IMMICH_MACHINE_LEARNING_URL: http://immich-machine-learning.cloud.svc.cluster.local:3003
  TYPESENSE_HOST: immich-typesense.cloud.svc.cluster.local
  TYPESENSE_PORT: "8108"
  TYPESENSE_PROTOCOL: http
  TYPESENSE_DATA_DIR: /config
kind: ConfigMap
metadata:
  creationTimestamp: null
  name: immich-configmap
  namespace: cloud

### Reproduction steps

```bash
1. Create shared album link from desktop browser
2. Share with anonymous users
3. Open the link in browser (with or without signing in)
4. Try to play video
5. Small red ! appears and video does not play

Additional information

This issue does not occur on desktop browsers or in the app but is affecting all mobile browsers on both Android and iOS.

[bo0tzz]

Have you changed the transcoding settings at all?

[FrankelJb]

Have you changed the transcoding settings at all?

No, I haven't. Should I try?

[bo0tzz]

No, I asked because changing them (incorrectly) could cause this sort of issue.

[bo0tzz]

You only posted HRs for immich-server and immich-web. Are you running the other containers as well?

[FrankelJb]

Yes, everything is working correctly in the desktop browser and app. I omitted the other HRs to reduce clutter. My repo is here. Should I post them here?

[raisinbear]

Just noticed the same in mobile Safari on iOS 16.5 and regular docker compose setup on an arm64 server. Just seeing a spinner and black screen for every video I'm trying. No issue in desktop browser whatsoever. Not sure whether I changed the transcode settings. They are at crf 28, veryfast, h264, aac and 720p, neither max bitrate nor 2-pass.

[mertalev]

Videos are converted to a more compatible pixel format now, so this issue should be fixed. Feel free to re-open it if the issue persists.

[FrankelJb]

Videos are converted to a more compatible pixel format now, so this issue should be fixed. Feel free to re-open it if the issue persists.

Should I run a Transcode Videos job?

[raisinbear]

Videos are converted to a more compatible pixel format now, so this issue should be fixed. Feel free to re-open it if the issue persists.

Not working on mobile Safari, sadly. Also checked with newly 1.73.0-encoded video. One thing I found, however - and that may or may not be new: When I open the video asset and see the never stopping spinner overlayed over the play button and then tap somewhere in the black area surrounding these symbols (not the play button), I can get the video to play. „Old“ and „new“ videos alike. It will just never start to automatically play nor will the play button work or the spinner stop, even if the read stream of the encoded video file has long been closed. Also the preview in the timeline doesn’t play back.

[mertalev]

Interesting. If the video can play at all then it's probably a frontend issue.

[mertalev]

Videos are converted to a more compatible pixel format now, so this issue should be fixed. Feel free to re-open it if the issue persists.

Should I run a Transcode Videos job?

Yes, you'd need to re-transcode the videos for the new settings to apply.

[raisinbear]

Interesting. If the video can play at all then it's probably a frontend issue.

They do, but only with the workaround above. Checked a lot of videos in my library by now and all play that way, regardless if retranscoded or not. Might be front end like you say, sadly I wouldn’t know how to debug mobile safari to get a better idea what’s going on. But thanks for the effort on the transcoding! I can’t reopen this, so let’s wait for @FrankelJb.

[FrankelJb]

Confirming the same workaround as @raisinbear worked for me, tapping the black screen plays the video. Reopening the issue as it persists.

[jrasm91]

On another computer you can right click and save the video, then inspect and verify the codecs (via a media player like VLC, or running ffprobe) being used. We can then confirm that safari supports them and playback should work.

Do you have any other browsers you can test with or can you only have safari?

If it is indeed a UI bug that will be challenging to reproduce. Any chance you could record a video of what is happening?

[FrankelJb]

I recorded this video with my phone playing on my screen, I didn't just upload BBB.

I've uploaded a video here.

I opened the video, black screen and red circle visible. I then tapped on the play button a few times and the video started after 3 taps.

Here is the ffprobe output. Video plays correctly using vlc on linux.

❯ ffprobe IMG_0167.mov
ffprobe version 4.4.2-0ubuntu0.22.04.1 Copyright (c) 2007-2021 the FFmpeg developers
  built with gcc 11 (Ubuntu 11.2.0-19ubuntu1)
  configuration: --prefix=/usr --extra-version=0ubuntu0.22.04.1 --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu -
-arch=amd64 --enable-gpl --disable-stripping --enable-gnutls --enable-ladspa --enable-libaom --enable-libass --enable-libbluray --enable-libbs2b --enable-libcac
a --enable-libcdio --enable-libcodec2 --enable-libdav1d --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enab
le-libgsm --enable-libjack --enable-libmp3lame --enable-libmysofa --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libpulse --enable-librabbit
mq --enable-librubberband --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libsrt --enable-libssh --enable-libtheora --enable-li
btwolame --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx265 --enable-libxml2 --enable-libxvid --enable-libzimg --enable-li
bzmq --enable-libzvbi --enable-lv2 --enable-omx --enable-openal --enable-opencl --enable-opengl --enable-sdl2 --enable-pocketsphinx --enable-librsvg --enable-li
bmfx --enable-libdc1394 --enable-libdrm --enable-libiec61883 --enable-chromaprint --enable-frei0r --enable-libx264 --enable-shared
  libavutil      56. 70.100 / 56. 70.100
  libavcodec     58.134.100 / 58.134.100
  libavformat    58. 76.100 / 58. 76.100
  libavdevice    58. 13.100 / 58. 13.100
  libavfilter     7.110.100 /  7.110.100
  libswscale      5.  9.100 /  5.  9.100
  libswresample   3.  9.100 /  3.  9.100
  libpostproc    55.  9.100 / 55.  9.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'IMG_0167.mov':
  Metadata:
    major_brand     : qt
    minor_version   : 0
    compatible_brands: qt
    creation_time   : 2023-08-17T05:39:30.000000Z
    com.apple.quicktime.make: Apple
    com.apple.quicktime.model: iPhone 12 Pro Max
    com.apple.quicktime.software: 16.6
    com.apple.quicktime.creationdate: 2023-08-17T13:39:30+0800
  Duration: 00:00:10.14, start: 0.000000, bitrate: 8735 kb/s
  Stream #0:0(und): Video: hevc (Main 10) (hvc1 / 0x31637668), yuv420p10le(tv, bt2020nc/bt2020/arib-std-b67), 1920x1080, 8524 kb/s, 29.98 fps, 29.97 tbr, 600 tb
n, 600 tbc (default)
    Metadata:
      creation_time   : 2023-08-17T05:39:30.000000Z
      handler_name    : Core Media Video
      vendor_id       : [0][0][0][0]
      encoder         : HEVC
    Side data:
      DOVI configuration record: version: 1.0, profile: 8, level: 4, rpu flag: 1, el flag: 0, bl flag: 1, compatibility id: 4
  Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 152 kb/s (default)
    Metadata:
      creation_time   : 2023-08-17T05:39:30.000000Z
      handler_name    : Core Media Audio
      vendor_id       : [0][0][0][0]
  Stream #0:2(und): Data: none (mebx / 0x7862656D), 0 kb/s (default)
    Metadata:
      creation_time   : 2023-08-17T05:39:30.000000Z
      handler_name    : Core Media Metadata
  Stream #0:3(und): Data: none (mebx / 0x7862656D), 7 kb/s (default)
    Metadata:
      creation_time   : 2023-08-17T05:39:30.000000Z
      handler_name    : Core Media Metadata
  Stream #0:4(und): Data: none (mebx / 0x7862656D), 38 kb/s (default)
    Metadata:
      creation_time   : 2023-08-17T05:39:30.000000Z
      handler_name    : Core Media Metadata
Unsupported codec with id 0 for input stream 2
Unsupported codec with id 0 for input stream 3
Unsupported codec with id 0 for input stream 4

[mertalev]

That's the original video. I guess this trick is a way to serve the original video instead of the transcode.

But then it's strange that the transcode isn't working even when set to H.264 in yuv420p. That should be compatible with just about everything.

[mertalev]

Did you get the video you checked with ffprobe by clicking on the download button on web? That would download the original in all cases.

[FrankelJb]

Did you get the video you checked with ffprobe by clicking on the download button on web? That would download the original in all cases.

My bad. Yes, I did the download button. Here's the "save this video" ffprobe:

❯ ffprobe a6bf9304-3911-414f-aa07-e77c8b1078e1.mp4
ffprobe version 4.4.2-0ubuntu0.22.04.1 Copyright (c) 2007-2021 the FFmpeg developers
  built with gcc 11 (Ubuntu 11.2.0-19ubuntu1)
  configuration: --prefix=/usr --extra-version=0ubuntu0.22.04.1 --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --arch=amd64 --enable-gpl --disable-stripping --enable-gnutls --enable-ladspa --enable-libaom --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libcodec2 --enable-libdav1d --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libjack --enable-libmp3lame --enable-libmysofa --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libpulse --enable-librabbitmq --enable-librubberband --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libsrt --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx265 --enable-libxml2 --enable-libxvid --enable-libzimg --enable-libzmq --enable-libzvbi --enable-lv2 --enable-omx --enable-openal --enable-opencl --enable-opengl --enable-sdl2 --enable-pocketsphinx --enable-librsvg --enable-libmfx --enable-libdc1394 --enable-libdrm --enable-libiec61883 --enable-chromaprint --enable-frei0r --enable-libx264 --enable-shared
  libavutil      56. 70.100 / 56. 70.100
  libavcodec     58.134.100 / 58.134.100
  libavformat    58. 76.100 / 58. 76.100
  libavdevice    58. 13.100 / 58. 13.100
  libavfilter     7.110.100 /  7.110.100
  libswscale      5.  9.100 /  5.  9.100
  libswresample   3.  9.100 /  3.  9.100
  libpostproc    55.  9.100 / 55.  9.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a6bf9304-3911-414f-aa07-e77c8b1078e1.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomdby1iso2avc1mp41
    encoder         : Lavf60.3.100
  Duration: 00:00:10.15, start: 0.000000, bitrate: 4919 kb/s
  Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuvj420p(pc, bt709), 1280x720, 4784 kb/s, 29.97 fps, 29.97 tbr, 30k tbn, 59.94 tbc (default)
    Metadata:
      handler_name    : Core Media Video
      vendor_id       : [0][0][0][0]
      encoder         : Lavc60.3.100 libx264
  Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 127 kb/s (default)
    Metadata:
      handler_name    : Core Media Audio
      vendor_id       : [0][0][0][0]

[raisinbear]

Mine is below. FWIW, I mounted my encoded videos folder in a FileBrowser instance and tried playing back the files in mobile Safari. They all play back normally. So it doesn’t seem to be an issue with the files.

ffprobe version 4.3.6-0+deb11u1 Copyright (c) 2007-2023 the FFmpeg developers built with gcc 10 (Debian 10.2.1-6) configuration: --prefix=/usr --extra-version=0+deb11u1 --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --arch=amd64 --enable-gpl --disable-stripping --enable-avresample --disable-filter=resample --enable-gnutls --enable-ladspa --enable-libaom --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libcodec2 --enable-libdav1d --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libjack --enable-libmp3lame --enable-libmysofa --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libpulse --enable-librabbitmq --enable-librsvg --enable-librubberband --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libsrt --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxml2 --enable-libxvid --enable-libzmq --enable-libzvbi --enable-lv2 --enable-omx --enable-openal --enable-opencl --enable-opengl --enable-sdl2 --enable-pocketsphinx --enable-libmfx --enable-libdc1394 --enable-libdrm --enable-libiec61883 --enable-chromaprint --enable-frei0r --enable-libx264 --enable-shared libavutil 56. 51.100 / 56. 51.100 libavcodec 58. 91.100 / 58. 91.100 libavformat 58. 45.100 / 58. 45.100 libavdevice 58. 10.100 / 58. 10.100 libavfilter 7. 85.100 / 7. 85.100 libavresample 4. 0. 0 / 4. 0. 0 libswscale 5. 7.100 / 5. 7.100 libswresample 3. 7.100 / 3. 7.100 libpostproc 55. 7.100 / 55. 7.100 Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '08b04d22-c116-4d7d-8e82-a8715b0ccc46.mp4': Metadata: major_brand : isom minor_version : 512 compatible_brands: isomiso2avc1mp41 encoder : Lavf60.3.100 Duration: 00:00:40.52, start: 0.000000, bitrate: 1113 kb/s Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p(tv, bt709), 1280x720, 971 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default) Metadata: handler_name : Core Media Video encoder : Lavc60.3.100 libx264 Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 133 kb/s (default) Metadata: handler_name : Core Media Audio

[jrasm91]

Yup, h264/aac should play back without an issue as you've demonstrated. This seems to be some type of Safari specific incompatibility with the video player.

[raisinbear]

Yup, h264/aac should play back without an issue as you've demonstrated. This seems to be some type of Safari specific incompatibility with the video player.

That’s what I was guessing at, but it looks like nowadays this is handled by a html5 <video> tag, which brings up the browser default player, if I get it right 😅. So it might be part of the triggered code, which is actually limited to a few lines. Maybe something to do with setting the volume or the autoplay part. Searching a little, both seem at least at some point to have been an issue with Safari. After executing these lines, the spinner should go away if I read it correctly. But that never happens and eventually it might be blocking the play button by staying.

Edit: Same for Chrome on iOS, just downloaded and tested. Probably because 3rd party browsers on iOS use Safari engine 🙄

[jrasm91]

Looks like the canplay event never fires on safari, which is why the spinner stays around. We need to handle that situation I guess. Videos don't auto play with sound unless there is user interaction first and for some reason clicking on the thumbnail doesn't seem to count.