バックエンドがrailsでフロントをvueで記述しています。
vueでビューを書いてるときに動画を表示したいと思い、

このように書きました
videoタグというものがhtmlにはあるらしく、htmlで使えるものはvueでも使えるだろう。っといった感じです。
srcの指定パスも間違ってない。

だけど表示されない。
色々調べてくと、https://teratail.com/questions/323372
こういった解決方法があるらしい。
どうやら動画をmp4に変換するときに色々な圧縮方法があるらしいが、特定の圧縮方法で生成されたmp4じゃないと行けないらしいので、

ここにあるとおりにH.264／AVC タイプのmp4に変えました。

だけど表示されない。。。

htmlでできることがvueでできるなら表示されても良いはずだが、、、。

Failed to compile.

./public/assets/images/buy.mp4 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

モジュールの解析に失敗しました。予期しない文字 '' (1:0)
このファイルタイプを処理するには、適切なローダーが必要です。現在、このファイルを処理するように設定されているローダーはありません。参照

なんかしらのローダーが必要。

ちなみにrails で

<%= video_tag("/app/assets/images/buy.mp4") %>

こんな感じで書いてもだめだった。。。

にっちもさっちもいかないのでvideo.jsを導入することにします。
video.jsは人気らしいので入れても大丈夫だろう。。。
vue-youtubeと違い、動画背景に文字重ねれそうだし、
今回は自作の動画を使いたい。

vue-video-playlerをはvideo.jsがjsのライブラリなので、よりvueっぽく書ける

npm install vue-video-player --save

hello_vue.js


import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css'
Vue.use(VueVideoPlayer)

を記述したら

./node_modules/vue-video-player/node_modules/video.js/dist/video.cjs.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/coffee_passport/node_modules/vue-video-player/node_modules/video.js/dist/video.cjs.js'

なんとなく　docker-compose exec web rails assets:precompile
を実行してみる。

これでもだめ。
なんとなくdocker-compose upを再度じっこう

to the "plugins" section of your Babel config.
webpacker_1 | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
webpacker_1 | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
webpacker_1 | ["@babel/plugin-proposal-private-methods", { "loose": true }]

ターミナルにこーゆーのがめっちゃ羅列されてる。。。

to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]

npm install --save-dev video.js

を追加でインストールすれば依存関係がどうにかなりそう。。。

どうにかならない。。。

Module not found: Error: Can't resolve 'videojs' in '/coffee_passport/node_modules/vue-video-player/dist'
こーゆー系のエラーはよくあるので改めて勉強しよう！

Module not found: Error: Can't resolveを解決

この方の記事によると脆弱性エラーのときにこーゆーエラーが起こったらしい。

soichirohara@SoichironoMacBook-Pro coffee_passport % npm install vue-video-player --save
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'pkcs7@0.2.3',
npm WARN EBADENGINE   required: { node: '^0.10', npm: '^1.4.6' },
npm WARN EBADENGINE   current: { node: 'v12.16.3', npm: '7.13.0' }
npm WARN EBADENGINE }
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 91 packages, removed 40 packages, changed 50 packages, and audited 1207 packages in 9s

66 packages are looking for funding
  run `npm fund` for details

13 vulnerabilities (7 moderate, 6 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

自分もこのようにインストールしたらいろいろ表示された。。。

npm audit fixを実行してみる。。

Some issues need review, and may require choosing
a different dependency.

と表示され、なんか上手く言ってなさそうなので、

npm audit fix --forceと表示する。

No fix available
と書いてあった。

 npm audit fix
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'pkcs7@0.2.3',
npm WARN EBADENGINE   required: { node: '^0.10', npm: '^1.4.6' },
npm WARN EBADENGINE   current: { node: 'v12.16.3', npm: '7.13.0' }
npm WARN EBADENGINE }

up to date, audited 1081 packages in 3s

85 packages are looking for funding
  run `npm fund` for details

# npm audit report

video.js  <7.14.3
Severity: moderate
Cross-Site Scripting (XSS) - https://npmjs.com/advisories/1777
No fix available
node_modules/video.js
  videojs-contrib-hls  <=0.6.0 || >=2.0.0
  Depends on vulnerable versions of video.js
  node_modules/videojs-contrib-hls
    vue-video-player  *
    Depends on vulnerable versions of video.js
    Depends on vulnerable versions of videojs-contrib-hls
    node_modules/vue-video-player
  videojs-contrib-media-sources  <=0.2.0 || >=3.0.0
  Depends on vulnerable versions of video.js
  node_modules/videojs-contrib-media-sources

4 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

video.jsと依存関係にありそうで、3.0.0以下をつかえば良いんじゃないかな。

npm audit report

glob-parent <5.1.2
Severity: moderate
Regular expression denial of service - https://npmjs.com/advisories/1751
fix available via npm audit fix --force
Will install @rails/webpacker@5.1.1, which is a breaking change
node_modules/watchpack-chokidar2/node_modules/glob-parent
chokidar 1.0.0-rc1 - 2.1.8
Depends on vulnerable versions of glob-parent
node_modules/watchpack-chokidar2/node_modules/chokidar
watchpack-chokidar2 *
Depends on vulnerable versions of chokidar
node_modules/watchpack-chokidar2
watchpack 1.7.2 - 1.7.5
Depends on vulnerable versions of watchpack-chokidar2
node_modules/@rails/webpacker/node_modules/watchpack
webpack 4.44.0 - 4.46.0
Depends on vulnerable versions of watchpack
node_modules/@rails/webpacker/node_modules/webpack
@rails/webpacker 5.2.0 - 5.4.2
Depends on vulnerable versions of webpack
node_modules/@rails/webpacker

video.js <7.14.3
Severity: moderate
Cross-Site Scripting (XSS) - https://npmjs.com/advisories/1777
No fix available
node_modules/video.js
videojs-contrib-hls <=0.6.0 || >=2.0.0
Depends on vulnerable versions of video.js
node_modules/videojs-contrib-hls
vue-video-player *
Depends on vulnerable versions of video.js
Depends on vulnerable versions of videojs-contrib-hls
node_modules/vue-video-player
videojs-contrib-media-sources <=0.2.0 || >=3.0.0
Depends on vulnerable versions of video.js
node_modules/videojs-contrib-media-sources

10 moderate severity vulnerabilities

To address issues that do not require attention, run:
npm audit fix

To address all issues possible (including breaking changes), run:
npm audit fix --force

Some issues need review, and may require choosing
a different dependency.
soichirohara@SoichironoMacBook-Pro coffee_passport %

色々やりすぎたのでブランチを削除してまたやり直し。

npm install vue-video-player --save

を実行


soichirohara@SoichironoMacBook-Pro coffee_passport % npm install vue-video-player --save
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'pkcs7@0.2.3',
npm WARN EBADENGINE   required: { npm: '^1.4.6', node: '^0.10' },
npm WARN EBADENGINE   current: { node: 'v12.16.3', npm: '7.13.0' }
npm WARN EBADENGINE }
npm WARN deprecated tsml@1.0.1: no longer maintained
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

added 252 packages, removed 718 packages, changed 35 packages, and audited 1249 packages in 12s

67 packages are looking for funding
  run `npm fund` for details

13 vulnerabilities (7 moderate, 6 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

とあった。

eprecated fsevents@1.2.13: fsevents 1 は、node v14+で動作しなくなります。fsevents 2にアップグレードしてください。

deprecated chokidar@2.1.8: Chokidar 2 は node v14+ で壊れます。依存性が15倍少ないchokidar 3にアップグレードしてください。

deprecated tar@2.2.2: このバージョンの tar はもうサポートされておらず、セキュリティアップデートも受けられません。できるだけ早くアップグレードしてください。

deprecated core-js@2.6.12: core-js@<3.3>はメンテナンスが終了しており、多くの問題があるため、使用を推奨しません。V8 エンジンの気まぐれにより、古いバージョンの core-js での機能検出は、たとえ何もポリフィルされていなくても、最大で 100 倍の速度低下を引き起こす可能性があります。依存先を実際のcore-jsのバージョンにアップグレードしてください。

これらが関係あるかわからないので一旦スルー。

7.10.2がvideojsの最新の安定版なので、これをインストール。

それに

Failed to compile.

./node_modules/vue-video-player/dist/vue-video-player.js
Module not found: Error: Can't resolve 'videojs' in '/coffee_passport/node_modules/vue-video-player/dist'

とブラウザに表示される。

 npm i video.js@7.10.2

を実行。

npm i video.js@7.10.2
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'pkcs7@0.2.3',
npm WARN EBADENGINE   required: { node: '^0.10', npm: '^1.4.6' },
npm WARN EBADENGINE   current: { node: 'v12.16.3', npm: '7.13.0' }
npm WARN EBADENGINE }
npm WARN deprecated xmldom@0.1.31: Deprecated due to CVE-2021-21366 resolved in 0.5.0

added 25 packages, changed 3 packages, and audited 1274 packages in 9s

67 packages are looking for funding
  run `npm fund` for details

16 vulnerabilities (10 moderate, 6 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

https://ticklecode.com/npm_install_error/
まず俺はこれから読まないといけなかった。。。

npm audit fix --forceをじっこう。

npm audit report

video.js  <7.14.3
Severity: moderate
Cross-Site Scripting (XSS) - https://npmjs.com/advisories/1777
No fix available
node_modules/videojs-contrib-hls/node_modules/video.js
node_modules/videojs-contrib-media-sources/node_modules/video.js
node_modules/vue-video-player/node_modules/video.js
  videojs-contrib-hls  <=0.6.0 || >=2.0.0
  Depends on vulnerable versions of video.js
  node_modules/videojs-contrib-hls
    vue-video-player  *
    Depends on vulnerable versions of video.js
    Depends on vulnerable versions of videojs-contrib-hls
    node_modules/vue-video-player
  videojs-contrib-media-sources  <=0.2.0 || >=3.0.0
  Depends on vulnerable versions of video.js
  node_modules/videojs-contrib-media-sources

4 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

とあった。

npm install --save videojs-contrib-hls

npm install --save   vue-video-player

npm install --save    videojs-contrib-media-sources

　をそれぞれ実行。

hello_vue.jsに

import videojs from 'video.js';

と記述したら
(webpack)/buildin/global.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/coffee_passport/node_modules/webpack/buildin/global.js'

https://github.com/babel/babel/issues/8599
この記事を参考に

npm install babel-loader @babel/core
を実行。

したらブラウザにエラーが表示されなくなった。
でもコンソールにエラーが表示されてる。

プロジェクトからnode_modulesフォルダーとpackage-lock.jsonを削除して問題を解決し、実行しました

npm install

と書いてあった。package.jsonがあるから最悪それでも大丈夫なんかな。。

npm install @babel/core @babel/preset-env -D
を実行。

/node_modules
と
package-lock.json
を削除後に

npm install
を実行。

もう無理。