YouTube, Storage での動画共有比較 付)Webページへ直接MP4動画挿入  2018/1/11改  安倍

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、スマホ.で問題なく見える。

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

1)GoogleDrive 動画共有は Storage の中でこのGoogle Drive が一番適している。
共有URL:  方法: サムネールを右クリック → 共有リンクを取得
 実施例 https://drive.google.com/file/d/14BLciHFdxV9t0qorHNAGHptI7RmkyW-d/view?usp=sharing
   ・容量が15GBあり他のStorageより大。( OneDrive 5GB  DropBox 2GB )

Webページへ埋め込み 
 ネットではいろいろな「埋め込みコード」の情報が提供されている。
 https://www.lifehacker.jp/2013/09/130930google_embed.html  (2013/9/30)
 http://bit.ly/2EFq9xF  (2014/5/9)
 http://aka-net.sub.jp/dailyblog/post-738-738.html  (2015/9/9)

上記どれもうまくいかない。GoogleDrive はVersionUP で操作が少しづつ変化するようだ。
私がうまくいった方法は 上記3番目の方法の変形。
・動画を再生 → 右上の縦3点ドットのアイコン → 新しいウインドウで開く → 再び右上の縦3点ドットのアイコン →
 → 「アイテムを埋め込む」  で埋め込みコードが表示します。
注意:webページへUPする前にGoogleDriveで「共有可能なリンクを取得」をクリックしておく必要がある。
それをしない場合、埋め込みコードを設定しても送信相手と共有できない。
確認のために、いったんログアウトしてアクセス確認する必要がある。

 実施例 http://www.ab.cyberhome.ne.jp/~take-abe/hozon/tubotubog1.htm  (作:山本慎一)

  ・初期静止画面が少々変形する。Autoplayができない。 これらのことから表紙タイトル用には不適。
  ・スマホではスタート時に何回か矢印が表示するがタップすれば問題ない。VISTA/I.Eは問題ない。

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  
共有URL: 
 実施例 https://www.dropbox.com/s/84cix12fkeizy3q/inu.mp4?dl=0
    ・Win10,スマホともに問題なし。ただし、
Webページへ埋め込み:   
   ・埋め込みコーはDropBoxからの提供なし。下覧ネット情報の 1-1)で作成。
   ・スタートまで時間がかかることあり。
 ネットには動画をHPに埋め込むコードが掲載されている。
a)HTML5方式
引用文献: https://b-risk.jp/blog/2016/12/dropbox-movie  
上の実施例の下記コードは引用文献にサイズ指定を追加。

 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>
上記赤文字は、Dropbox共有URLから入手

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

b)iframe 方式 スタートに長時間かかり使えない。
引用文献   http://bit.ly/2jslcjd 
コード:
 https://www.dropbox.com/s/ ~  →  <iframe src="https://dl.dropboxusercontent.com/s/~ 
・末尾に以下のコードを追加する。 "></iframe>
すなわち、
  <iframe src="https://dl.dropboxusercontent.com/s/**************************"></iframe>
あるいはサイズ変更では末尾の  "></iframe> を以下にする。
  "frameborder="0"scrolling="no"width="800" height="600" ></iframe>

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

共有URL
:  実施例 https://photos.app.goo.gl/eu5LlLXny0WrE6RB3 n
 ・共有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を使うのは面倒なだけで意味がない。


比較データまとめ表



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

上記 YouTubeや Storage 1)~4)では、MP4ファイルをYouTubeやStorageにアップして、その埋め込みコードをHPに埋め込んだ。その場合、
サーバー消費はわずか1KBですむが、 MP4ファイルを直接、Webペ-ジに埋め込むとMP4の巨大容量を消費 する。
この項(下記例)では、その巨大容量を消費する方法である。そこで、FC2サーバー(1MB以下のファイルしか許容せず)を考慮してMP4の小ファイルを使用した。
実際には空き容量のあるサーバーにMP4を置いて、そこに直リンクするとよい。 下欄「実際の使用例 1)参照

HTML4 コード<embed> スマホでは動作しない。
http://www.ab.cyberhome.ne.jp/~take-abe/test/mp4.htm
埋め込みコード:
 <embed src="sample.mp4" type="video/mp4" width="750" height="422">
HPビルダーで作成する場合は、 挿入 → ファイル → ビデオファイル でMP4ファイルを指定した後
HTMLソースコード編集で表示サイズ  width="***" height="***" を追加する。 </embed>タグは不要。

HTML5 コード<video>
http://www.ab.cyberhome.ne.jp/~take-abe/test/mp4html5.htm
埋め込みコード:
 <video controls preload="none" onclick="this.play();" width="750" height="422">
 <source src="sample.mp4">  </video>
こちらの場合は自動スタート(autoplay)にはしない 。(autoplayにするとAndroidスマホで動作せず)。

どちらもサイズ指定できるが、HTML4<embed>のほうが小さくなる。
両者は無論広告なし。やはりVista/I.E. では見えません。
両者比較するとスマホを考慮するとHTML5<video>が良さそうだ。.
******************************************************************
実際の使用比較例

1)HTML5でYahooサーバーに直リンクする方式:Autoplay loop 可
http://www.ab.cyberhome.ne.jp/~take-abe/hozon/mp4tyokuya.htm

2)YouTube: (BGM著作権の警告あり) Autoplay可
http://www.ab.cyberhome.ne.jp/~take-abe/hozon/mp4yamayu.htm

3)G-Drive:PCでもAutoplay 不可。 スマホでのスタートが遅い。
http://www.ab.cyberhome.ne.jp/~take-abe/hozon/mp4yamag.htm

★スマホでは3者ともAutoplay不可。3者ともjQuery使わず。

1)の文献
https://blog.codecamp.jp/html5_video

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


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


inserted by FC2 system