jQuery/Vanilla Javascript

【jQuery】webサイトの背景で全画面動画再生ができるプラグインvideの使い方。スマホも再生する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

背景をフルスクリーンで動画にする方法第2弾です。サイトの全画面背景で動画を再生する方法としてYouTubeやVimeoなど動画サイトを利用したものもありますが、今回はmp4などの動画ファイルをサイトの全画面で再生するjQueryプラグインのvideをサンプルデモ付きで解説していきます。

背景をフルスクリーンで動画にする方法第1弾、YouTube版はこちらです。
【jquery.tubular】Webサイトの背景にYouTube動画を実装し、スマホも対応させる方法

公式サイト:Vide

公式サイトのDownloadボタンからソースをダウンロードします。
GitHub はこちらになります。

ダウンロードファイル内にあるsrcフォルダのjquery.vide.jsを読み込みます。
jQueryのプラグインなのでjQueryも忘れずに読み込んでおきましょう。

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.vide.js"></script>

次に動画を読み込む任意の要素(fullsc)にdata-vide-bg=”video/video”として、動画のパスと動画のファイル名(拡張し無し)を設定します。

<div class="fullsc" data-vide-bg="video/video">
  <h1 class="tit_top">タイトルなど</h1>
</div><!-- fullsc  -->

fullscにcssでwidth: 100%; height: 100vh; を設定します。これでブラウザ全画面設定になります。

.fullsc{
	margin: 0;
	width: 100%;
	height: 100vh;
	position: relative;
}

次に上記 data-vide-bg で指定したフォルダ、ファイル名に動画ファイルとposter画像を以下のように格納して終了です。
動画の種類としてはmp4、webm、ogvになります。

サンプル

スマホでも再生させたい場合はjquery.vide.jsをカスタマイズします。

スマホでは以下のようにvideoタグにplaysinline属性を指定すると再生されます。

<video webkit-playsinline playsinline>
...
</video>

jquery.vide.js内の以下の(299行目と301行目付近)部分にwebkit-playsinline playsinlineを追加します。

    if (typeof path === 'object') {
      if (path.mp4) {
        sources += '<source src="' + path.mp4 + '.mp4" type="video/mp4">';
      }

      if (path.webm) {
        sources += '<source src="' + path.webm + '.webm" type="video/webm">';
      }

      if (path.ogv) {
        sources += '<source src="' + path.ogv + '.ogv" type="video/ogg">';
      }
//★videoタグにplaysinlin追加↓
      $video = vide.$video = $('<video webkit-playsinline playsinline>' + sources + '</video>');
    } else {
//★videoタグにplaysinlin追加↓
      $video = vide.$video = $('<video webkit-playsinline playsinline>' +
        '<source src="' + path + '.mp4" type="video/mp4">' +
        '<source src="' + path + '.webm" type="video/webm">' +
        '<source src="' + path + '.ogv" type="video/ogg">' +
        '</video>');
    }

上記2か所の修正でスマホでも再生可能となります。

vide公式サイトでも同じ現象が起こっているのですが、SafariではスマホもPCも再生されず静止画になってしまいます。

動画がplayingになるまでは静止画を表示し、videoタグを非表示にしているという処理がSafariでうまく動いていない状態でした。

jquery.vide.js内の以下の(339行目付近)visibility: ‘hidden’及びopacity: 0部分をコメントアウトすることで解決できました。

    // Video alignment
    $video.css({
      margin: 'auto',
      position: 'absolute',
      'z-index': -1,
      top: position.y,
      left: position.x,
      '-webkit-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      '-ms-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      '-moz-transform': 'translate(-' + position.x + ', -' + position.y + ')',
      transform: 'translate(-' + position.x + ', -' + position.y + ')',

      // Disable visibility, while loading
      //visibility: 'hidden', ← ★コメントアウト★
      //opacity: 0       ← ★コメントアウト★
    })

mp4などからwebm、ogvへ変換する必要があるので以下のサイトでオンライン変換します。

ビデオファイルをオンラインで変換する-aconvert.com

変換後はダウンロードボタンを押すと動画のURLが表示されるので右クリックで名前を付けてリンク先を保存で変換後の動画が取得できます。

動画を全画面で表示する場合必ずしもYouTubeの動画であるとは限らないのでmp4など動画ファイルでの方法も把握しておくと便利だと思いました。

全体的にvideは関数の呼び出し設定などが無く、指定したフォルダに保存するだけなのでとても組み込みやすいプラグインでした。 IE11でも問題なく動くところも評価が高いです。

uhaha

簡単に組み込めるのでデザイン提案時点でモックみてもらうことも可能かな。クライアントにインパクトを与えられます。Safariの対応してくれればもう完璧なのでは?

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*