動画 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

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

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

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を設定する。

【YouTube】1000人と4000時間達成したときに届く収益化開始のお知らせと設定の流れ

Thu, 06 May 2021 21:33:09 +0900

収益化の基準をクリアすると？

YouTubeの収益化（動画が再生中に表示される広告による広告収入）の権利をゲットするためには以下の基準をすべてクリアする必要があります。

チャンネル登録者数1000人
動画総再生時間4000時間

達成すると、YouTube Sutadio の**『収益受け取り』の画面に[申し込む]**のボタンが表示されます。これを押しても審査や他に必要な手続きが待っていますので、収益化目的で動画を公開されている方は、ボタンが現れたた速攻でポチりましょう！

YouTubeと共に成長していきましょう

YuTubeパートナープログラムに参加すると、動画から収益を得たり、クリエイターサポートを受けたりできます。

画面の指示に従って手続き

次に、以下の画面が現れます。ここで重要なのが、Google Adsense の申込です。アフィリエイトをされている方はご存知だと思いますが、ホームページやブログに広告を表示させ、クリックされたら広告収入が入るアレです。

YouTubeの広告収入はGoogle Adsense経由で支払われるため、この登録と連携がないと、収益を受け取れません。受取口座もこちらに設定します。

なお、収益が累計8,000円を超えないと口座には振り込まれません。具体的に言うと、月末締め時点でAdSenseとYouTubeの収益を合算した累計が8000円を越えていると、翌月22～23日あたりに口座に**『グーグル（ド』名義で振り込まれます。入出金明細に『グーグル（ド』**の記載があるとテンション上がります。

審査後、歓喜の承認メールが届く！

審査は数日かかりますが、承認されると以下のようなメールが届きます。私の場合、承認されるまで10日くらいかかりました。

お客様のYouTubeチャンネル（XXXXX）のYouTubeパートナープログラムへの参加が承認され、YouTubeで収益化できるようになりました。

早速、収益化の設定をする！

YouTube Sutadioを開き、 [動画を収益化] をクリックします。

収益化する動画の選択方法を指定する

収益化が承認されるまでの過去の動画も収益化対象となるので、『すべての動画を今すぐ収益化』を選択して [設定を適用] をクリックします。

収益化の列が表示されるようになった！

**『コンテンツ』の画面には、今まで無かった『収益化』**の列が表示されるようになり、設定が適用されると順次、収益化の設定がオンになります。ここで動画ごとに収益化の設定がどうなっているか一目でわかります。

動画毎に収益化のオン・オフを切り替えられる

個別に収益化のオンとオフを後で切り替えることもできます。

以上。これで、動画に広告が表示されるようになります。

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

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/

PC内のビデオや動画のISOファイルをゲーム機やレコーダーから再生したいときのDLNAサーバーフリーソフト

Sun, 25 Aug 2019 12:44:02 +0900

パソコン内のISOファイルの動画をテレビで見たい

パソコンの中に溜め込んでいるBD/DVDのISOファイルがあるのですが、これを再生するときにパソコンではなくテレビで観たいので、それを可能にするフリーソフトがないかな？と思って探してみました。これを可能にしてくれそうな候補がいくつかあったので試してはいませんが今後チャレンジするときのためにざっくりとメモ。

再生はゲーム機やレコーダーでしたい

再生はメディアプレーヤーとしてBD/DVDプレーヤーやプレイステーション（PS3/PS4）からリモコンで操作したいのですが、そもそも持っている機器がDLNAクライアントとして機能するDLNA対応の機器かどうか確認が必要です。

Serviio

割と最近出た新しめ？のDLNAサーバーソフト。

https://serviio.org/ https://serviio.org/

インストール手順の参考

https://qiita.com/kojiita/items/a17ad87579bf1d177a7c https://qiita.com/kojiita/items/a17ad87579bf1d177a7c

KODI

PC以外にAmazonのFire TV Stickにインストールして使用している例もある定番？のDLNAサーバーソフト。

https://kodi.tv/ https://kodi.tv/

インストール手順の参考

https://www.monionoheya.com/2019/02/kodi-180-leia-bd-j-blu-ray.html https://www.monionoheya.com/2019/02/kodi-180-leia-bd-j-blu-ray.html

https://www.monionoheya.com/2017/07/kodibd-isowindows.html https://www.monionoheya.com/2017/07/kodibd-isowindows.html

https://cheapnaxx.com/fire-tv-stick-kodi/ https://cheapnaxx.com/fire-tv-stick-kodi/

Universal Media Server（UMS）

https://www.universalmediaserver.com/ https://www.universalmediaserver.com/

インストール手順の参考

https://www.gigafree.net/internet/share/UniversalMediaServer.html https://www.gigafree.net/internet/share/UniversalMediaServer.html

PS3 Media Server（PMS）

https://code.google.com/archive/p/ps3mediaserver/ https://code.google.com/archive/p/ps3mediaserver/

インストール手順の参考

https://enjoypclife.net/2013/10/15/ps3-media-server-pms-how-to-install/ https://enjoypclife.net/2013/10/15/ps3-media-server-pms-how-to-install/

【涙腺崩壊】感動して涙が止まらないタイの泣ける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

「どんなときも」を杏がカバーした森永ミルクキャラメルTVCMソング

Wed, 11 May 2011 10:45:05 +0900

「どんなときも」を歌う女性ボーカルは誰？

CMで槇原敬之の「どんなときも」を女性ボーカルが唄っているのを聴いて誰が歌っているのか気になった。「どんなときも」は僕の好きな曲の一つ。しかもCMに出ている女の子がキャラメルを頬張る姿がとてもかわいいので、更に曲が良く聴こえ、とても印象に残りました。

CMの画面下に「杏」と表示されていたので検索してみた

あまり知らなかったけどモデル・女優している人らしい…確かに見たことある。

とにかく曲が凄くイイと思ったのでiTunesで買えないかな～と思ったけどソニーの曲で**「Mora」**じゃないと買えないみたい。音楽の管理はiTunesをメインに使っているので、できればiTunesで購入したかったのですが、仕方なくMoraで買うことにしました。

買うことにしたものの「杏」違いで他の「杏（ann）」の曲を買ってしまった…。

今回欲しかったのは「杏（anne）」。

まぎらわしい…。

最近の曲でだいたい欲しいと思うのは**「SME（ソニー・ミュージック・エンターテイメント）」**なのよね…。

CDを借りに行くか…。

動画 on qwerty.work

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

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

PC用 1920x800

MP4（H.264）

WebM

モバイル用 960x400

MP4（H.264）

WebM

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

調べて分かったこと

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

参考値

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

再生時間について

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

ソース例

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

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

ソース例

参考サイト

ファイル形式

Androidで扱える形式

iPhoneで扱える形式

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

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

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

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

apng-canvas.jsとサンプル

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

各ブラウザの対応状況

参考デモ

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

オンライン変換ページ

使用例

使い方の参考

オンライン変換サイト

WebM形式の動画も用意

各ブラウザの対応状況

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

その他注意すること

iPhoneについて

その他参考サイト

まとめ

【YouTube】1000人と4000時間達成したときに届く収益化開始のお知らせと設定の流れ

収益化の基準をクリアすると？

画面の指示に従って手続き

審査後、歓喜の承認メールが届く！

早速、収益化の設定をする！

収益化する動画の選択方法を指定する

収益化の列が表示されるようになった！

動画毎に収益化のオン・オフを切り替えられる

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

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

私が理想とする物の条件

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

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

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

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

参考サイト

PC内のビデオや動画のISOファイルをゲーム機やレコーダーから再生したいときのDLNAサーバーフリーソフト

パソコン内のISOファイルの動画をテレビで見たい

再生はゲーム機やレコーダーでしたい

Serviio

インストール手順の参考

KODI

インストール手順の参考

Universal Media Server（UMS）

インストール手順の参考

PS3 Media Server（PMS）

インストール手順の参考

【涙腺崩壊】感動して涙が止まらないタイの泣ける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】泣けます私を離さないで

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

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

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