Laraskan paparan video secara automatik berdasarkan saiz media

Question

Saya merancang untuk menjalankan video latar belakang pada halaman web dan saya mempunyai fail video yang berbeza untuk mudah alih dan desktop. I

<gelung automain video diredamkan playsinline>
  <sumber src="desktop.mp4" type="video/mp4">
  <sumber src="desktop.webm" type="video/webm">
  <img src="fallback.jpg" >
</video>

Saya telah melihat penyelesaian untuk pertanyaan media, tetapi setakat yang saya faham ia di luar spesifikasi dan tidak disokong oleh iOS/Safari.

Answer 1

Anda boleh menggunakan pertanyaan media untuk menggunakan src atau kandungan lain berdasarkan definisinya. Lihat artikel ini tentang CSS-Tricks: https://css-tricks.com/video-source-by-screen-size/ Walau bagaimanapun, nampaknya ini bukan ciri yang stabil pada semua penyemak imbas.

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

Seperti yang dinyatakan dalam artikel, kaedah lain ialah menggunakan JavaScript untuk menukar src video berdasarkan saiz viewport.