lorem-co-ltd0Webサイトに動画を埋め込むのはとても簡単です。プログラミング初学者であれば画像の埋め込みはご存じだと思いますが、動画の埋め込みも同じような手順で実現できます。近年は動画を使ったサービスや情報発信が増えているので、サイト制作やアプリ開発を目指す方はぜひ覚えておきましょう。動画もあるので必要に応じて活用してください。HTMLのvideoタグを使って動画を埋め込むまずHTMLのvideoタグについて解説していきます。画像でいうimgタグのようなものと思ってもらえれば大丈夫です。</body></html>videoタグにもimgタグ同様にsrc属性があり、そちらに読み込みたい動画のパスを指定するだけで表示させることができます。加えて他にも色んな属性があり、widthとheightでサイズを指定できます。サイズについては元の動画ファイルの縦横比率に依存するので、あくまで要素のサイズであることに注意してください。この辺りはデザイナーの担当なので初学者の方はスルーしてもらっても大丈夫です。動画プレーヤーを実装する現状のままですと動画の再生や停止などができません。videoタグにはcontrols属性というものがあり、動画プレーヤーを実装することができます。></video>〜省略〜HTMLのvideoタグを使うと自分達で再生ボタンなどを作る必要はありませんね、とても便利です。他にも音量ボタンや全画面表示のボタンまで付いています。動画プレーヤーを実装したことで動画を再生することができました。他にも自動再生できる属性にautoplayというものがあります。></video>〜省略〜autoplayを付けることでユーザーがブラウザを開いたときに動画が再生されます。ちなみにautoplayはブラウザごとに挙動が変わることが公式ドキュメントに記載されており、例えばChromeであれば「muted」という属性もセットで付ける必要があります。muted属性は名前の通り「消音」をするための属性になっています。videoタグは普通に埋め込むだけだと音量マックスになっており、消音で再生してほしい場合にはmutedを追加しておく必要があります。先ほどのautoplay属性を追加した場合にも、Chromeではmuted属性が必要になります。Chromeでは消音でしか自動再生ができないようです。続いて動画を再生するまでは「指定の画像」を表示させたい場合があります。Youtubeではサムネイルが一覧に表示されていますね、あんな形で指定の画像を用意している場合にもvideoタグにposter属性というものが用意されているので実現できるんです。></video>〜省略〜poster属性はsrc属性のようにパスを指定するだけです。先ほど自動再生の方法を解説しましたが、autoplay属性を追加しているとサムネイルを指定しても意味がなくなってしまうので注意してください。このような動画の細かい再生手法はデザイナーやクライアントと事前に詰めておく内容になるかと思います。JavaScriptで動画の操作をする方法HTMLのvideoタグを使うと簡単に動画を埋め込むことができます。JS側でもvideoタグの操作ができるので紹介しておきます。今回はオリジナルの再生ボタンと停止ボタンを作ることをやってみます。先ほど動画プレーヤーはcontrols属性で簡単に実装できることが分かりましたが、デザインによってはオリジナルのボタンを使う場面はあります。デザイナーが作ったオリジナルのボタンと動画の操作を連動させるためにJavaScriptを使っていきます。HTMLは以下のようにします。</body></html>buttonタグを使って簡単ですが、再生と停止のボタンを用意しました。現状だとボタンをクリックしても何も起きないので、JSファイルで要素を取得して関数を書いていきます。movie.pause();});まず要素の取得で「動画」「再生ボタン」「停止ボタン」をそれぞれ取得して定数に格納しておきます。document.querySelector("#btn-stop");〜省略〜querySelectorについては別の記事で詳しく解説しているので必要でしたらご覧ください。getElementsClassByName)要素の取得できたら再生ボタン、停止ボタンのそれぞれに対してaddEventListenerのclickイベントに関数を指定します。JavaScriptでは動画要素について「play(動画の再生)」「pause(動画の一時停止)」と専用の関数が用意されています。movie.pause();});JavaScriptを使うと言っても事前に関数が用意されているので、特に難しいことはないですね。Youtube動画であればリンクを埋め込むだけですが、MP4ファイルなどで動画ファイルを埋め込みたい場合には今回紹介したテクニックが役に立つので使ってみてください。今回参考にした本は以下になりますのでよければどうぞ。