티스토리, 소중한 playsinline 외면하지 말아줘

하지만 고쳐주지 않을 거라면 내가 직접 쑤셔 넣는다.

 

---

 

용량 괴물 GIF 대신 MP4로 산뜻하게 움짤을 만들어 쓰는 방법이 있다.

<video src="{source url}" autoplay loop muted playsinline width="100%"></video>

이렇게 각종 애트리뷰트를 추가해서 <video> 태그를 사용하면 마치 GIF를 쓴 것처럼 영상을 자동 재생할 수 있다.
autoplay가 자동 재생을 위한 핵심 속성인데
브라우저 정책 상 소리가 있는 영상을 자동 재생하려고 하면 브라우저에서 차단하기 때문에 muted 속성을 붙여줘야 한다.
여기까지만 하면 iOS에서는 페이지 로드 시 영상이 재생되면서 자동으로 전체 모드로 진입한다.
내가 원하는 건 영상이 사진처럼 글 안에서 재생되는 거니까 playsinline 속성도 붙여줘야 한다.

 

ref. https://webkit.org/blog/6784/new-video-policies-for-ios/

 

아니 근데 문제는,
아무리 playsinline를 붙여도 글을 발행하면 이 속성을 떼어버리고 제출을 한다는 거다.
에디터에서 지원하지 않는 애트리뷰트라서인지...?
controls 속성도 마찬가지다.
HTML 모드에서 글을 발행하면 편집한 내용이 반영되지 않는 버그도 있다.

 

---

 

티스토리에서 이걸 고치는 걸 기다리려면 한-참 있어야 하겠으나
영상으로 도배된 https://eternal-records.tistory.com/234 ← 이런 글을 써놓고 패치를 기다리자니 참을 수가 없었다.
혹시나 싶어 글을 제출할 때 날아가는 요청 그대로 복사해다가
content 항목에 있는 비디오 태그에 playsinline 넣어주고 요청 날리니까
오오 200 응답이 올뿐만 아니라 애트리뷰트 누락도 없이 잘 반영되는 게 아닌가
비디오 태그 썼던 게시물 싹 찾아서 다 수정했다.
흐흐 넘 조타

 

그래도 매번 이렇게 하긴 귀찮으니까 티스토리 팀에서 얼른 고쳐줬으면 좋겠다 🙏
'티스토리 GIF 대신 MP4'만 검색해도 게시물이 넘쳐나는데
이런 사용자 패턴 파악하고 10MB 제한 걸더라도 움짤 첨부 기능 붙여주면 더 좋고 😘

 

 

+

과거로 발행도 되나 봤는데 403 에러와 함께 "예약 발행은 1년 이내로만 가능합니다." 메시지가 옴