超簡単! ホームページで自作動画の再生


ホームページから自分の作った動画を再生出来る手順(作り方)を、少しでも参考になればと
思い、幾つかの方法を述べさせていただきます。


1.ホームページのデータと同じ場所に保存しポップアップの方式で
 見る方法


利点   動画のデータが内部保存なので管理し易い。
     オリジナルと同じ画質で再生出来ます。
問題点  保存場所の使用料金は自分持ちとなります。
     長時間物の使用には向きません。
作り方  1.先ず「メタファイル」と言う特殊なファイルを作り、同じフォルダーに
      保存します。
     2.解り易くする為に動画のファイルも同じフォルダーに保存します。
     3.最初に「メタファイル」に動画へのリンクを貼ります。(相対リンク)
     4.本文のリンク先にメタファイルのアドレス(ファイル名)を貼ります。
      内部では「メタファイル」が、中で設定してある「動画のファイル」を
      呼び出します。
操作   リンク元をクリックしますと、動画再生の画面がポップアップし再生が
     始まります。
     元の画面に戻る時は、再生画面を閉じます。(右上の×印をクリック)

とりあえず動画のファイル形式は「WMV」にして下さい。他の形式に付きましては
テスト中です。
「MP2」の形式を試してみました。OSやブラウザにより色々な問題が発生しました。
 1.音声は再生出来ても画像が表示されない。
 2.二番目の方式の時には勝手に「自動再生」してしまう。
 3.プレーヤーのタイムバーが動かない。



















「メタファイル」の作り方のヘージです

内部保存 の動画を再生します




2.ホームページのデータと同じ場所に保存しホームページの中で
 見る方法

利点   同じページの中で動画が再生出来ます。
     画面の大きさをある程度設定出来ます。
     動画の管理を自分の所で出来ます。
問題点  保存場所の使用料金は自分持ちとなります。
     長時間物の使用には向きません。

作り方  1.先ず上記1番と同じ方法で「メタファイル」を作ります。
     1.このサイトの「HTMLソース」を表示します。
     2.<object から </object> 迄を全部コピーします。
     3.自分の目的の箇所に貼り付けます。
     4.もしも「メタファイル」に別の名前を付けた場合は、その箇所を書き換えます
     5.<embed の中の メタファイル(movie2.asx) を保存しているサーバー
      (ホームページ名)を自分の所に書き換えます。



上の画面の「再生ボタン」をクリックしますと再生が始まります。






3.YouTube に動画をアップロードしホームページからリンクを
 貼る方法

利点   YouTube にアップした動画を使うので保存料が掛かりません。
     YouTube の許容範囲内で長時間の物も大丈夫です。
問題点  オリジナルに比して画質(ビットレート)が低下します。
作り方  1.先ず動画を YouTube にアップロードします。
     2.その動画にアクセスして再生画面を開きます。
     3.動画の画面の中央下にある「共有」をクリックします。
     4.下側に大きく「アドレス」が表示されますので「コピー」します。
     5.ホームページの中で、リンク先として先ほどの「アドレス」を貼ります。
      (絶対リンク)















操作   リンク元をクリックしますと、YouTube のサイトにジャンプし再生が
     始まります。
     元の画面に戻る時は、YouTube のサイトを閉じます。(右上の×印をクリック)



















YouTube へのジャンプです





4.YouTube に動画をアップロードしホームページの中で見る方法

利点   同じページの中で動画が再生出来ます。
     画面の大きさをある程度設定出来ます。
     YouTube にアップした動画を使うので保存料が掛かりません。
問題点  オリジナルに比して画質(ビットレート)が低下します。
     第三者の作品を断り無しにリンクを貼りページの中で再生した場合道徳的な
     問題が微妙です。
作り方  1.先ず動画を YouTube にアップロードします。
     2.その動画にアクセスして再生画面を開きます。
     3.動画の画面の中央下にある「共有」をクリックします。
     4.次にそれの左下にあります「埋め込みコード」をクリックします。
     5.「コード」が表示されます。
     6.その中の width と height の値(画面の大きさ)をチェックします。
     7.大きさを変更したい場合は 「画面のサイズ」の右側をクリックして
      変更します。
     8.「コード」をコピーします。
     9.ホームページの中で表示したい場所に、先ほどの「コード」を貼ります。

















割合と大きなスペースを取りますので、それから下側は実際にTest再生
     させてから作った方が良いと思われます。
操作   ホームページを開きますと既に動画の再生画面が準備されています。
     画面中央の三角印をクリックします。動画の再生が始まります。






5.その他の方法

HTML5 の中の <VIDEO> のタグを使用する方法が在る様ですが、再生できる環境が
「エクスプローラ 9」以上に限られる様ですし、使用出来る「動画の形式」も「汎用」か
「専用の形式」に変換しなければいけないのか不明なので今後の研究課題とさせて頂きます。

商業的な方法としましてはページの中の好きな場所及び大きさで「動画を再生する枠」
を作り再生用のプレーヤー(Flash Player)等を埋め込んで動画を再生する方法もあります。
2番目の方法よりは複雑な設定をしている様です。
時間が取れれば挑戦してみたいと考えております
 補足ですが4番目のインラインフレームで YouTube を再生する方法との違い(私見)は
動画のデータを自分の管理下に保存出来る
素人が簡単に出来ない様な方法を使わないとお金が貰い難い    と思いますが。




私のリンク集
  時間が御座いましたら下記の作品を、一度覗いて下さる様お願い致します。
  「作品名」をクリックしますと、その作品にジャンプします。
  戻ります時はその作品を閉じて(右上の×をクリックして)下さい。


作品名 コメント
危険 ! そのビデオの
取り込み
ビデオカメラからパソコンに映像を取り込む
方法に注意しませんと「欠落」が生じます
スマホ(携帯)
でビデオ
スマホからパソコンにビデオを取り込み編集したり
ビデオカメラの映像をスマホに持っていく方法です
パソコン・録音 マイクを使用してパソコンで直接録音する方法を
解説しています
パソコンにマイクを
接続
パソコンに接続出来るマイクと、劣化や破損の
危険があるマイクの種類を解説しています
ホームページで
音声の再生
ホームページの中で音声を再生する方法や
作り方を何種類か解説しています
衣類乾燥機修理
丸ベルト交換
全衣類乾燥機の丸ベルトの交換方法と
その入手先を紹介しています