YouTube, Storage での動画共有比較 付)HPへ直接MP4動画挿入 2017/2/16  動画提供:山本慎一

YouTube
 共有URL   https://youtu.be/UJcw6CgVKw8
   引用に注意しないと著作権侵害の警告が表示されたり、著作権者の意向で広告が挿入される。
   登録された映像チェックはかなり厳しいが、BGMの場合、日本の曲ではネットからの引用は警告はないようだ。
   
   VISTA/I.E で対応可。これはStorageにない特長。 容量制限ほとんどなし。
 
 HP埋め込み
 YouTube提供コード http://www.ab.cyberhome.ne.jp/~take-abe/2017/tuboTeresa0.htm
 上記から制御ボタンや最後のサムネールを除去
              http://www.ab.cyberhome.ne.jp/~take-abe/2017/tuboTeresa.htm
 サイズ変更可能。 YouTube提供コードの場合は広告挿入はないようだ。
ただし、Beetlesのような世界的に有名な曲の場合は共有URL/HP埋め込み、ともにBGMでも警告とともにブロックされる。

Storage
 下記3者とも VISTA.ではブラウザの、I.E.はアクセス不可。 Chrome or FireFox が必要。
 広告挿入なし。 Beetlesのような世界的に有名な曲でも著作権侵害の警告はない。
 HPへの埋め込みコードは下欄参照 ※1)

 1)GoogleDrive
  共有URL   https://drive.google.com/file/d/0BwIW5mmdx2HWc3pfNlhmLXJqSk0/view?usp=sharing
   ・初期静止画面が少々ボケる。変更不可。
   ・容量が15GBあり他のStorageより大。( OneDrive 5GB  DropBox 2GB )
   ・複数アカウントの使い分けが少々面倒。

  HP埋め込み  http://www.ab.cyberhome.ne.jp/~take-abe/2017/gdrive800.htm
   サイズ変更可能。 初期静止画面が少々ボケる。変更不可。
 
 2)OneDrive
  共有URL  https://1drv.ms/v/s!AoK_1NS6dMq8hZoRKLKqsNToEx9S6Q 
   ・初期静止画面なし。 自動スタート。 初期画面表示まで少々時間がかかる。
   ・Windowsメールユーザは1年間1TB使える。
  
  HP埋め込み  http://www.ab.cyberhome.ne.jp/~take-abe/2017/yamaOnedrive640.htm 
   ・初期静止画面のレイアウトが崩れる。
    
 3)DropBox
  共有URL: https://www.dropbox.com/sc/qu98jucabv8dnk3/AAAl9GSsCCaVCw80blMO7k_Ya 
   ・同期やUpLoadが遅く受信環境によっては数分かかる。

  HP埋め込み:  http://www.ab.cyberhome.ne.jp/~take-abe/2017/dropbox3.htm  
   ・埋め込みコーはDropBoxからの提供なし。下覧ネット情報の 1-1)で作成。※2)
   ・スタートまで時間がかかることあり。


Android スマホで閲覧の場合
 アカウント、ブラウザ(Chrome) の選択によっては動作せず。
 YouTube
  共有URL : 著作権の問題がある場合は「この動画は利用できません」の表示がでて再生せず。
         PCの場合は広告が挿入されるが閲覧できる。
 
  HP埋め込み: 広告挿入もなく見える。
ただし、Beetlesのような世界的に有名な曲の場合は共有URL/HP埋め込み、ともにBGMでも警告とともにブロックされる。

 GoogleDrive / OneDrive / DropBox
  共有URL/ HP埋め込み いずれも見える。BeetlesもOK。


※1) HPへの埋め込みコード
・YouTubeYouTube利用参照

・GoogleDrive

ネット情報
  http://aka-net.sub.jp/dailyblog/post-738-738.html
 ファイルのサムネイルを右クリック → プレビュー → 画面右上の映像メニューで「新しいWindowで開く」 
 → 映像メニューで「アイテム埋め込み」

例:共有URLによる表示が下記の場合
https://drive.google.com/file/d/0B6c4NCMkDPoxZ1NhZ25hTzM3TTQ/view
埋め込みコードは上記の前に
 <iframe src="
後ろに
  " width="640" height="480"></iframe>
が加わり、下記にしてHPへ埋め込めばOK。
<iframe src="https://drive.google.com/file/d/0B6c4NCMkDPoxZ1NhZ25hTzM3TTQ/preview" width="640" height="480"></iframe>

・OneDrive
 MS社情報: http://bit.ly/2jqWeO5
 ファイルのサムネイルを右クリック → 埋め込み
ただし、PC内ではOKだが、UPlpad後、初期画面のレイアウトが崩れてよくない。
<iframe src="https://onedrive.live.com/embed?cid=BCCA74BAD4D4BF82&resid=BCCA74BAD4D4BF82%2185265&authkey=AN_PO3d3XZepPIA"
width="640" height="360" frameborder="0" scrolling="no"></iframe>

・DropBox:
 ネットには動画をHPに埋め込むコードが掲載されている。
1)HTML5方式
引用文献: https://b-risk.jp/blog/2016/12/dropbox-movie  
上の実施例の下記コードは引用文献にサイズ指定を追加。
※2)
1-1)クリックでスタート:
<video controls name="media" onclick="this.play();"width="800" height="600">
<source src="https://dl.dropboxusercontent.com/s/1ryl9hgm1wnp7mz/ishii1.mp4"> </video>

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

2)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>



MP4を直接HPに埋め込む法
上記では、MP4ファイルをYouTubeやStorageにアップして、その埋め込みコードをHPに埋め込んだ。その場合、
サーバー消費はわずか1KBですむが、 jpg画像のようにMP4ファイルを直接、サーバーにアップするとMP4の巨大容量を消費 する。
そこで、下記サンプルはMP4の小ファイルを使用して直接サーバーにアップした。

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)にするとAndroidスマホで動作せず。

どちらも同一サイズ指定にも関わらず、HTML4<embed>ではなぜ小さくなるのか不明。
両者は無論広告なし。やはりVista/I.E. では見えません。 Androidでも見えず。
両者比較するとHTML5<video>でクリックスタートを選ぶのが良さそうだ。.

**************************************************************************************************
著作権問題と回避法  →   こちら


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


inserted by FC2 system