動画背景/video only or jQuery plugin/OSとデバイスの再生可否をユーザーエージェント切り替えで乗り切る

表示確認したOSとブラウザ

  • Android 6.0/Chrome
  • Android 6.0.1/Chrome
  • iOS 9.3.5/Safari
  • iOS 11.1.2/Safari
  • macOS 10.12.1 Sierra/Chrome, Firefox, Safari
  • Windows 7/Chrome, Firefox, IE 10, 11
  • Windows 10/Edge

 

OSとブラウザの再生可否

html videoのみでは再生できない

  • Android 6.0
  • iOS 9以下 ※10以上からOK

jQueryプラグインが動かない

  • iOS 9.3.5, 11.1.2
  • macOS 11 High Sierra/Safari

これらを何とかしようとする人がたまにいるが、無駄なので止めてあげよう。

 

デモで利用したファイル

  • フリー素材mp4
  • jQuery 2.2.0
  • jQuery Vide
  • Animate.css

mp4は元ファイルを、

  • 15秒
  • 解像度 960×540
  • コーデック H.264
  • ビットレート 500kbps
  • 音声削除
  • 黒ふち削除

にて変換、容量は約1MB。
高画質動画ファイルを使うと、高スペックPCですらブラウザフリーズが発生したりするのでやっちゃいけない、スマホでは論外。

 

デモで実装していること

  • iOS/macならhtml videoを、それ以外のOSならVideコードを追加
  • 自動再生とループ
  • 動画領域の高さ指定は%不可だが、px/vhなら使える
  • 横幅は px/%/vh 全て使える
  • 静止画は再生プレイヤーの0秒をキャプチャしてJPEG作成、縦横サイズ・ファイル名は動画と同一
  • 低画質をごまかすため、2×2のPNGを背景リピートで網掛け状に
  • ブロック直書きの style=”opacity: 0;” は読み込み時のチラつき防止

 

フルブラウザ

macでは領域に収納できておらず不格好だが、面倒なので修正していない。

 

ブロック領域

HTML/JavaScriptはフルブラウザと同じ、SCSSはブロックのwidth/heightのみ修正。


3コメント
ss

すいません質問です。demoページのファイルをダウンロードしてローカルで表示させたら背景動画がちゃんと再生されますが、サーバーにアップして試にiOSから表示させたら動画がうまく再生されません。demoページを同じiOSから表示させたらちゃんと再生されます。
demoページのソースでiOSで表示させる何か特別な事をしているのでしょうか?

›› 返信
鼻ちょうちん

ssさん
こんにちは。
特別な事をした覚えがないため、demoを調べないと何とも言えません…。
すみませんもうしばしお待ちください。

›› 返信
鼻ちょうちん

demoを調べましたが、やはり特別な事は施していませんでした。
PCやAndroidでは表示されるでしょうか? またはパスやファイル名を間違えていないか、今一度確認してみてください。

›› 返信

鼻ちょうちん にコメントする 返信をキャンセル

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。