初心者・中級者向けWEBサイトに動画を表示する方法

スポンサーリンク




最近のWEBサイトやブログでは、写真や画像を掲載するのは当然のことで、動画を載せてあるサイトやブログが数多くあります。
理由は簡単で写真や画像ももちろん、何もないよりは分かりやすいですが、動画であればより見る人に対して説得力があり理解してもらいやすく、何よりも動くものは目について見てもらいやすいからというのが大きな理由だと思います。

また、以前までは動画を撮影といえば専用のもので撮影してパソコンに取り込んで加工をしてと非常に煩雑な作業が必要で、到底初心者ができるようなものではなかったのですが、スマートフォンが普及してきた事で手軽に動画を撮影、アプリを使用して誰でも簡単に加工ができるようになってきたのも大きな理由ではないかと思います。

そこで今回は初心者の方向けに簡単に動画を載せる方法と、少し中級者の方向けの動画の掲載方法の2種類を紹介します。

初心者の方でも簡単にできるyoutubeを利用した動画掲載方法

あまりにも有名なのでご存知の方が多いと思います。そんな方は読み飛ばしていただければと思います。
もしも、今まで見る専門で動画をアップして利用した事が無い方は是非参考にしてみてください。

一番簡単に手軽に動画を掲載する事ができるのはyoutubeを利用する事です。

youtubeを利用するメリット

youtubeを使用した際にはどのようなメリットがあるかといいますと
・比較的誰でも簡単にWEBサイトへの設置が簡単にできる
・動画のファイルサイズはかなり大きいため、動画を置くサーバーの容量を気にする必要がありますが、youtubeであれば、気にする必要がない
・多くの方が閲覧、利用している超有名動画サイトなので人の目に触れやすくなる
・動画を閲覧する事により興味を持ってもらえて、そこからWEBサイトを訪問してもらえるきっかけになる
・様々な反応や意見を聞くことができる

他にもありますが、おおまかこのようなメリットがありますのでこれから動画を掲載してみたいと思っている方は利用してみてもいいのではないかと思います。

youtubeを利用する方法

それでは実際にyoutubeを利用するにはどうしたらいいでしょうか?
順番に説明したいと思います。

1.googleアカウントを取得する

まずはyoutubeを利用するには、アカウントの取得が必要です。昔はyoutube独自のアカウントを取得する必要がありましたが、今はgoogleのアカウントを取得すれば利用できるようになっています。
お持ちでない方は下のリンクからアカウントを取得できますので、取得をしておいてください。

googleアカウント作成 https://accounts.google.com/SignUp?hl=ja

2.youtubeにログインする

googleアカウントが取得できましたら、youtubeをブラウザで表示して先ほど作成したgoogleアカウントでログインします。

youtube https://www.youtube.com/

下の画像の右上の赤丸で囲ったところにある「ログイン」ボタンをおして、gmailのメールアドレスとご自身で設定されたパスワードを入力します。

ログインできましたら、下の画像のような画面が表示されます。
ここの画面から色々な事ができるのですが、今回は動画を掲載する方法の説明ですので割愛します。

3.youtubeに動画をアップロードする

ここから、ご自身が掲載したい動画をアップロードします。
下の画像の赤丸で囲ったボタンを押すと、動画のアップロードをする画面が表示されます。

まず、下の画像の赤丸で囲ったボタンで、
誰でも見る事が出来る「公開」
動画のURLを知っている人だけが見る事が出来る「限定公開」
自分が指定した相手(Googleアカウント持ってる人)だけが見れるようになる「非公開」
を選択する事が出来ます。今回は公開にします。

そして、灰色の矢印がある部分をクリックして動画をパソコン内から選択するか、動画を直接その部分にドラッグ&ドロップする事で動画のアップロードがはじまります。

長い動画になると処理に時間がかかりますが、「処理が完了しました」と表示されるまで気長に待ちましょう!
処理が完了しましたと表示されればアップロードは終了です。

次に、赤丸①には動画のタイトルを記入します。
赤丸③には閲覧者に何の動画なのかを説明する文章をいれます。
赤丸③は、動画が再生される前に表示される静止画像をを指定する事が出来ます。

全て記入し終えたら、下の画像の赤丸①の「公開」をクリックします。これで動画のアップロードは完了です。

アップロードされた動画を見るには、赤丸②で囲った部分に動画のアドレスが表示されていますので、こちらをクリックすると、アップロードされた動画を見る事ができます。

動画をホームページやブログに埋め込む

アップロードされただけでは、ご自身のサイトやブログに動画を掲載する事にはなりませんので、次にこの動画を、埋め込むための作業をします。下の画像の赤丸で囲った「共有」ボタンをクリックすると、様々なボタンとURLが表示されます。
(このURLを張り付けても、埋め込みにはなりませんがこのURLをホームページに張り付けると動画へのリンクになります。)
埋め込み動画にするには色々出てきたボタンの中の「埋め込みコード」ボタンをクリックします。
すると、HTML用に張り付けるタグが表示されます。
このHTMLのコードをコピーします。

最後にこのコードをご自身のホームページの表示させたい場所やあるいはブログに張り付けをします。

上のように動画が表示されれば完成です。
いかがでしょうか?意外と簡単に動画が表示できるようになりました。最初は慣れないと難しいと思われるかもしれませんが、手順を覚えてしまえば比較的簡単に動画を張り付ける事ができると思います。

中級者向け動画掲載方法

ご自身が持つホームページにyoutubeを使用せずに動画を公開する方法です。
この方法はご自身がホームページを所有していて、さらにサーバーへの動画のアップロードができる方であれば利用できます。
昔は、動画はflashなどを利用していましたが、最近はiphoneなどiosで表示できないなどで利用されなくなりました。また正式にflashの技術が2020年に終了するとアナウンスされましたのでflashは利用できなくなります。

その代替として現在主流となっているのが、HTML5のvideoタグを使用しての動画埋め込み方法です。

動画の準備をする

WEBサイトを閲覧するソフトは色々ありますが、昔はそれぞれに再生できる動画のタイプが違っていました。その為に各ブラウザに合わせて違ったコーデックの動画を複数準備する必要がありました。現在はおおよそmp4という動画形式とwebMという形式の動画を用意すればいいようです。ですのでこの2つの動画をそれぞれ作成します。

準備ができたら、ご自身のサーバーにこの2つの動画を任意の場所にアップロードして下さい。そしてその動画のURLを覚えておいてください。

HTML5 videoタグを書く

上記のようにタグを書きます。その際に動画のURLをご自身がアップロードした動画へのパスに置き換えてください。
基本的な記述はこれで完成ですが、その他にも設定できる事があります。
例えば、
 

のように書くと、「controls」は動画の再生コントロールができたり、「autoplay」は表示されたら自動的に再生が始めるという設定となります。また「poster」は静止状態の時に静止画を設定するものになります。
このほかにも様々な設定があります。

上記で埋め込む事が可能となります。
やっている事はそれほど難しくないですが、タグを覚える必要性と動画を複数準備する必要がありますので、少し初心者の方には敷居がたかいかもしれませんが、このような方法がある事をしっておくのもいいかもしれません。

まとめ

今回は動画の埋め込み方法をご紹介しました。昔に比べるとずいぶん動画利用の敷居が低くなりつつあります。その中でもyoutubeを利用する方法は、どなたでも比較的簡単に利用する事が可能な便利な方法です。
youtubeを利用する事によって、様々なメリットもありますので、今まで利用した事がない方は、この機会にご自身のホームページやブログに積極的に動画を活用されてはいかがでしょうか。

スポンサーリンク




記事をシェアお願いします