メディアサイズに基づいてビデオ表示を自動的に調整します
P粉807239416
2023-08-25 10:29:52
<p>Web ページで背景ビデオを実行する予定で、モバイルとデスクトップ用に異なるビデオ ファイルがあります。私</p>
<pre class="brush:php;toolbar:false;"><ビデオ自動再生ループミュート再生インライン>
<ソース src="desktop.mp4" type="video/mp4">
<ソース src="desktop.webm" type="video/webm">
<img src="fallback.jpg" >
</video></pre>
<p>メディア クエリの解決策を見てきましたが、私が理解している限り、それは仕様外であり、iOS/Safari ではサポートされていません。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
メディア クエリを使用すると、その定義に基づいて src またはその他のコンテンツを使用できます。 CSS-Tricks に関するこの記事をご覧ください: https://css-tricks.com/video-source-by-screen-size/ ただし、これはすべてのブラウザで安定した機能ではないようです。
リーリー記事で述べたように、JavaScript を使用してビューポート サイズに基づいてビデオの src を変更する別の方法もあります。