iOS 및 macOS Safari에서 동영상 재생 문제

안녕하세요,

3.6.0.beta3-latest 버전에서 iPhone과 macOS의 Safari 사용자가 업로드된 .mp4(H.264) 형식의 동영상을 재생하려고 할 때 무한 스피너가 표시되는 문제를 발견했습니다. 같은 동영상들은 최근까지 정상적으로 재생되었는데(마지막으로 정상 작동했을 때의 Discourse 버전이 무엇이었는지 정확히 기억나지 않습니다).

Safari가 동영상의 첫 바이트(Range: bytes=0-1)를 가져오기 위해 GET 요청을 보내는 것으로 보입니다(예: /uploads/default/original/1X/44395933ccadf546b1b1ce65b742e24f900b33fa.mp4). 이 요청은 200 응답을 반환하지만, JS 콘솔이나 네트워크 검사기에는 원인이 표시되지 않고(단순히 빨간색으로 강조만 되어 있으며 에러 메시지는 없습니다) 실패합니다. 동일한 URL을 브라우저에 직접 붙여넣으면 전체 동영상을 성공적으로 다운로드하고 재생할 수 있습니다.

macOS의 Firefox와 Chrome에서는 동영상 재생에 문제가 없으며, Android의 브라우저에서도 문제가 발생하지 않는 것으로 보입니다.

동영상 용량은 작습니다(10MB 수준). 업로드에 S3를 사용하지 않고 있습니다.

다른 분들도 iPhone/Safari에서 동영상 재생 관련 문제를 겪고 있는지, 아니면 문제가 없는지 확인해 주실 수 있을까요? 그리고 이 문제를 파악하는 데 도움이 될 수 있는 다른 진단 방법을 알고 계신가요?

4개의 좋아요

저도 포럼에서 비슷한 문제를 겪고 있습니다. 하지만 같은 파일들을 여기서 테스트해 보니 정상적으로 동작합니다. iOS/Safari 사용자만 영향을 받고 있습니다. WEBM 컨테이너의 일부 영상은 재생되지만, 대부분의 mp4, mov 등은 재생되지 않습니다.

2개의 좋아요

안녕하세요, 최근 문제를 겪고 있어 @tsk 님이 시작하신 스레드에 댓글을 남겼는데, 해당 스레드는 목록에서 삭제되었습니다. 처음에는 웹m/vp9 인코딩된 비디오가 포럼에서 정상적으로 재생되므로 문제가 mp4/av1 인코딩된 비디오에만 있는 것으로 가정하고 있었지만, Safari 사용자의 경우 문제가 그보다 더 복잡해 보이는 것으로 판단됩니다.

재미로 확인해 봤는데, 최신 버전을 사용 중입니다. 다만 커밋 기록을 살펴봐도 Apple 사용자에게 영향을 미칠 만한 내용은 보이지 않네요.

저희 설정은 업로드에 로컬 스토리지를 사용하고 있습니다. 대부분의 스레드는 신뢰 등급에 따라 잠겨 있지만, 여기서는 공개 카테고리에서 테스트하고 있습니다:

https://forum.pixelspace.xyz/t/safari-playback/1516

해당 비디오 링크를 공유해 주시거나, 여기에 업로드해 주실 수 있을까요?

1개의 좋아요

@Les79 이 영상을 테스트로 두 개의 포럼에 모두 업로드했습니다.

pixelspace safari 재생 스레드의 영상은 작동하지 않지만, 여기 있는 영상은 정상적으로 재생되는지 확인해 주시겠어요?

1개의 좋아요

네, 여기에 게시된 영상은 제 iPhone 13과 MacBook Pro M3 모두에서 Safari에서 정상적으로 재생됩니다. PixelSpace 포럼에서는 재생되지 않습니다.

2개의 좋아요

이 비디오는 MP4 형식의 H.264로, Discourse를 실행하는 모든 브라우저에서 재생되어야 합니다. 여기서는 재생되는데 여러분의 인스턴스에서는 재생되지 않으므로, 그곳에 설정 오류가 있는 것으로 추정됩니다.

Discourse 위에 별도의 리버스 프록시를 실행하고 계신가요? 이 인스턴스에서는 표준 설치 환경에 존재하지 않는 일부 헤더를 확인했기 때문에, 그곳에서 어떤 설정이 변경되었는지 궁금합니다.

1개의 좋아요

저도 같은 현상을 보고 있습니다.

저는 이 컨테이너를 리버스 프록시로 사용하고 있습니다.

이것이 부분적인 원인일 수 있다고 생각했지만, 설정은 변경되지 않았고 제가 파악한 바로는 3.6.0-beta2에서 새로 발생한 문제입니다. 재빌드 이후로 Apple 사용자들로부터 불만을 받기 시작했습니다. @mandyk와 비슷하게, 이전에 어떤 버전을 사용했는지 기억이 나지 않습니다.

discourse에서 평가해 봐야 할 특정 설정이 있을까요?

1개의 좋아요

Discourse가 아니라 프록시 문제입니다.

불행히도 사람들이 Discourse 위에 추가 요소를 구성할 때 발생할 수 있는 무한한 설정 가능성들을 현실적으로 모두 다루기 어렵습니다. 그래서 Discourse를 위해 리버스 프록시가 설정된 표준 설치 환경에서 검증된 안정적인 기본 구성을 제공하고 있습니다.

nginx 설정의 한 스탠스가 누락되었을 수 있지만, 이 부분은 직접 조사해야 합니다.

2개의 좋아요

이 스레드에 게시된 영상이 Safari에서 정상적으로 재생되는 것도 확인했습니다.

이것이 관련 있는지는 확실하지 않지만, 발견할 수 있는 차이점 중 하나는 이 스레드의 영상이 S3에서 제공된다는 것입니다. Safari가 첫 번째 range 요청을 보내면 S3는 HTTP 206으로 응답하는데, 이는 올바른 것으로 보입니다. Pixelspace 인스턴스와 제 인스턴스는 모두 S3를 사용하지 않으며, Discourse가 HTTP 200으로 응답하는 것 같습니다(요청에 Range: bytes=0-1 헤더가 포함되어 있으므로 이는 올바르지 않은 것으로 보입니다).

같은 영상을 내 테스트 인스턴스에 업로드했습니다.

https://discourse-on-a-pi5.falco.dev/t/test-safari-bug/25?u=falco

discourse-on-a-pi5.falco.dev의 비디오가 Safari에서 나에게 작동하지 않는다는 것을 확인했습니다. 다시 한번, 비디오 요청이 206 대신 200을 반환하는 것을 볼 수 있습니다.

수정: 추가로, Range: bytes=0-1이 지정되었음에도 불구하고 응답이 전체 비디오를 반환하려고 하는 것으로 보입니다. 범위 요청이 무시되고 있는 것 같으며, Safari는 이에 민감한 것으로 보입니다.

추가 수정: 이는 아마도 다른 브라우저에서도 효율적인 탐색(Seeking)이 깨져 있을 가능성이 높습니다. Safari를 제외한 브라우저들은 탐색을 수행하기 전에 전체 비디오를 다운로드해야 하므로요.

3개의 좋아요

저는 사파리에서 재생이 안 됩니다.

그리고 https://discourse-on-a-pi.falco.dev/t/test-safari-bug/101?u=falco에서는 작동하나요?

네, 그 방법이 작동하네요! 거기서 HTTP 206도 확인됩니다.

1개의 좋아요

그럼 우리의 기본 nginx 설정에서 회귀(regression)가 발생한 것 같네요. 보고해 주셔서 감사합니다, @mandyk

1개의 좋아요

비교할 수 있는 반증(counter-repro)을 올려주신 @Adubs님께 감사드립니다. 그리고 훌륭한 도구를 만들어 주신 Discourse 팀에게도 감사드립니다.

5개의 좋아요

참고로, app.yml을 app2.yml로 복사하고 URL과 몇 가지 디렉토리를 변경한 결과, testfor.pixelspace.xyz가 stable 브랜치를 실행하고 있습니다.

https://testfor.pixelspace.xyz/t/safari-playback-test/8

사용자들은 동일한 프록시를 통해 여기에서 정상 작동한다고 확인해 주었습니다.

수정: 이제 문제가 확인되었음을 알 수 있습니다. 이 방법을 더 일찍 시도해보지 못한 점 죄송합니다. 통찰력을 주셔서 감사합니다 @mandyk

저 혼자서는 이 문제를 해결하지 못했을 것입니다.

3개의 좋아요