| PHP | PHP 7.4 |
|---|---|
| CMS | Rhymix 2.1 |
예시 동영상입니다.
해당 영상은 첨부 용량상 8메가짜리영상으로
fullhd가 아니라 그나마 조금 보기 불편한 정도로 올라가지만
(픽사베이 무료 영상으로 저작권 문제없음)
대부분 세로로 촬영된 휴대폰 영상은 full hd로 화면을 꽉채워서 촬영되다보니
pc화면에서는 한눈에 보여지지 않고 휠을 내려야 영상아래부분을 볼 수있는 영상으로 상당히 불편해집니다.
혹은 화면 배율을 50%로 하거나요.
이를 해결할 방법이 있을까요?
https://xetown.com/download/1752082
앞서 공개했던 애드온처럼 CSS로 처리하는 방법이 있을것 같은데
이것 또한 글이 다 작성되고 업로드된 이후의 처리 방식일 것같고
글쓰기 에디터 상에서 세로 이미지나 동영상이 첨부 되었을때 비율을 적절하게 업로드될 수 있게 설정이 가능할까요?
예시 이미지
첨부하신 나무늘보 사진은 XE타운의 본문 영역보다 훨씬 넓은 이미지인데, 본문 영역 폭에 딱 맞추어서 표시되지요? 라이믹스에서 본문 내의 모든 이미지에 max-width: 100%; 속성을 적용했기 때문입니다. 이 상태에서 height를 별도로 지정하지 않으면 높이는 비율에 맞추어 자동 조정되고요.
마찬가지로, 스킨이나 레이아웃에서 본문 내의 이미지나 동영상에 max-height: 100vh; 속성을 적용한다면 화면 높이를 초과하지 않도록 축소할 수 있습니다. 물론 좌우 너비은 본문 폭보다 더 좁아지겠지요.
사이트에 따라서는 고정된 헤더나 푸터 때문에 실제로 이미지를 볼 수 있는 영역이 100vh보다 더 좁을 수도 있습니다. 이럴 때는 max-height: calc(100vh - 80px); 등으로 필요한 만큼 더 줄이도록 하면 됩니다.
에디터 내에서도 마찬가지입니다. 물론 에디터를 전체화면으로 띄우는 사이트는 거의 없기 때문에, 사진 높이가 300px만 넘어가도 에디터 영역을 가득 채워버리기 일쑤이지요. 어쨌거나 원본 사진/영상의 가로세로 크기는 알 필요도 없고 사용해서도 안 됩니다. HTML 소스상에서 width와 height를 강제 지정해 버리면 추후 레이아웃이나 스킨을 변경했을 때 유연하게 대응할 수 없으니까요. 별도의 CSS로 처리하는 것을 추천합니다.
PC일때는 에디터 내 그리고 본문 작성 후에
max-height: 60vh; 등으로 조절해서 사용하도록 해야겠네요.
감사합니다.
그러려면 비디오 파일 첨부시에 source_filename이나 mime_type외에 width와 height도 확인이 되어야 할 텐데요.
파일 업로드 ajax 통신 중 (이미지 파일 외에) 동영상 파일에서 width와 height 값을 반환해주는 것 같지는 않습니다.
(db에 기록될 때도 width와 height 컬럼 값은 null 처리되는군요)
php에선 MP4Info라는 라이브러리가 있었던 것 같구요. (근데 서버 부하가 좀 있을지도 모르겠어요)
js에서 html5 비디오라면 비디오의 가로세로 비율을 구해서 파일 업로드 콜백함수에 끼어드는 것도 방법이지 않을까 싶습니다. (참고 : https://stackoverflow.com/questions/4129102/html5-video-dimensions#answer-4129189)