今まではwebサイトの作成を通して基本的なプログラミングの学習を行ってきましたが、現在は更にAdobeツール各種も使用するようになりつつあり、一つの演出を実装するのに複数の方法を選択する事が出来るようになってきたと思います。
今回は動画素材の取り扱いを中心にwebサイトへの実装方法のアイデアを書き留めておこうと思います。
・まずは著作権フリーの動画素材を探してくる
自分は下記のサイトを利用する事が多いです。（自前で動画を撮影したりAdobeツール等で動画自体を自作しようとすると、流石に学習が脱線してしまうので…）
その他にも下記の記事で様々なフリー動画素材を扱うサイトが紹介されていたのでコチラもオススメです。
・動画素材をwebサイトの背景として使用
例えば下記のサイトの様にページ背面全体に動画背景を実装して動きのあるサイトが作りたい時
フリー素材の中には最初からループ再生が可能なように編集してある動画もありますが、「今回作りたいサイトの雰囲気に合っている動画に限ってループ再生に対応していない…！」みたいな事が良くありました。
動画をループ再生に対応させるには、動画の始点と終点を一致させる必要があります。
主な方法は
- 動画の始点と終点にフェードイン・フェードアウトを追加し、動画の切れ目に暗転を加える事で始点と終点を一致させる
- 動画Aと動画Bの2種類の素材を用意し、「動画A→動画B→動画A」の順番にクロスフェードを追加し、始点と終点が一致する箇所でトリミングする（動きの少ない抽象的な動画なら動画Aだけのクロスフェードでも違和感のないループが成立します）
- 動画素材が再生し終わったタイミングでコピーした動画素材を逆再生させて元動画と繋ぎ、始点と終点を一致させる
- 動画内で始点と終点が一致している箇所がある場合、ループ可能な部分だけを元の動画素材からトリミングする
これらを実現するには予め動画編集ソフトで動画素材をループ再生に対応させてから使用するか、未加工の動画をwebサイト上でループ再生に対応させることになりますが、それぞれメリットデメリットが存在していると考えています。
対処法１：動画編集で何とかする
メリット
- ソースコードがシンプルにまとまる
デメリット
- 動画編集ソフトが必要
- 後々の変更や修正に弱くなる
対処法２：コーディングで何とかする
メリット
- 後々の変更や修正に強い
- javascriptによる動的処理との組み合わせが可能
- 動画編集ソフトが不要
デメリット
- 実装・デバッグに時間が掛かる
- ソースコードが複雑になる為、様々な環境から閲覧した際に不具合が起きやすくなる
動画編集ソフトで予めループ再生に対応させておくことで、HTMLでvideoタグを読み込み、動画背景としてCSSを調整するだけで実装が可能になります。
その代わり、予め「動画A→動画B→動画A」とクロスフェードさせて作成した動画素材が、後々「動画A→動画B→動画C→動画A」等に構成を変更しなければならない場合には１から作り直しになってしまう事もあります。
逆に、全てをコーディングで賄う場合、一度ループ化の仕組みを構築してしまえば上記の様な変更にも柔軟に対応できる反面、ソースコードが複雑になるほど様々な環境からwebサイトを閲覧した場合には不具合が起きやすくなる他、HTML上で複数の動画を読み込まなればならない為、動画のサイズによってはページの読み込みが重くなってしまうと思われます。
個人的には動画を取り扱う際はなるべく事前に編集ソフトで必要な工程を済ませておき、コーディングはなるべくシンプルにまとめておく方がトータルでは楽に実装が出来ると考えています。動画編集ソフトに編集ファイルのバックアップを残しておけば、最低限の修正で対応可能なのも大きいですね。
・今後やってみたい表現リスト
動画サムネイルのホバーエフェクト
javascriptのonmouseoverイベントパンドラでマウスオーバーとHTMLMediaElement.playbackRateを組み合わせて、videoタグへのホバー操作に反応して動画をスロー再生したり、ホバーした時だけ動画が再生されるボタン
動画サムネイルクリック時のページ遷移アクション
他のページにリンクしている動画サムネイル型のボタンをクリックした際に、ページが動画にズームして動画に飛び込んでいく様なアクション
等々…まだまだやってみたい事は色々あるので、引き続き幅広く学習を続けていきたいと考えています。
自分用の備忘録ではありますが、誰かの参考になれば幸いです。