Vue.js シリーズの第６弾です。
今回は、知らない間に当社ホームページのトップ画面が変わっていたので、今回はそれに合わせて変更をかけてみたいと思います。
今回作るもの
トップページの画面全体に動画を繰り返し再生するようにします。
今回は Vue.js 特有の機能は使わず、 HTML の対応です。
完成イメージはこんな感じで、画面の背景に同じ動画がずっと流れ続けます。
従来の「NEWS」「SERVICE」「RECRUIT」メニューは、画面を下にスクロールすれば表示されます。
コード書き換え前
変更前の画面はこんな感じで、背景に部屋の画像が大きく入っています。
コードはこちら。
// メイン画面
<template>
<v-responsive fluid class="fill-height mx-auto">
<v-row>
<v-col cols="12">
<v-img src="@/assets/pc_room2_1-400x225.jpg" height="60vh" cover></v-img>
</v-col>
</v-row>コード書き換え
まずは動画素材ファイルを用意します。
今回は YouTuberのための素材屋さん というサイトから mp4 形式の動画をダウンロードしてきました。
続いてダウンロードした動画を \src\assets\ ディレクトリに置いておきます。
最後に、メイン画面の画像を指定している v-img タグを video タグに変更します。
// メイン画面
<template>
<v-responsive fluid class="fill-height mx-auto">
<v-row>
<v-col cols="12">
<video class="background-video" autoplay loop playsinline>
<source src="@/assets/5bg212歯車タイル.mp4" type="video/mp4" />
</video>
</v-col>
</v-row>これで画面を見ると、このように動画がずっと表示され続ける画面ができあがります。
画面を下にスクロールするとメニューもこのように表示されます。
まとめ
という訳で、今回はリニューアルされたホームページのトップ画面に合わせて、背景に動画をループ再生する実装をしてみました。
最近のホームページでは、動画を表示して視覚的に訴えかけるおしゃれなものが増えてきた印象があります。
動画を活用した Web ページ制作、簡単にできるので皆さんも試してみると面白いかもしれません。
では、次回もお楽しみに。