Storage, YouTube, HTML5 での共有比較 
             付)Webページへ動画などの共有/埋め込み  2018/4改  安倍

MP4の表示法
G-Drive 利用例 比較
MP4(53MB) MP4(39MB) MP4(39MB) PDF(0.1MB) P-Point(3MB) Word
HTML5 YouTube Gdrive  Gdrive Gdrive Gdrive
 
 Storages

 下記 1)~4) のStorage での共有URLは VISTA./ I.E. ではアクセス不可。 Chrome or FireFox が必要。
ただし、1)GoogleDriveはWebページに埋め込みした場合はOK.。 スマホ閲覧OK。  著作権保護による広告挿入なし。

1)GoogleDrive 動画共有は Storage の中でこのGoogle Drive が一番適している。しかし、
映像の横縦比が例えば640×480pixであっても設定をWide型の640×360にしないとスタートに挿入される静止画像が縦長に変形する。
本番映像は原映像の縦横比が保たれるので映像周辺の上下あるいは左右が空白になり周辺に白枠が残ったりする。
この調整範囲に限界があるため、HPタイトル動画のように極端に横長の動画には対応できない。  こちら参照
例: http://www.ab.cyberhome.ne.jp/~take-abe/hozon/pc/hp_menuGd.htm 

周辺の残存枠は
frameborder="0" allowfullscreen を追記すれば消せる。
例: http://www.ab.cyberhome.ne.jp/~take-abe/hozon/yamag3.htm  
引用: http://kakonacl.xsrv.jp/~kakonacl/douga/android_onlinest/googledrive02.html 

YouTubeやHTML5法と比べた問題は
・PCでもAutoPlay不可。
・スマホではスタートに ▶ ボタンを3度もタップする必要がある。
・HPタイトル動画のように、極端な横長動画では余白除去が困難

共有URL:  方法: サムネールを右クリック → 共有リンクを取得
 実施例 https://drive.google.com/file/d/14BLciHFdxV9t0qorHNAGHptI7RmkyW-d/view?usp=sharing 
   ・容量が15GBあり他のStorageより大。( OneDrive 5GB  DropBox 2GB )

Webページへ埋め込み 
 ネットではいろいろな「埋め込みコード」の情報が提供されているがどれもうまくいかない。
GoogleDrive はVersionUP で操作が少しづつ変化するようだ。
私がうまくいった方法は
・動画を再生 → 右上の縦3点ドットのアイコン → 「新しいウインドウで開く」 → 再び右上の縦3点ドットのアイコン →
 → 「アイテムを埋め込む」  で埋め込みコードが表示します。
注意:webページへUPする前にGoogleDriveで「共有可能なリンクを取得」 or 「共有→リンクを知っている者全員」に
設定しておく必要がある。

それをしない場合、埋め込みコードを設定しても送信相手と共有できない。
確認のために、いったん G-Drive/G-mail をログアウトしてアクセス確認する必要がある。

なお、この
Webページへ埋め込み法 は動画のみならず、PDF/PowerPoint/Word/Excel  にも使えて便利である。
実施例: このページ冒頭の表参照。         FRAME表示 (1) (2)

WMVへの応用:
 WMVはスマホには対応せず見えないが、この G-Drive の埋め込み法を使うとスマホでも見える。
  http://www.ab.cyberhome.ne.jp/~take-abe/hozon/wmvg.htm 

2)OneDrive  動画共有に 適していない。

共有URL:  方法: サムネールを右クリック → 共有   
 実施例 https://1drv.ms/v/s!AoK_1NS6dMq8hac4KLMBa7X05fR9_A 
 
・初期静止画面なし。 自動スタート。 「サインイン」の表示がでてから初期画面表示まで少々時間がかかる。
   したがって、閲覧者はサインインする必要があるのかと誤解する恐れがある。
スマホも同じ問題あり。
   大容量の動画に使用するのは無理。
・Windowsメールユーザは新規登録後1年間は1TB使える。
  
Webページへ埋め込み  
 共有設定後 ファイルのサムネイルを右クリック → 埋め込み (「埋め込み」表示前に、まず「共有」設定が必要)
   MS社情報: http://bit.ly/2jqWeO5 

 実施例 http://www.ab.cyberhome.ne.jp/~take-abe/hozon/inuo1.htm 
  スタートに時間がかかる。

・YouTubeの埋め込みと同じく、コードに &autoplay=1 を加えると自動スタートになる。ただし、コントロールバーは消えない。
PC内ではOKだが、UPlpad後、表示まで長時間かかったりエラーや初期画面の崩れがあり使えない。
 
スマホも同様。VISTA/I.Eで.は全く見えず。

3)DropBox  動画共有にはいいが、Webページ埋め込みには適していない。

共有URL: 
 実施例 https://www.dropbox.com/s/84cix12fkeizy3q/inu.mp4?dl=0 
    ・Win10,スマホともに問題なし。

 Webページへ埋め込み:  埋め込みコーはDropBoxからの提供なし。
ネット情報によれば、得られた共有URLをHTML5の<video>タグに埋め込めばいいらしい。
  https://b-risk.jp/blog/2016/12/dropbox-movie  

下記
赤文字は、Dropbox共有URLから入手
 a-1)クリックでスタート:   (サイズ指定を追加)
<video controls name="media" onclick="this.play();"width="800" height="600">
<source src="https://dl.dropboxusercontent.com/s/
84cix12fkeizy3q/inu.mp4"> </video>

 a-2)自動スタート:
<video autoplay width="800" height="600">
<source src="https://dl.dropboxusercontent.com/s/
84cix12fkeizy3q/inu.mp4" >
</video>

実施例 http://www.ab.cyberhome.ne.jp/~take-abe/hozon/inud2.htm 
スタートに少し間があく。 VISTA/I.E.も同じ。 スマホは静止画のみで×。

b)iframe 方式 スタートに長時間かかり使えない。
文献   http://bit.ly/2jslcjd 

4)Google Photos 
写真と動画専用Storageで全容量制限なし。GoogleDriveとは独立しているが、両者同一アカウントで共有できる。
ただし、下記
Webページ埋め込み法は意味がなく推薦しない。

共有URL
:  実施例 https://photos.app.goo.gl/eu5LlLXny0WrE6RB3 
 ・共有URL設定: サムネールを指定 → 共有リンクのボタンをクリック。
 ・共有リンクでアクセス後 何もしないと静止状態のまま。ポインタを乗せると動作するが無音。画面右上の ▼矢印をクリックすると
  正常に動作する。  スマホは問題なく動作する。
 ・VISTA/I.Eでは動作しないが、TOPの静止画面が表示する。
  いずれも、他のStorageとは違う。
 ・1ファイル制限容量は不明だが、大容量MP4動画はULに制約がある
 
Webページへ埋め込み
 ・Webページへの埋め込みコードは提供されてないが、下記ネット情報によればG-Driveを経由してWebページに埋め込みできる。
  http://www.weed.nagoya/entry/2016/06/08/191000 
 ・G-PhotosにUPしてサムネールを選択 → 共有ボタンをクリック → 「共有アルバムへ追加」をクリック。
 ・同一アカウントのG-Driveで 左窓「Googleフォト」 をクリック→ 右のサムネールを選択 → 右上「共有可能リンク」のボタンをクリック →
  → プレビューボタンで拡大 → 3点ボタン → 「新しいウィンドで開く」→ 3点ボタン → 「アイテムを埋め込む」で 埋め込みコード取得
 自動生成したG-Drive内動画は削除不可。 削除するとG-Photos内も消える。
 ・設定後、全てのG-DriveアカウントとG-Photos のアカウントからログアウトしてアクセス確認する必要がある。
 ・G-Driveに同一ファイルが生成するので、そちらを使えばよく、
G-Photosを使うのは面倒なだけで意味がない。

 YouTube

共有URL:  実施例 https://youtu.be/0ot5dRH1e0w 

Webページへ埋め込み  

 実施例 http://www.ab.cyberhome.ne.jp/~take-abe/hozon/inuy2.htm 

YouTubeは Google Drive と比較すると、埋め込みコードのままでは
・YouTube のロゴマークが表示する。 これを消去するにはコードに「 ?rel=0 」 を追加する必要がある。 こちら参照
・Autoplayのコード追加が可能。これはGoogleDriveにはない特長。
・著作権保護動画では広告が挿入されたりブロックされる。
・画像サイズが小さく、コードでのサイズ変更が必要。
VISTA/I.E、スマホ.で問題なく見える。

 HTML5-<video>タグ 法

 ーー WMV形式の場合は、直接Webペ-ジに埋め込むとスマホでは見えないから注意 ーー (ネット情報

http://1939abe.web.fc2.com/pc/hp/html5/5html.htm

YouTubeや Storage を使った方法では、MP4ファイルをYouTubeやStorageにアップして、その埋め込みコードをHPに埋め込んだ。
その場合、サーバー消費はわずか1KBですむが、 MP4ファイルを直接、Webペ-ジに埋め込むとMP4の巨大容量を消費 する。
この問題に対処するには、空き容量のあるサーバーにMP4を置いて、そこに直リンクするとよい。 
VISTA/I.E9 は対応せず。

 実際の使用比較例
 このページ冒頭の比較表参照。 HTML5法は別サーバーへの直リンクを用いた。


比較データまとめ表




**************************************************************************************************
著作権問題と回避法  →   こちら (
閲覧 個人限定)
*********************************************************************************************
※)埋め込みしたHTMLページの冒頭宣言に注意しないとVISTA/I.E では見えないことがある。 HomepageBuilder の場合、Ver14は不可
Ver21はOK.。このページの冒頭宣言: <!DOCTYPE html> <html lang="ja"> がよい。
共有相手が
Windows10 ではVer14 、21 どちらの様式でも問題ない。


|  Storage比較 I| YouTube利用 |  ホームページ作成体験 | パソコン便利情報  |


inserted by FC2 system