前提・実現したいこと
現在Nuxtのプロジェクト内でvue-video-player
というプラグインを使用し、コンポーネント内で動画を再生させています。
video.jsのmethods(以下ドキュメント参照)のpaused()
、ended()
を使用して、停止時と動画終了時の状態(true, false
)を取得したいのですが、以下のvueファイル内でうまく取得することができていません。
正確には、停止時と動画終了時の状態を取得し、buttonにv-if="isPaused || isEnded"
を追加して、
停止時と終了時のみボタンを表示させたいと思っています。
vue-video-player: Github
video.js methods paused(): https://docs.videojs.com/docs/api/player.html#Methodspaused
video.js methods ended(): https://docs.videojs.com/docs/api/player.html#Methodsended
どなたかアドバイスいただけませんでしょうか?
該当のソースコード
<template> <section v-if="closeVideo"> <video-player :options="playerOptions" class="video"></video-player> <button class="btn" type="button" @click="closeVideo = !closeVideo" > <span class="btn-text">次へ</span> </button> </section> </template> <script> import "video.js/dist/video-js.css"; import { videoPlayer } from "vue-video-player"; export default { components: { videoPlayer }, props: { src: { type: String, required: true } }, data() { return { closeVideo: true, playerOptions: { autoplay: true, controls: true, sources: [ { type: "video/mp4", src: this.src } ] }, // ここで停止時、終了時の状態を保持したいです isPaused: false, isEnded: false }; } }; </script> <style scoped> /* cssは省略しています */ </style>
補足情報
以下該当プラグインのバージョンです。
"nuxt": "^2.4.2", "vue-video-player": "^5.0.2"
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/22 04:55
2019/02/22 05:04
2019/02/22 05:17