Video on qwerty.work

【JS】videoタグ動画の画面クリックでPlay/Pauseできるようにする

Tue, 07 Dec 2021 17:11:05 +0900

画面タッチで再生/停止をしたい

サイトの背景イメージとしてにvideoタグで動画埋め込んだページを制作する機会がありました。背景なので、デザイン的にcontrolsで再生ボタンなどのツールバーは表示させたくありません。それを避けながらPlay/Pauseの機能を付けたいといった要望に応えることになりました。

そこで、方法を調べたらありました。結構、簡単にあっさり実現できました。参考にさせていただいたのは以下のページ。

https://qiita.com/ryo2132/items/bac787725c983d0e3f4b https://qiita.com/ryo2132/items/bac787725c983d0e3f4b

ソース例

HTML

<div class="video-wrap">
        <source src="test.mp4" type="video/mp4" />
        <img src="test-movie.jpg" />
        </video>
        <div class="video-btn" id="video-btn"></div>
</div>

CSS

.video-wrap {
    position: relative;
}
.video-btn {
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:40px; /*コントローラー分下部に余白を*/
    cursor: pointer;
    z-index: 2; /*ボタンが前面になるようにする*/
}

Javascript

const video = document.querySelector('#video');
const video_btn = document.querySelector('#video-btn');
let is_playing = false;

video_btn.addEventListener('click', () => {
    if (!is_playing) {
        video.play();
        is_playing = true;
    } else {
        video.pause();
        is_playing = false;
    }      
});

videoタグにcontrolsを設定したのに再生ボタンを押せないとき

Mon, 06 Dec 2021 21:44:57 +0900

MP4ビデオの再生ボタンがクリックできない

WEBサイトにMP4の動画を設置しました。再生／停止や全画面再生などのメニューを表示させるため、****タグにcontrolsを加えました

<video controls src="sample.mp4">

しかし、以下のように再生ボタンにカーソルを重ねても指のマークに変わらず、クリックできません。

z-indexで解決

原因はヘッダーをページ上部に固定していたせいかもしれませんが、controlsで表示されるメニューのレイヤーが前面になっていなかったせいのようです。これを解決するのが**スタイルシート（CSS）**で前面・背面のレイヤーを操作するz-index。

例

video {
  z-index:2;
}

数字が大きくなるほど前面（手前）に位置することを示します。絶対的に前面にするなら、1000とか極端な値を設定すれば良いかと思います。逆に、よく見かけるz-index:1;は最背面で、前後でいう一番奥を指定していることを表しています。

この、z-indexで動画を最前面にすることで再生ボタンをクリックすることができました。

z-indexについての参考ページ

https://developer.mozilla.org/ja/docs/Web/CSS/z-index https://developer.mozilla.org/ja/docs/Web/CSS/z-index

【JS】VIDEOタグで指定する動画をPCとスマホ用に切り替えるJavascript

Thu, 25 Nov 2021 09:43:10 +0900

スマホとパソコンで動画を切り替えたい

動画の再生開始に影響するファイルサイズ

WEBページの背景に動画を使用するサイトを制作する際に気になるのが、埋め込んだ動画のファイルサイズ。

再生時間は15秒から30秒で、ファイルサイズは10MBを基準と考えています。

『ファイル容量を小さくしながらも高画質にしたい』と思いますが、10MB前後を目指すとビットレートを1Mbps～2Mbpsまで落とさなければなりません。ここまで落とすと当然画質は悪くなるですが、背景イメージとしてはギリギリ許容できる画質で、再生時間が30秒前後で何とか10MB前後に収めることができます。

パソコンサイトは通信環境が整っている事が多いので問題ないと思うのですが、スマホなど回線速度が遅いとそうはいきません。たかが10MBでも動画の読込に時間がかかり、自動再生による再生開始が遅くなります。

スマートフォンやタブレットは画面サイズも小さいので、Bootstrap5 のグリッドシステムのブレークポイントを基準にして動画の解像度を考えると、横幅576ピクセル～768ピクセル、大きくても992ピクセルに対応できる解像度のものがあればよく、**480p（854×480 SD画質）または360p（640×360）**の動画を用意すればいいかと思います。この解像度で、ビットレート500kbpsまで下げると、約3MBくらいまでファイルサイズが落ちます。画質は当然悪くなりますが、スマホの画面での背景動画としてはギリギリ観るに耐えれる範囲かと思います。

パソコンとスマホ用に用意した2つの動画ファイル

「レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値」を参考に、制作中のレスポンシブサイトのブレークポイントを**sm（768px）**としたため、これを境に以下の解像度の異なる動画を用意しました。

パソコン用 … フルHD（1920×1080） MP4・WebM 約10MB
スマーフォン用 … 480p（854×480 ） MP4・WebM 約３MB

この二つをレスポンシブサイトにvideoタグで動画を埋め込み、アクセスしてきた画面サイズに応じて再生する方法がないかと探してみると、jQueryを使って切り替える方法がありました。

jQueryで画面サイズによって切り替える参考

https://shu-naka-blog.com/jquery/responsive_switching/ https://shu-naka-blog.com/jquery/responsive_switching/

ソース例

上記ページのソースを参考に、以下のソースでアクセスしてきたデバイスの画面サイズが768ピクセルを境に再生する動画を切り替えることができました。class="switch"を付ければ、複数ので埋め込んだ動画があっても対応できそうです。

動画のファイル名は最後尾を_spと_pcにします。
タグ内にclass="switch"を設定します。
この例は動画の遅延読込に Lozad.js を使用しているので、ソース指定にdata-srcとしていますので、Javascript内のsrcをdata-srcに変更しています。

<video playsinline autoplay loop muted preload="auto" class="lozad" poster="img/poster.png"/>
   <source type="video/webm" src="" data-src="video_sp.webm" class="switch">
   <source type="video/mp4" src="" data-src="video_sp.mp4" class="switch">
   <source type="video/webm" src="" data-src="video_pc.webm" class="switch">
   <source type="video/mp4" src="" data-src="video_pc.mp4" class="switch">
</video>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$(function() {
  // 切り替える対象にclass属性。
  var $elem = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 画像を切り替えるウィンドウサイズ。
  var replaceWidth = 768;
  
 function imageSwitch() {
  // ウィンドウサイズを取得する。
  var windowWidth = parseInt($(window).width());

 // ページ内にあるすべての`.switch`に適応される。
  $elem.each(function() {
  var $this = $(this);
  // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
  if(windowWidth >= replaceWidth) {
  $this.attr('data-src', $this.attr('data-src').replace(sp, pc));

 // ウィンドウサイズが768px未満であれば_pcを_spに置換する。
  } else {
  $this.attr('data-src', $this.attr('data-src').replace(pc, sp));
  }
  });
}
 imageSwitch();

// 動的なリサイズは操作後0.2秒経ってから処理を実行する。
var resizeTimer;
$(window).on('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    imageSwitch();
  }, 200);
  });
});

STUDIOで使いたいとき

ノーコードでホームページが制作できるSTUDIO（有料プラン）で制作したサイトのキービジュアルに背景動画を埋め込みたいときのJavascriptソース例。ChatGPTに手伝ってもらったソース。動画の遅延表示させるLozad.jsも併用しています。

Googleタグマネージャーで使うときのソース例

Google Tag Manager経由で以下のソースを使用するとうまくいきました。動画ファイルをSTUDIOにアップロードできないので、読み込みたい動画ファイル（MP4とWEBM）は外部のレンタルサーバーにアップロードしてあるものを使用します。STUDIOのBOX要素のIDにmvを設定し、JavascriptでVIDEOタグを挿入し、デバイスの画面幅に合わせてPC用とスマホ用を切り替えます。

Googleタグマネージャーのトリガーは「ページビュー」と「履歴の変更」の二つを設定してください。「ページビュー」のみだと、ブラウザの「戻る」ボタンで他のページから飛んできたときに発火しないので、その対策として「履歴の変更」が必要です。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  var observer = lozad();
  observer.observe();
</script>
<script>
// 動画がすでに追加されているかを確認する関数
function isVideoAdded() {
  return document.getElementById("mv").querySelector("video") !== null;
}

// 動画を追加する処理
function addVideo() {
  // すでに動画が追加されている場合は処理を中断
  if (isVideoAdded()) {
    return;
  }

  // 動画要素の作成
  var video = document.createElement("video");
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.setAttribute("playsinline", "");
  video.classList.add("lozad");

  // 最初のソース (WEBM) に "switch" クラスを追加
  var source1 = document.createElement("source");
  source1.src = "https://qwerty.work/mv_sp.webm";
  source1.setAttribute("data-src", "https://qwerty.work/mv_sp.webm");
  source1.type = "video/webm";
  source1.classList.add("switch");

  // 2つ目のソース (MP4) に "switch" クラスを追加
  var source2 = document.createElement("source");
  source2.src = "https://qwerty.work/mv_sp.mp4";
  source2.setAttribute("data-src", "https://qwerty.work/mv_sp.mp4");
  source2.type = "video/mp4";
  source2.classList.add("switch");

  // 動画にソースを追加
  video.appendChild(source1);
  video.appendChild(source2);

  // 動画をDOMに追加
  document.getElementById("mv").appendChild(video);

  // 動画の再生処理とエラーキャッチ
  video.play().catch(function(error) {
    console.error("Video play failed:", error);
  });
}

// ページビューまたは履歴変更時に呼び出す関数
addVideo();
</script>
<script>
// PCとスマホで動画ファイルを切り替える
$(function() {
  // クラス "switch" を持つ <source> タグを対象にする
  var $sources = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 動画を切り替えるウィンドウサイズ。
  var replaceWidth = 970;
  
  function videoSwitch() {
    // ウィンドウサイズを取得する。
    var windowWidth = parseInt($(window).width());

    // ページ内にあるすべての`.switch`（<source>タグ）に適応される。
    $sources.each(function() {
      var $this = $(this); // <source>要素

      // ウィンドウサイズが970px以上であれば_spを_pcに置換し、キャッシュバスティングを追加
      if (windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('data-src').replace(sp, pc));
      // ウィンドウサイズが970px未満であれば_pcを_spに置換し、キャッシュバスティングを追加
      } else {
        $this.attr('src', $this.attr('data-src').replace(pc, sp));
      }
    });

    // <video>要素全体を再ロードして、srcの変更を反映
    $('video').get(0).load(); // <video>要素のload()メソッドを呼び出す
  }

  videoSwitch();
  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      videoSwitch();
    }, 200);
  });
});
</script>

どうしてもカスタムコードで使いたいとき

Googleタグマネージャーの使い方がわからないので、STUDIOのカスタムコードに記載して使いたい場合はこちらのソース。発火のトリガーを複数設定しています。ページの遷移やブラウザによっては発火しないケースがあるかもしれません。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  var observer = lozad();
  observer.observe();
</script>
<script>
// 動画が既に追加されているか確認する関数
function isVideoAdded() {
  return document.getElementById("mv").querySelector("video") !== null;
}

// 共通の処理を関数として定義
function handleVideoLoad() {
  // 動画が既に追加されている場合は処理を中断
  if (isVideoAdded()) {
    return;
  }

  // 動画要素の作成
  var video = document.createElement("video");
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.setAttribute("playsinline", "");

  // クラス "lozad" を追加
  video.classList.add("lozad");

  // 最初のソース (WEBM) に "switch" クラスを追加
  var source1 = document.createElement("source");
  source1.src = "https://qwerty.work/mv_sp.webm";
  source1.setAttribute("data-src", "https://qwerty.work/mv_sp.webm");
  source1.type = "video/webm";
  source1.classList.add("switch");

  // 2つ目のソース (MP4) に "switch" クラスを追加
  var source2 = document.createElement("source");
  source2.src = "https://qwerty.work/mv_sp.mp4";
  source2.setAttribute("data-src", "https://qwerty.work/mv_sp.mp4");
  source2.type = "video/mp4";
  source2.classList.add("switch");

  // 動画にソースを追加
  video.appendChild(source1);
  video.appendChild(source2);

  // 動画をDOMに追加
  document.getElementById("mv").appendChild(video);

  // 動画の再生処理とエラーキャッチ
  video.play().catch(function(error) {
    console.error("Video play failed:", error);
  });
}

// ページが完全にロードされた時
window.addEventListener("load", handleVideoLoad);

// ページのHTMLが読み込まれた時
document.addEventListener("DOMContentLoaded", handleVideoLoad);

// ブラウザの履歴が変更された時（戻るボタン、進むボタンなど）
window.addEventListener("popstate", handleVideoLoad);
</script>
<script>
// PCとスマホで動画ファイルを切り替える
$(function() {
  // クラス "switch" を持つ <source> タグを対象にする
  var $sources = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 動画を切り替えるウィンドウサイズ。
  var replaceWidth = 970;
  
  function videoSwitch() {
    // ウィンドウサイズを取得する。
    var windowWidth = parseInt($(window).width());

    // ページ内にあるすべての`.switch`（<source>タグ）に適応される。
    $sources.each(function() {
      var $this = $(this); // <source>要素

      // ウィンドウサイズが970px以上であれば_spを_pcに置換
      if (windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('data-src').replace(sp, pc));
      // ウィンドウサイズが970px未満であれば_pcを_spに置換
      } else {
        $this.attr('src', $this.attr('data-src').replace(pc, sp));
      }
    });

    // <video>要素全体を再ロードして、srcの変更を反映
    $('video').get(0).load(); // <video>要素のload()メソッドを呼び出す
  }

  videoSwitch();
  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      videoSwitch();
    }, 200);
  });
});
</script>

その他参考

jQueryに依存しない以下のJavascriptも見つけましたが、設定や設置方法が悪いのか、うまくいきませんでした。

画面サイズで切り替える例

https://teratail.com/questions/148919 https://teratail.com/questions/148919

ユーザーエージェントで切り替える例

https://iwb.jp/video-tag-src-poster-img-javascript/ https://iwb.jp/video-tag-src-poster-img-javascript/

ホームページの背景として動画を埋め込む際に行うことや気を付けること

Tue, 23 Nov 2021 15:30:30 +0900

デザインの一部として背景に動画を使う上で、以下のことが気になったのでメモ。

動画の容量
再生時間
画面サイズ
ファイル形式
モバイル対応でするべきこと

調べて分かったこと

動画の解像度やファイルサイズ

動画のファイルサイズが大きいと読み込みに時間がかかり、モバイル通信では容量を大量に消費させてしまいます。反対に、ファイルサイズが小さければ読み込み時間が短くなり、すぐに再生が始まります。訪問者に対して快適に閲覧してもらえるWebページにするためには、動画ファイルはなるべく小さくします。

いろいろ情報を見る中では具体的に3MB以内。できれば500KB以内が理想的というものをみかけましたが、10秒以下の動画でないと難しいと思います。トップページの背景に動画（MP4）を使用しているいくつかのサイトを参考に、いくつか動画をダウンロードしてプロパティを調べたところ以下のような平均値になっていることが分かりました。

  解像度
  再生時間
  ビットレート
  ファイルサイズ




  フルHD

  （1920ｘ1080）
  約15秒
  約5Mbps
  約10MB


  フルHD

  （1920ｘ1080）
  約14秒
  約3Mbps
  約5.9MB


  フルHD

    （1920ｘ1080）
  約20秒
  約2Mbps
  約4.75MB


  フルHD

  （1920ｘ1080）
  約54秒
  約1.5Mbps
  約9.8MB


  HD

    （1280ｘ720）
  約13秒
  約5Mbps
  約8MB


  HD

    （1280ｘ720）
  約30秒
  約4.9Mbps
  約16MB

参考値

この先、世の中の通信環境が変わるとわかりませんが、上記の平均値を踏まえて考えると、ここ最近では以下の条件で動画を作成するのが良いみたいです。

解像度は『フルHD』か『HD』
ビットレートは1.5M~~3Mbpsまたは4M~~5Mbps
ファイルサイズは10MB前後

スマートフォン向けの配慮

動画が埋め込まれたWebページは、テキストや画像を中心としたページに比べてデータ量がかなり大きくなります。スマートフォンでの閲覧は、モバイル通信の容量を大量に消費してしまいます。場合によっては、Webサイトにアクセスしたとたんに動画が自動的に再生され、通信制限がかかってしまうということもあるかもしれませんので、ユーザーへの配慮は動画を活用する上で重要なポイントとなり、通信量を可能な限り抑えることが肝心です。

そのためには、画像のファイルサイズができる限り小さくなるように、映像の解像度や動画フォーマットを慎重に決めていきます。また、スマートフォンのモバイル通信環境で実際にWebページをテスト表示させ、動画があってもストレスなく閲覧できるかどうか確認しておくことも大切です。

このとき、Basic認証がかかっているとAndroidでは動画が再生されないことがあります。テスト表示は、PC上でモバイル表示させる方法ではなく、できる限り本番の運用に近いスマートフォン上で行うようにしましょう。

再生時間について

動画をサイトの背景として配置する場合、それ自体が主要なコンテンツでなく、再生時間が長い動画を埋め込んだとしても、サイト訪問者は最後まで視聴する可能性は低いでしょう。ユーザーが飽きることなく、見る側のストレスがないよう尺の短い動画を使用するのが良いと思います。

具体的には長くても30秒～45秒あたりがベストではないでしょうか。

もし、WEBサイトの内容をよりわかりやすく伝えるために、もっと長い動画が必要な場合は、背景に使用するのではなく、メインコンテンツとしてページ内に配置するほうが適しているかと思います。例えばYouTubeやvimeoなどにアップロードしてiframeで埋め込みます。

サウンドオフと自動再生などデフォルトの設定

コンテンツとしての動画とは違い、背景動画は再生ボタン操作なしで自動再生させ、繰り返しループ再生させることが多いかと思います。その際は``タグに属性としてautoplayとloopを有効に設定します。すると、動画データ読込後に再生が自動で開始され、エンドレスで繰り返し再生されます。

また、ページ表示でいきなり音が鳴ると周囲に迷惑がかかったり、音が鳴ると困る場所では驚いて画面を閉じていします顔で知れません。そういうシーンに配慮してmuted属性を設定し、音がデフォルトで出ないようにします。

更に、WEBでの動画には全画面モードが搭載されていることがよくありますが、背景動画には不要だと思います。その場合、playsinline属性を有効に設定します。これは「動画の映像をインラインで再生する」という意味なので、全画面モードが禁止され、常にページ内で再生されるようになります。ちなみに、playsinline属性を使用するとiPhoneでインライン再生ができるようになります。

ソース例

<video  src="動画ファイル.mp4" playsinline autoplay loop muted></video>

または

<video playsinline autoplay loop muted poster="動画を読み込む間に表示する画像.jpg">
	<source src="動画ファイル.mp4" type="video/mp4" />
	<source src="動画ファイル.webm" type="video/webm" />
	<source src="動画ファイル.jpg" />
</video>

ユーザーの閲覧するブラウザによっては、指定した動画ファイルが再生されない場合があるため、>タグを使用して複数のファイル形式のソースを指定します。

指定の範囲だけ再生する方法

その他、参考として再生する範囲を指定することもできます。例えば、全体で30秒ある動画の5秒～10秒に当たる部分を再生する場合は``とします。この仕組みは**「Media Fragments URI」**という規格で定められた特別なURLの書き方で、その一部が各種ブラウザで採用されているために利用可能なものです。ただし、IE（Internet Explorer）とEdgeは対応していないので、使う際は注意が必要です。

IEやEdgeではJavascriptで制御も可能

再生範囲を指定できないIEやEdgeにも対応したい場合、再生が不要な部分を事前にカットして、必要な部分のみの動画にしておくのが最もシンプルな方法ですが、何らかの理由で事前にカットせずIEやEdgeに場合は、JavaScriptを用いて対応させる方法もあります。

``タグのすべての属性は、JavaScriptを通して動的に制御できます。再生範囲をURLで指定する#t=はタグは使用せず、代わりに「video」オブジェクトの「currentTime」属性によって再生位置の確認と設定が可能です。「video」オブジェクトの再生状態を制御するplay()やpause()などのメソッドと組み合わせれば、特定の範囲を再生させるプログラムを作れるかと思います。

ソース例

``タグに任意のIDを設定し、Javascriptで指定します。範囲を指定する方法は見つけれませんでしたが、こんな書式で制御できるみたいです。

<video id="header-video">
	<source src="動画ファイル.mp4" type="video/mp4">
	<source src="動画ファイル.webm" type="video/webm">
	<source src="動画ファイル.jpg">
	<p>ご使用のブラウザでは動画再生に対応していません。</p>
</video>

<script>
window.addEventListener('DOMContentLoaded', function(){
	var v = document.getElementById('header-video');
	v.autoplay = true;
	v.loop = true;
	v.muted = true;
	v.playsinline = true;
	v.currentTime= 30; //30秒から再生が開始される?
	v.play();
});
</script>

参考サイト

ファイル形式

iOS・Androidの両方で動画を再生させるとすると、動画形式は共通で扱える必然的にMP4（コーデックはh.264）となります。特別な理由がない限り、MP4で問題ないでしょう。また、MP4自体が特殊なものでもないこと理由の一つとなります。

Androidで扱える形式

3GPP、mp4、WebM

iPhoneで扱える形式

m4v、mp4、3gp、mov、qt

ブラウザやデバイスによって対応できるものがことなったり、ブラウザが自動的に最適なファイル形式を選択できるよう、複数のファイル形式を準備しておき、タグで複数の動画を設置しておくことをおすすめします。

<video id="header-video">
	<source src="動画ファイル.webm" type="video/webm">
   <source src="動画ファイル.ogg" type="video/ogg">
	<source src="動画ファイル.mp4" type="video/mp4">
   <p>ご使用のブラウザでは動画再生に対応していません。</p>
</video>

このように複数の動画がある場合、上から順番に対応できるものをブラウザが自動的に選択して再生します。

動画の代替手段としてアニメーションを使う

AndroidやiOSのバージョンいよってはページ内再生はできない場合があるようです。理由はよくわかりません。その場合はアニメーションGIFや**アニメーションPNG（APNG)**などを用いるなど、デバイスごとに最適な動画を用意することで、すべてのデバイスに対応できるかもしれません。アニメーションGIFでは256色までしか使えないため、画像が粗くなりますが、アニメーションPNGは24bitカラー（1677万色）でキレイな表示と半透過も使用可能です。その分、容量が大きくなります。拡張子もPNGですが、IEや古いバージョンのEdgeには非対応ですが、apng-canvas.jsで疑似的な対応は可能のようです。

オンラインでアニメーションGIFが作れるサイト

https://www.groovoost.com/blog/web/video-to-gif https://www.groovoost.com/blog/web/video-to-gif

各ブラウザのAPNGの対応状況

https://caniuse.com/?search=apng https://caniuse.com/?search=apng

オンラインでアニメーションPNGが作れるサイト

MP4の動画をオンラインでアニメーションPNG（APNG）が作成できる。アニメーションGIFにも対応。

https://i.kuku.lu/ https://i.kuku.lu/

apng-canvas.jsとサンプル

https://github.com/davidmz/apng-canvas https://github.com/davidmz/apng-canvas

https://ics.media/entry/2441/ https://ics.media/entry/2441/

https://coco-factory.jp/ugokuweb/move02/9-2/ https://coco-factory.jp/ugokuweb/move02/9-2/

https://lab.sonicmoov.com/design/how-to-make-apng/ https://lab.sonicmoov.com/design/how-to-make-apng/

アニメーションWebPという手段も

WebPとはGoogleよって軽量化を目的に作成された画像フォーマットで、アニメーションPNGよりも軽くなり。PNG同様にフルカラーでアルファチャンネルを持ち透過も使えます。ただし、IEでは表示できません。

オンライン変換ページ

オンラインでMP4形式の動画をアニメーションWebPに変換できるようです。

https://video2webp.mattj.io/ https://video2webp.mattj.io/

使用例

<picture">
	<source srcSet="animation.webp" type="image/webp" />
	<img src="picture.png" alt="title" />
</picture>

使い方の参考

https://gigazine.net/news/20210919-video2webp/ https://gigazine.net/news/20210919-video2webp/

オンライン変換サイト

https://video2webp.mattj.io/ https://video2webp.mattj.io/

WebM形式の動画も用意

WebMとは、Google社が開発・公開しているオープンな動画ファイル形式。動画圧縮にVP8/VP9形式、音声圧縮にVorbis形式、ファイル形式（コンテナフォーマット）にMatroska形式（MKV/MKA）のサブセットをそれぞれ用いたものです。

ちなみに、MP4はMPEG-4形式の圧縮動画データを格納するファイル形式の一つ。MP4はApple社のメディア技術QuickTimeのファイル形式を元に策定されたISO/IEC 14496 Part 12の派生フォーマットで、従来のQuickTime形式の多くを踏襲した構造となっています・

WebMをMP4と比較すると、画質はややMP4の方が良いみたいですが、私には見分けが付けいません。ファイルサイズはWebMの方が軽くなります。ただし、WebMに対応するブラウザが限られます。

各ブラウザの対応状況

https://caniuse.com/?search=webm https://caniuse.com/?search=webm

WebM形式の動画を作成する方法

Premiere Proから書き出す（プラグインが必要）
オンラインで変換する

Premiere Proは標準ではWebM形式で書き出せないため、プラグインをインストールする必要があります。インストール後は書き出し時のファイル形式からWebMを選択できるようになります。使い方は以下のページが参考になります。Mac用の参考ですが、Windowsもやり方は同じです。

https://vook.vc/n/859 https://vook.vc/n/859

プラグインはWindows/Macの両方が用意されています。プラグインは以下よりダウンロードできます。インストールはダウンロードしたファイルを開き、メニューに沿って次々に進めば簡単にインストールできます。

https://www.fnordware.com/WebM/ https://www.fnordware.com/WebM/

以下のサイトではMP4→WEBM、逆のWEBM→MP4にオンラインで変換することができます。

https://convertio.co/ja/mp4-webm/ https://convertio.co/ja/mp4-webm/

https://www.aconvert.com/jp/video/webm-to-mp4/ https://www.aconvert.com/jp/video/webm-to-mp4/

その他注意すること

iPhoneについて

videoタグにplaysinline属性を使用するとiPhoneでインライン再生ができるようになる。
低電力モードになっている時、WEBサイトの背景動画は再生されていないことが多い。

その他参考サイト

https://jp.ext.hp.com/techdevice/technologysc/creator_014/ https://jp.ext.hp.com/techdevice/technologysc/creator_014/

まとめ

モバイルにも対応したレスポンシブデザインのホームページ制作で、背景に動画を埋め込み際は、以下のことに心がければよいかと思われます。

動画の解像度はフルHDかHD。
ファイルサイズは約10MBになるようにビットレートを5Mbps以下に落とす。
MP4以外にサイズの軽いWebMなども設置する。
もっと軽くしたいときは動画の代替としてアニメーションPNG（APNG）やアニメーションWebPを使う。
iPhone対応で``タグにはplaysinlineを設定する。

Video on qwerty.work

【JS】videoタグ動画の画面クリックでPlay/Pauseできるようにする

画面タッチで再生/停止をしたい

ソース例

HTML

CSS

Javascript

videoタグにcontrolsを設定したのに再生ボタンを押せないとき

MP4ビデオの再生ボタンがクリックできない

z-indexで解決

例

z-indexについての参考ページ

【JS】VIDEOタグで指定する動画をPCとスマホ用に切り替えるJavascript

スマホとパソコンで動画を切り替えたい

動画の再生開始に影響するファイルサイズ

パソコンとスマホ用に用意した2つの動画ファイル

jQueryで画面サイズによって切り替える参考

ソース例

STUDIOで使いたいとき

Googleタグマネージャーで使うときのソース例

どうしてもカスタムコードで使いたいとき

その他参考

画面サイズで切り替える例

ユーザーエージェントで切り替える例

ホームページの背景として動画を埋め込む際に行うことや気を付けること

調べて分かったこと

動画の解像度やファイルサイズ

参考値

スマートフォン向けの配慮

再生時間について

サウンドオフと自動再生などデフォルトの設定

ソース例

指定の範囲だけ再生する方法

IEやEdgeではJavascriptで制御も可能

ソース例

参考サイト

ファイル形式

Androidで扱える形式

iPhoneで扱える形式

動画の代替手段としてアニメーションを使う

オンラインでアニメーションGIFが作れるサイト

各ブラウザのAPNGの対応状況

オンラインでアニメーションPNGが作れるサイト

apng-canvas.jsとサンプル

アニメーションWebPという手段も

各ブラウザの対応状況

参考デモ

オンラインで変換する方法の参考

オンライン変換ページ

使用例

使い方の参考

オンライン変換サイト

WebM形式の動画も用意

各ブラウザの対応状況

WebM形式の動画を作成する方法

その他注意すること

iPhoneについて

その他参考サイト

まとめ