動画 on qwerty.work

約30秒のメインビジュアル動画に最適なビットレートと容量の目安

Mon, 05 Sep 2022 17:01:42 +0900

約30秒のメインビジュアル動画に最適なビットレートと容量の目安

最近のWEB制作の中でメインビジュアルに動画を使用することが増えてきました。表示スピードやパケット節約のため、ファイル容量を下げすぎるとモアレがひどくなります。そこで、ファイル容量は少し増えたとしても、モアレをギリギリに抑えることを軸に、自分が許容できる数値をまとめました。皆さんにとって最適かどうかはわかりません。Adpbe Premiere Proの書き出し時に使用している数値となります。

PC用 1920x800

約30秒の音声なし動画。縦は1080pxではなく800pxの独自サイズにしている。

MP4（H.264）

  項目
  設定




  ビットレート
  2Mbps


  メソッド
  VBR 2pass


  フレームレート
  29.97


  ファイル容量
  約8MB

最高レンダリング品質：オン

WebM

  項目
  設定




  ビットレート
  1000


  メソッド
  VBR 2pass


  フレームレート
  29.97


  ファイル容量
  約4MB

最高レンダリング品質：オン

モバイル用 960x400

約30秒の音声なし動画。縦は540pxではなく400pxの独自サイズにしている。

MP4（H.264）

  項目
  設定




  ビットレート
  0.291Mbps


  メソッド
  VBR 2pass


  フレームレート
  29.97


  ファイル容量
  約1.5MB

最高レンダリング品質：オン

WebM

  項目
  設定




  ビットレート
  240


  メソッド
  VBR 2pass


  フレームレート
  29.97


  ファイル容量
  約1MB

最高レンダリング品質：オン

【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;
    }      
});

【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 16:12:40 +0900

背景に動画を使用した参考サイト

https://sankoudesign.com/category/movie/ https://sankoudesign.com/category/movie/

WordPressテンプレート『TCD』のデモサイト

https://demo.tcd-theme.com/tcd089/ https://demo.tcd-theme.com/tcd089/

https://demo.tcd-theme.com/tcd086/ https://demo.tcd-theme.com/tcd086/

https://demo.tcd-theme.com/tcd063/ https://demo.tcd-theme.com/tcd063/

https://demo.tcd-theme.com/tcd069/ https://demo.tcd-theme.com/tcd069/

https://demo.tcd-theme.com/tcd071/ https://demo.tcd-theme.com/tcd071/

https://demo.tcd-theme.com/tcd074/ https://demo.tcd-theme.com/tcd074/

https://demo.tcd-theme.com/tcd078/ https://demo.tcd-theme.com/tcd078/

https://demo.tcd-theme.com/tcd083/ https://demo.tcd-theme.com/tcd083/

SoundCloudの音楽をiPhoneにダウンロードする方法

Tue, 27 Oct 2020 23:14:15 +0900

動画用に著作権フリーの曲が欲しい

iPhoneに入れたGoPro AppやQuikで音楽付きの動画を編集することがあるのですが、完成した動画をYouTubeにアップロードすると、アプリ内で提案されて使用した曲が著作権を侵害していると怒られることがあります。そこで、最初からそのようなことにならないように、著作権フリーの曲をダウンロードする方法がないか探すことにしました。

ただ、著作権フリーだったら何でもいいのか？というと、そういう訳ではなく、クォリティの高い曲が欲しいのです。そこでSoundCloudから著作権フリーの曲を検索してダウンロードする方法が見つかったのでとりあえず簡単にメモ。

ダウンロード手順

SoundCloudで曲を選ぶ
著作権フリーの曲か検索

https://soundcloud.com/search/sounds?filter.license=to_modify_commercially https://soundcloud.com/search/sounds?filter.license=to_modify_commercially

更にCC（Creative Common License）とかFree Downloadなどの記載のあるか確認

著作権フリーの曲として検索でヒットした曲でも実際はそうでない曲が結構あるためです。

『Share』ボタンからURLをコピー
ダウンロードリンク発行

http://offliberty.io/ http://offliberty.io/

ダウンロードリンク長押しでダウンロード

曲をダウンロードできるサイト

以下のサイトでもSoundCloudの曲をオフラインでも使用できるよう、MP3ファイルとしてダウンロードできます。

http://offliberty.io/ http://offliberty.io/

https://sclouddownloader.net/ https://sclouddownloader.net/

https://soundcloudmp3.org/ja https://soundcloudmp3.org/ja

https://www.clipconverter.cc/2/ https://www.clipconverter.cc/2/

参考ページ

https://studentwalker.com/soundcloud-download/ https://studentwalker.com/soundcloud-download/

https://otona-life.com/2020/10/01/42468/2/ https://otona-life.com/2020/10/01/42468/2/

画面を確認しながらハンズフリー撮影できるスマホネックホルダーを作る

Sun, 24 May 2020 13:59:11 +0900

ハンズフリーで自分目線の動画を撮りたい

工作、料理、修理など、手元の動作が映るように自分視点の動画を撮影してYouTubeにアップロードしたいのですが、一人で撮影すると録画するスマホを持つ片手は塞がったり、三脚やスタンドに固定すると作業範囲も固定され、映る範囲内でしか動けなかったりと自由度がなくなり、思い通りの動画を撮影できません。そんなときに役立ちそうなものをネットで見つけました。スマホやGoProなどのアクションカメラをネックレスのように首からぶら下げるネックホルダー（ネックマウント）というもの。しかし、いろいろ検索しても**「これだ！」**っていう理想の物が見つかりませんでした。

私が理想とする物の条件

ハンズフリーで撮影できること
撮影中の画面を確認しながら自分視点で撮影できること
金額が安いこと

理想から離れたスマホホルダーはたくさんある

アマゾンや楽天などのネットショップから、それ以外のサイトなど、ネットでたくさん検索しましたが、なかなかいいスマホホルダー（ネックマウント）が見当りませんでした。

両手が自由になるものはたくさんある
画面が見えるのはほとんどが自撮り用
画面を自分の方に向けて取り付けできるけど体に近すぎて撮影画面が見えない
画面も外側に向けてインカメラで撮影するものばかり

他のパーツとの組合せで理想のネックホルダーができた！

安くて理想のネックホルダー（ネックマウント）を違い商品同士で作れないかな？と思ってために以下の二つを買って組み合わせたらできました！**スマホ＆GoPro対応のネックホルダー（ネックマウント）**と、GoPro用の延長アームです。他のアクションカメラは取り付けできるかどうかわかりませんが、この組み合わせはスマートフォンとGoProのどちらにも使えます。

↓単体のノーマルのままだとこんな感じで、画面が見えないのでちゃんと取れているのか不安になります。

↓そこにGoPro用の延長アームを取り付けるといい感じです。

↓画面を確認しながら撮影できるようになりました。ルービックキューブ触っていますが得意なわけではありません。雰囲気を出すためのサンプルです。

↓いろんな角度に調整できていい感じです。

これで快適に動画を撮影できそうです。

YouTube埋め込みコードに自動再生や字幕の設定をするパラメータ例

Wed, 20 May 2020 22:56:42 +0900

動画の初期設定をあらかじめ指定したい

サイトに埋め込んだ外国のYouTube動画の再生時に、いちいち翻訳字幕の設定するのは煩わしいので、**『はじめから翻訳をONにしてサイトに埋め込むことはできないのかな？』**と思って検索したら方法があったのでメモ。

参考サイト

https://support.google.com/youtube/answer/171780?hl=ja https://support.google.com/youtube/answer/171780?hl=ja

https://wisdommingle.com/youtube-embedded-player-parameter-customize/ https://wisdommingle.com/youtube-embedded-player-parameter-customize/

Googleフォトにある写真や動画をパソコンに一括でまとめてダウンロードする方法

Tue, 20 Sep 2016 23:05:52 +0900

Googleフォトにアップロードした写真や動画を、逆にパソコンのハードディスクに一括でまとめてダウンロードする方法です。

Googleフォトにバックアップしていてよかった

撮り溜めた写真や動画の入ったハードディスクがいつ壊れるかと不安だったので、スマホやPCから写真や動画のバックアップとしてGoogleフォトにアップロードしてたのですが、本当にハードディスクが壊れました。

危なかったです。Googleフォトにバックアップしていなかったら今まで撮り溜めた写真が全部なくなるところでした。スマホやPCにGoogleフォトのアプリを入れて置くと自動で写真をアップロードしてくれてるのでバックアップ漏れもなく助かりました。

でも表示スピードがいまいち

つくづくGoogleフォトにアップロードしてて良かったなと、ありがたみを感じているのですが、Googleフォトで写真を見るときはインターネット上にある写真を表示するので**『ネット回線の通信状態によっては表示が遅い』**。

そんなの当たり前で、外出時のモバイル回線ならしょうがないのですが、

やっぱりハードディスクにも保存しておいて家ではサクサク表示したい。
ハードディスクに保存するためにいちいちGoogleフォトからカチカチクリックして1枚づつダウンロードとかめんどくさいな…。
アップロードは簡単だけど、逆にダウンロードする方法はないかな…。
Googleフォトから簡単にハードディスクへダウンロードできるフリーソフトとかないかな…。

と思っていたら、方法がありました。

Googleフォトから写真をエキスポートするサイト

一度Googleフォトにアップロードしたら簡単にダウンロードできないのではないかと思っていたら、普通にGoogleのサイトに「自分のデータをダウンロード」というのがありました。コレ↓

https://takeout.google.com/settings/takeout https://takeout.google.com/settings/takeout

上記のページGoogleアカウントでログインすると以下の画面が表示されます。Googleフォトはもちろんですが、Googleドライブ、Chrome、YouTube、Blogger、Google+など他のサービスもエキスポートできるようです。

**『こんなところに隠さなくてもいいのに…。』**と思いつつ、実際にGoogleフォトから一部のアルバムをダウンロードしてみたところバッチリできました。

使い方（Googleフォトにある写真をダウンロードする場合）

「自分のデータをダウンロード」にGoogleアカウントでログイン
**[選択解除]**を押す

**[Google Photos]**のみを選択した状態にする

選択ボタン左の[↓]を押してダウンロード方法を選択

特に選択ぜずに全部ダウンロードする場合は**[すべてのフォトアルバムを含める]を選択して、画面一番下の[次へ]**に進んでください。

日付毎にアルバムにまとめられているので必要なアルバムを選択して**[完了]**を押してアルバム選択画面を閉じる

画面一番下の**[次へ]**を押して次に進む

配信方法を選択し**[アーカイブを作成]**を押す

[ダウンロードリンクをメールで送信]を選択しますが、実際はメールは届きませんでした。しかし、そのまま進むとダウンロードのページが現れますのでメールが届かなくても大丈夫です。

Googleドライブ、Dropbox、OneDriveなどのクラウドへの保存は試していませんが、大量の写真をダウンロードするときは、一旦、クラウドに保存してからまとめてハードディスクにダウンロードした方が余計な時間がかからないかもしれません。

サーバー側でダウンロードデータの圧縮が始まるので、終わるまで待ちます

**[エクスポートを表示]**を押します

**[ダウンロード]**を押して圧縮ファイルをダウンロードします

すべての写真はデータ容量が大きいので自分の場合72個の圧縮ファイルに分割されていました。

ダウンロードしたZIPファイルを解凍します

解凍したフォルダにバッチリ写真が入っていました

JPEGの写真ごとに.jsonファイルがありますが不要なので後から種類順に並び替えてバッサリ削除しました。.jsonファイルは他のクラウドサービスに流し込むときに使うもののようです。

まとめ

全データ一括と選択した日付やアルバム単位でダウンロードができて再整理が簡単そうです。ただ、写真と同じ数だけの.jsonファイルがくっついてくるので、不要な場合はあとで削除作業が伴うのと、写真が多いとたくさんのZIPファイルの分割されてダウンロードする数が多いのが面倒ですが、写真を喪失していまうことを考えれば問題ないです。

ダウンロードした写真や動画はアップロードされている品質そのままの状態だそうです。これで安心です。

Googleに保存されたデータをダウンロードする方法は以下にも説明がありますので参考にしてください。

https://support.google.com/accounts/answer/3024190?hl=ja&ref_topic=28726 https://support.google.com/accounts/answer/3024190?hl=ja&ref_topic=28726

【涙腺崩壊】感動して涙が止まらないタイの泣けるCMまとめ

Wed, 03 Jun 2015 00:14:41 +0900

厳選！100%泣けるタイのCM動画

涙したい夜にどうぞ。たった数秒で感動して泣けるタイのCM。見た中で特によかった動画をまとめました。ハンカチかティッシュを用意してご覧ください。

タイの泣ける感動のCM（日本語字幕）【TRUE MOVE】

“แม่รู้อะไรบ้าง? Mother Knows Best” [Official HD] ไทยประกันชีวิต ThaiLife Insurance (3 mins)

“Unsung Hero” (Official HD) : TVC Thai Life Insurance 2014 : โฆษณาไทยประกันชีวิต 2557

“ความจริงที่ไม่เห็นด้วยตา” Official HD : โดย กล้องวงจรปิด Vizer (vizer cctv)

My brother: ความหมายที่ยิ่งใหญ่ของคำว่า “พี่ชาย”

กำลังใจซึ้งๆ สำหรับคนที่ท้อ

タイの泣ける感動のCM（日本語字幕）【タイ生命保険_ไทยประกันชีวิต_ดูแล คนที่ดูแลคุณ】

ทุกคำมีความหมาย | Every Mouthful is Meaningful

ผมอยากหนัก 45 กิโล I Want to Weight 45 Kg. (A.P. Honda)

【海外の感動CM】泣けます私を離さないで

【海外感動CM】お母さん・・・・(涙)

思い出は売るものではない????????❤この感動的な短い動画はあなたをインスパイアする

タイのＣＭ（日本語字幕）โฆษณาไทย(บรรยายญี่ปุ่น)：タイ赤十字社「待ち続ける」

【感動CM】海外タイのCM「双子の赤ちゃん」

タイＣＭ　泣ける　生きるとは人生とは　【日本語字幕】

-僕は忘れない-　夫婦愛が胸を打つタイ生命保険のＣＭ(日本語訳付き)

คอนเสิร์ตข้างถนน Street Concert (Official HD) : ไทยประกันชีวิต Thai Life Insurance

タイのCM(日本語字幕)โฆษณาไทย(บรรยายญี่ปุ่น):タイ生命保険「パーフェクトな人生」

タイのCM日本語字幕โฆษณาไทยบรรยายภาษาญี่ปุ่นタイ生命保険「時間」

タイのCM(日本語字幕)โฆษณาไทย(บรรยายญี่ปุ่น):パンテーン「バイオリン」

【LINE CM】“Closer”（More LINE, Much Closer：タイ限定バージョン）

THE DOG : ธนาคารเกียรตินาคิน (Official HD)

タイのCMじゃないけど

世界が感動　人の親切が染み渡る動画

タイ生命のYouTubeチャンネル

タイ生命の新しいCMや上記のCMはここで観ることができます。

https://www.youtube.com/user/thailifechannel/featured https://www.youtube.com/user/thailifechannel/featured

動画 on qwerty.work

約30秒のメインビジュアル動画に最適なビットレートと容量の目安

約30秒のメインビジュアル動画に最適なビットレートと容量の目安

PC用 1920x800

MP4（H.264）

WebM

モバイル用 960x400

MP4（H.264）

WebM

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

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

ソース例

HTML

CSS

Javascript

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

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

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

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

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

ソース例

STUDIOで使いたいとき

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

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

その他参考

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

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

動画や映像が背景に使われているサイトの参考ページ

背景に動画を使用した参考サイト

WordPressテンプレート『TCD』のデモサイト

SoundCloudの音楽をiPhoneにダウンロードする方法

動画用に著作権フリーの曲が欲しい

ダウンロード手順

曲をダウンロードできるサイト

参考ページ

画面を確認しながらハンズフリー撮影できるスマホネックホルダーを作る

ハンズフリーで自分目線の動画を撮りたい

私が理想とする物の条件

理想から離れたスマホホルダーはたくさんある

他のパーツとの組合せで理想のネックホルダーができた！

YouTube埋め込みコードに自動再生や字幕の設定をするパラメータ例

動画の初期設定をあらかじめ指定したい

参考サイト

Googleフォトにある写真や動画をパソコンに一括でまとめてダウンロードする方法

Googleフォトにバックアップしていてよかった

でも表示スピードがいまいち

Googleフォトから写真をエキスポートするサイト

使い方（Googleフォトにある写真をダウンロードする場合）

まとめ

【涙腺崩壊】感動して涙が止まらないタイの泣けるCMまとめ

厳選！100%泣けるタイのCM動画

タイの泣ける感動のCM（日本語字幕）【TRUE MOVE】

タイの泣ける感動のCM（日本語字幕）【TRUE MOVE】

“แม่รู้อะไรบ้าง? Mother Knows Best” [Official HD] ไทยประกันชีวิต ThaiLife Insurance (3 mins)

“Unsung Hero” (Official HD) : TVC Thai Life Insurance 2014 : โฆษณาไทยประกันชีวิต 2557

“ความจริงที่ไม่เห็นด้วยตา” Official HD : โดย กล้องวงจรปิด Vizer (vizer cctv)

My brother: ความหมายที่ยิ่งใหญ่ของคำว่า “พี่ชาย”

กำลังใจซึ้งๆ สำหรับคนที่ท้อ

タイの泣ける感動のCM（日本語字幕）【タイ生命保険_ไทยประกันชีวิต_ดูแล คนที่ดูแลคุณ】

ทุกคำมีความหมาย | Every Mouthful is Meaningful

ผมอยากหนัก 45 กิโล I Want to Weight 45 Kg. (A.P. Honda)

【海外の感動CM】泣けます 私を離さないで

【海外感動CM】お母さん・・・・(涙)

思い出は売るものではない????????❤この感動的な短い動画はあなたをインスパイアする

タイのＣＭ（日本語字幕）โฆษณาไทย(บรรยายญี่ปุ่น)：タイ赤十字社「待ち続ける」

【感動CM】海外タイのCM「双子の赤ちゃん」

タイＣＭ 泣ける 生きるとは人生とは 【日本語字幕】

-僕は忘れない- 夫婦愛が胸を打つタイ生命保険のＣＭ(日本語訳付き)

คอนเสิร์ตข้างถนน Street Concert (Official HD) : ไทยประกันชีวิต Thai Life Insurance

タイのCM(日本語字幕)โฆษณาไทย(บรรยายญี่ปุ่น):タイ生命保険「パーフェクトな人生」

タイのCM日本語字幕โฆษณาไทยบรรยายภาษาญี่ปุ่นタイ生命保険「時間」

タイのCM(日本語字幕)โฆษณาไทย(บรรยายญี่ปุ่น):パンテーン「バイオリン」

【LINE CM】“Closer”（More LINE, Much Closer：タイ限定バージョン）

THE DOG : ธนาคารเกียรตินาคิน (Official HD)

タイのCMじゃないけど

世界が感動 人の親切が染み渡る動画

タイ生命のYouTubeチャンネル

関連するまとめチャンネル

【海外の感動CM】泣けます私を離さないで

タイＣＭ　泣ける　生きるとは人生とは　【日本語字幕】

-僕は忘れない-　夫婦愛が胸を打つタイ生命保険のＣＭ(日本語訳付き)

世界が感動　人の親切が染み渡る動画