前提・実現したいこと
Nuxtのプロジェクト内で動画を再生するためにvue-video-player
というプラグインを使用しています。
しかし、controlsをtrueにした際に、再生中のアイコンが正常に表示されずに困っています。
vue-video-player: 公式ドキュメント
発生している問題・エラーメッセージ
vue-video-player
を使用していますが、動画自体は上手く動作してます。
cssもdocumentに記載されていたものをscript内でimportで読み込んでおり、スタイルも当たっています。
しかし、動画再生中に下部に表示されるバー内のアイコンが以下画像のように表示されており対処法がわからず悩んでいます。
一点気になる点が、動画再生前の動画開始アイコン、sourceが見つからない時の再生不可のアイコンは正常に表示されていました。
そのため、アイコンが全て表示されていないわけではなさそうです。
該当のソースコード
以下のcomponentをpages以下で読み込んでます。
なお、下記のコードでは不要と思われる部分は削除しています。
vue
1<template> 2 <div class="wrapper"> 3 <video-player :options="playerOptions"></video-player> 4 </div> 5<script> 6import "video.js/dist/video-js.css"; 7import { videoPlayer } from "vue-video-player"; 8 9export default { 10 components: { 11 videoPlayer 12 }, 13 props: { 14 src: { 15 type: String, 16 required: true 17 } 18 }, 19 data() { 20 return { 21 playerOptions: { 22 autoplay: true, 23 controls: true, 24 width: 1200, 25 height: 675, 26 sources: [ 27 { 28 type: "video/mp4", 29 src: this.src 30 } 31 ] 32 } 33 }; 34 } 35}; 36</script> 37 38<style scoped> 39</style> 40
試したこと
公式ドキュメントを確認し、色々値をいじってみましたが、効果はありませんでした。
また、以前別プロジェクトで同様のプラグインを使用し、今回表示されていないアイコンが正常に表示されることも確認しております。
その時のコードと見比べてみましたが、特にこれといった解決策は見つけられませんでした。
おそらく、install等の問題でしょうか。。。
補足情報
"nuxt": "^2.4.2", "vue-video-player": "^5.0.2"
あなたの回答
tips
プレビュー