最近、同社は公式ウェブサイトの新しいバージョンの開発を開始しました。ホームページの上部（ヘッダー）は、フルスクリーンで再生される小さなビデオであり、簡単に次のように要約されます。
ページコード
<header class = "header" style = "width：100％; position：relative;">
<？php if（！Helper :: isMobile（））{？>
<video id = "homeVideo" class = "home-video "自動再生ループミュートposter =" res / video / cover.jpg ">
<source src =" res / video / home_video.mp4 "type =" http://www.999sjw.com/ video / mp4 ">
</ video >
<？php}？>
</ header>
その中で、phpは単にモバイルデバイスであるかどうかを判断し、モバイルデバイスはビデオを表示しません（モバイル端末に表示されている場合は、iOSで自動的に再生できないという問題を解決する必要があります）：
ps：H5ページが主にWeChatブラウザーでアクセスされる場合、iOSでの自動ビデオ再生の問題を解決できます：iOS h5オーディオの自動再生を解決します（プロテストに有効）
class Helper { public static function isMobile（）{ if（preg_match（ "/（iPhone | iPod | Android | ios | iPad）/ i"、$ _SERVER ['HTTP_USER_AGENT']））{ return true; } else { falseを返す; } } }
ビデオタグスタイル
ビデオが画面全体を占めるようにするには、ビデオタグのスタイルを設定することが重要です。
.home-video { z-index：100; 位置：絶対; 上：50％; 左：50％; 最小幅：100％; 最小の高さ：100％; object-fit：fill; / *これ里是関連键* / width：auto; 高さ：自動; -ms-transform：translateX（-50％）translateY（-50％）; -webkit-transform：translateX（-50％）translateY（-50％）; 変換：translateX（-50％）translateY（-50％）; 背景：url（../ video / cover.jpg）繰り返しなし; 背景サイズ：カバー; }
ビデオは、ブラウザのウィンドウサイズの変更に従います。
$（ '。home-video'）。height（window.innerHeight）;
$（ '。header'）。height（window.innerHeight）;
$（window）.resize（function（）{ $（ ' 。home -video'）。attr（ 'height'、window.innerHeight）; $（ ' 。home -video'）。attr（ 'width'、window。 innerWidth）; $（ ' 。header '）。height（window.innerHeight）; }）;
ページが読み込まれると、自動再生が有効にならないように再生が再度トリガーされます
document.getElementById（ 'homeVideo'）。play（）;