미디어 크기에 따라 비디오 디스플레이를 자동으로 조정합니다.

Question

웹페이지에서 배경 동영상을 실행할 계획인데 모바일과 데스크톱용 동영상 파일이 다릅니다. 나는

<동영상 자동재생 루프 음소거된 재생인라인>
  <source src="desktop.mp4" type="video/mp4">
  <source src="desktop.webm" type="video/webm">
  <img src="fallback.jpg" >
</video>

미디어 쿼리에 대한 솔루션을 본 적이 있지만 제가 아는 한 그것은 사양을 벗어나며 iOS/Safari에서 지원되지 않습니다.

Answer 1

미디어 쿼리를 사용하면 해당 정의에 따라 src 또는 기타 콘텐츠를 사용할 수 있습니다. CSS-Tricks에 대한 이 기사를 확인하세요: https://css-tricks.com/video-source-by-screen-size/ 그러나 이 기능은 모든 브라우저에서 안정적인 기능이 아닌 것 같습니다.

으아악

기사에서 언급했듯이 또 다른 방법은 JavaScript를 사용하여 뷰포트 크기에 따라 비디오의 src를 변경하는 것입니다.