YouTube 利用による HPへ動画の挿入、 編集  安倍

★ネット入手動画のHPへの挿入応用例
YouTubeなどの投稿動画はMP4形式が多い。グリーティングカードなどに過去に多かったFlash動画は、送信相手がiPhone/iPadが多くなると使えないので最近は激減した。
YouTubeの動画を入手してHPに引用掲載するには 以上の方法が確実です。

1) YouTube へ投稿

投稿方法: 
https://www.youtube.com/ へ
ログイン(アカウント/pwはgmailと同じ) → アカウントボタン → クリエイターツール → 面右上の「アップロード」 → ドラグ&ドロップ

・投稿可能なファイル形式  
 •.MOV •.MPEG4(.mp4) •.AVI •.WMV •.MPEGPS •.FLV  •3GPP •WebM
   以下は不可: FLASH(.swf)、PowerPoint(.ppt .pps)

音声のみのファイル(.mp3など)は不可。これを投稿するには 動画形式(.wmv .MP4)に変換する。
W- MovieMaker の場合:「ビデオおよび写真の追加」で適当な静止画像を複数追加した後、「音楽の追加」 →MP4保存。
 (参照)  https://goo.gl/dFtEo3

ネットからの動画の取得
 ・oCam などのPC画面キャプチャソフトで直接取得する。 MP4 /AVI形式。
 ・Flashの場合
  Cacheメモリ からFlashファイル .SWF を取得。(フリーソフトSWF Cache Viewer 使用)
  MP4 へ変換(フリーソフト Swivel使用)。 AVI形式でも可。
  変換の際、クリック操作などのイベント部分を避ける必要がある。(避けないと変換エラーとなる)。

MP4 /AVI形式を加工
 ・メッセージなど映像を加工。Windows付属 Windows MovieMaker 使用。
 ・キャプションで映像本体にメッセージを記入したり、スナップショット(静止画像)で
 ・映像の最後の部分を切り取って、それに記入し映像最後に追加してもいい。
 ・無記入静止画像を追加すればアニメ最後のシーンを延ばすことができる。
 ・YouTube 投稿。HPへの埋め込みコードを取得。
 ・HPへ埋め込み。

・容量制限
 ・一本15分まで。手続きで20GB以上可能。 全容量、全本数の制限はないようだ。
  https://support.google.com/youtube/answer/71673?hl=ja
  http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1091595920
  https://productforums.google.com/forum/#!topic/youtube-ja/YN8EJvOJ4XE

投稿動画の管理:
ログイン → 画面左上の「三」の字アイコン → マイチャネル → 動画の管理 ここで投稿各動画の削除や公開設定もできる。
ログイン済の場合:アカウントをクリック → その中の「クリエーターツール」 → その他の機能 → 動画の管理

「公開」で投稿後に「限定公開」に変更できる。 
非公開:URLを連絡した者、かつGoogleアカウント所有者のみ対象。検索対象外
限定公開:URLを連絡した者のみ対象。ホームページにURLを掲載しても閲覧できる。 検索対象外。
公開:URLを知らなくても検索対象となりアクセス可。
http://delaymania.com/201402/webservice/youtube/youtube-privacy-setting/

パクリ動画は「限定公開」(Googleを含め検索対象外)にすべし。
公開設定すると投稿後数時間でタイトルがGoogleなどで検索対象となる。

下記画面の矢印をクリックするとそのままのサイズで再生し、画面右下「Tube」をクリックするとYouTube の原動画になる。


作品提供:石井恒司

2)HPへの挿入
YouTube に投稿した後、この動画を自分のホームページに埋め込みできる。 YouTube利用は下記メリットがある。
・大容量動画を YouTube サーバーに置くので、自分のサーバーに負担をかけずに容量を節減できる。
・多種類の動画形式をサポートし、YouTube内でFLV形式に変換してスマホ/iPadでも見える。
上の動画のYouTube原動画は http://youtu.be/ir77-c1k91c

HPへの挿入方法:
投稿した YouTube画面 の画面下の 「共有」 → 「埋め込みコード」 をクリックすると、Htmlに埋め込むコードが表示する。
 限定公開の場合はまず「公開」にして埋込みコードを取得した後に限定公開に変更する。
(最初から限定公開に設定すると埋込みコードが表示されない)
これをHtmlコードに埋め込めばいい。

再生後、再生中の関連動画やコントロールバー非表示にする方法:
ネット情報: http://keishixx.com/archives/3066
「共有」 → 「埋め込みコード」 → 「もっと見る」 にある下記設定条件を操作する。


下の埋め込みコード 実施例1~4の結果映像は → こちらに

実施例1: 設定条件のチェックを外さないデフォルト例:
<iframe width="660" height="495" src="https://www.youtube-nocookie.com/embed/ir77-c1k91c" frameborder="0" allowfullscreen></iframe>
再生後に関連動画、再生中にコントロールバーが表示。

実施例2: 上記サイトの目次1(チェック全て外す)
<iframe width="660" height="495" src="https://www.youtube.com/embed/ir77-c1k91c?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
関連動画、コントロールバーが消えるが画面右下にスタート時「YouTube」のロゴが表示。
しばらく、cacheが残るから注意

実施例3: 実施例2(チェック全て外す)にさらに?rel=0をもうひとつ加える。?rel=0 を左右に計2つ)
<iframe width="660" height="495" src="https://www.youtube.com/embed/ir77-c1k91c?rel=0&amp;controls=0&amp;showinfo=0?rel=0" frameborder="0" allowfullscreen></iframe>
画面右下のスタート時の「YouTube」のロゴも消える。しかしスタート時「YouTube」のロゴが画面上に小さく表示。

実施例4(参考):  上記サイトの目次1を参考に、実施例1に ?rel=0 のみを加える
<iframe width="660" height="495" src="https://www.youtube-nocookie.com/embed/ir77-c1k91c?rel=0" frameborder="0" allowfullscreen></iframe>
コントロールバーが残り、最後の関連動画は無くなる。

動画単独表示の場合もこれらの埋め込み表示方法を使うと周囲のウザッタイ広告画像がなくなるのでスッキリする。
YouTube への投稿は、MP4, WMV などいろいろな形式が可能ですが、Flash(.swf)を直接投稿することはできない。
他の 形式への変換が必要です。

・YouTube作品によっては投稿者の意向で埋め込みできないことがある。その場合は 「このコンテンツはフレーム内で表示できません」
の表示となる。

 

3)HPへ挿入せずにURL共有

 上記埋め込みコード内の "https://・・・・" のみでよい。

 これに?rel=0を追加すると最後の関連動画は無くなる。

3)HPへ挿入せずにURL共有-2

MP4動画をOneDrive などのstorageにいれてURL を共有してもいいが、VISTAのInternet Explorer9では見えず、GoogleChrome/ FireFox が必要。


注意:DreamWeaverCS を使用する場合
読み込む際、「objectタグはこのままではうまく表示されないから自動変換するか?」との表示がでるが「いいえ」をクリックすること。
誤って「はい」をクリックすると不要なコードが挿入されて逆にうまく表示されない。
その場合は 
<script type="text/javascript"> AC_AX_RunContent・・・・・・・・・・・・・・//end AC code</script><noscript>
のコードを削除すれば回復する。 このページはその削除部分を<!--  -->のコメント行にしてある。
またコード冒頭の宣言2行が障害となる場合もある。

HomepageBuilder を使い、コードを埋め込めば問題ない。

3)YouTube投稿後 編集/削除
・YouTube画面(HPに組込まれている場合は画面右下にあるYouTubeアイコンでYouTube単独画面にする)で、
・Uploadしたアカウントにする。
・画面右下にある「動画の管理」をクリック。

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


ネット情報
・YouTube 投稿法
https://support.google.com/youtube/answer/57407?hl=ja#

・画質設定
http://www.howtonote.jp/youtube/index7.html


関連ページ
・ムービーのHP掲載
http://1939abe.web.fc2.com/pc/hp/slideshow/movie.htm#it

・YouTube を利用したHP掲載
http://1939abe.web.fc2.com/pc/hp/slideshow/you-tube.htm#it

・画面キャプチャ による動画取得
http://1st.geocities.jp/kyokuyu/pc/hp/slideshow/capture.htm

・WebサイトからのFLASH 収集と改造
http://1939abe.web.fc2.com/pc/hp/flash/pacri.htm

・Flash ファイルのスマホ 対策
http://1939abe.web.fc2.com/pc/hp/flash/smapho.htm


  | ムービーのHPへの挿入 | スライドショー比較 |  ホームページ作成体験   |













inserted by FC2 system