動画はYouTubeでホームページに埋め込むのが一番手っ取り早いですが、全体に公開したくない動画や会員専用サイトのみで使いたい動画の場合、YouTubeでアップすることが難しいと思います。
YouTubeには「全体に公開」「非公開」「限定公開」の3種類があり、会員専用サイトにのみ公開したい動画を作成する場合、
限定公開でいいと思っていました。
（非公開はGoogleアカウントを持っている人がダメだったりと制限があります）
いかし調べていると、そのアドレスはYouTube内で検索されないだけで、何かでリンクURLがもれた場合は、誰でも見れてしまうからです。
つまり、動画のアドレスがもれると誰でも見られてしまうという話。
これではダメなので、結局直接サーバーにアップしてそれを見てもらおうと考えました。
今回はそんな限定公開したい動画を埋め込む場合、色々困ったので備忘録としてメモしておきます。
動画ファイルを作成する
用意する動画は最低2つ
・ mp4で作られた動画ファイル（通常モダンブラウザではmp4で見られる）
・ webMで作られた動画ファイル
MP4は簡単で、すぐ作れましたので割愛。最近のソフトはmp4を簡単に作れます。
ちなみにmp4ファイルの動画作成はこちらのソフトで作成しました。
 |
|
新品価格 |
mp4ファイルだけでなく、wmvファイルなどを作れますが、ひとつ困ったことがありました。
MP4ファイルに対応してないブラウザ用をどうする？
MP4は最近のブラウザにはずいぶん対応してきましたがFirefoxなど一部のブラウザには対応していないことが判明。
実際一部のタブレットやAndroidでは再生できないものもあるので、その他のブラウザ用に変換したファイルを作成しました。
変換する方法は色々あるけれど、今回はwebでコンバートしてくれるサイトを使いました。
Convertio
https://convertio.co/ja/files/
MP4だけでなくその他多種多様のファイルをコンバートしてくれます。
Firefox用にwebMを作成
FirefoxはMP4ファイルを見ることができませんので、対応しているwebM形式に変換
拡張子は.webmです。
上記サイトで変換したファイルをダウンロードしてホームページに貼り付けます。
通常はサーバーでアップロードすればいいです。
HTMLを記述
htmlの書き方は下記の通り。
[html]<video controls poster="***.jpg">
<source src="***.mp4" type="video/mp4" />
<source src="***.webm" type="video/webm" />
</video>[/html]
sourceタグ内にそれぞれのファイルのパスを書いておきます。
こうすると各ブラウザにあった形式を自動で読み込んでくれます。
Video属性
タグvideoには各種属性がつけられます。
・controls ビデオの再生ボタンやスクロールバー、全画面表示などのコンソールバーをつけることができます。
・poster ビデオの最初に表示される画像を指定できます。写真でいうサムネイルです。予めJPG画像などで作っておきます。
・autoplay 自動的に再生することができます。記述しなければ再生ボタンから再生することが可能
・muted 音を出さないように指定できます。
・loop 繰り返し再生する指定です。
サーバーにアップロードした動画のパスをそれぞれのsourceタグに貼り付ければ完了です。
動画変換まとめ
最近では様々なデバイスが出てきましたので、それに対応することは大変ですが、コンバートしておけば各デバイスに対応する拡張子でアップすることが可能です。
