前提・実現したいこと、発生している問題内容
Vuetifyを使ったウェブサイトを作成しています。
そこで動画背景を使おうと思い、
最初、htmlのvideo要素を使おうと試みたのですが
レスポンシブ化やサイズ調整などがうまく行かず
限界を感じたため、Vuetifyのビデオ背景パッケージ
「vue-videobg」を使用してみようと考えました。(コード内では「video-bg」というコンポーネントとして扱いました)
そこで以下を行い、実装しました。
・npmで外部パッケージのインストール
・nuxtjsでのコード内にプラグインをインストール
しかし、エラーは解消したのですが、
video-bgを使うと、ビデオが出力されず、その部分がホワイトアウトしています。
お伺いしたいこと
以下のように「vue-videobg」をnpmでインストールは行えているかつ、エラーも出ていないので
パッケージ自体は正しくインストールできていると思います。
お伺いしたいこととしては、
・ソースコード部分の書き方は合っているか
・もし「vue-videobg」を使って動画の出力ができている方が居ましたら
どうか助言のほどよろしくお願います。参考となるソースコードを見せていただけましたら幸いです。
補足情報(FW/ツールのバージョンなど)
発生している問題内容の補足なのですが、
エラーメッセージは出ておらず、index.vueで使用しているvideo-bgタグが無視されている感じです(video-bg内の記述が無視されているという方が正しいかもしれません)。設定したビデオが表示されずその部分だけ真っ白な画面になります。また、video-bg内の「sources="〜"」において、〜の部分のファイルを存在しないものにしてもエラーが出てこないため、video-bg内が無視されていると考えました。
参考にしたサイトは以下です
・「video-bgのパッケージHP」
・「nuxtプラグイン導入方法」
該当のソースコード
・nuxt.config.js
plugins: [ { src: '~/plugins/video-bg.js', ssr: false }, ]
・video-bg.js
import Vue from 'vue' import VideoBg from 'vue-videobg' Vue.component('video-bg', VideoBg)
・index.vue
<video-bg :sources="['@/assets/img/proto5.mp4']" img="@/assets/img/proto1.jpg">
あなたの回答
tips
プレビュー