質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

0回答

1454閲覧

Vuetifyパッケージ、「vue-videobg」について

momom00777

総合スコア5

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2020/10/31 08:48

編集2020/10/31 08:52

前提・実現したいこと、発生している問題内容

Vuetifyを使ったウェブサイトを作成しています。
そこで動画背景を使おうと思い、
最初、htmlのvideo要素を使おうと試みたのですが
レスポンシブ化やサイズ調整などがうまく行かず
限界を感じたため、Vuetifyのビデオ背景パッケージ
「vue-videobg」を使用してみようと考えました。(コード内では「video-bg」というコンポーネントとして扱いました)
そこで以下を行い、実装しました。
・npmで外部パッケージのインストール
・nuxtjsでのコード内にプラグインをインストール

しかし、エラーは解消したのですが、
video-bgを使うと、ビデオが出力されず、その部分がホワイトアウトしています。

お伺いしたいこと

以下のように「vue-videobg」をnpmでインストールは行えているかつ、エラーも出ていないので
パッケージ自体は正しくインストールできていると思います。
npmパッケージ「vue-videobg」のインストール済み
お伺いしたいこととしては、
・ソースコード部分の書き方は合っているか
・もし「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">

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問