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

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

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

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

Video.js

Video.jsは、オープンソースのHTML5ビデオプレイヤーです。HTMLファイルにてJavaScriptファイル・CSSファイルをロードし、いくつかのタグを書くだけでWebページに動画プレイヤーを設置できます。

Nuxt.js

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1947閲覧

Vueファイル内で再生している動画の停止時と終了時の状態を取得したい

aa316316

総合スコア39

Vue.js

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

Video.js

Video.jsは、オープンソースのHTML5ビデオプレイヤーです。HTMLファイルにてJavaScriptファイル・CSSファイルをロードし、いくつかのタグを書くだけでWebページに動画プレイヤーを設置できます。

Nuxt.js

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/02/22 03:55

編集2019/02/22 04:55

前提・実現したいこと

現在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"

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

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

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

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

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

guest

回答1

0

ベストアンサー

Pause():発火させた時に動画の再生を停止する
Paused():発火させた時に動画が停止されてるかをチェックする

なので今回実現したいことには使えないのではないでしょうか。

githubのreadmeしか読んでいませんが、こういう書き方ができるのではないでしょうか

vue

1//省略 2<video-player 3 :options="playerOptions" 4 @pause="isPaused == true" 5 @play="isPaused == false" 6 @ended="isEnded == true" 7 class="video" 8></video-player> 9//省略 10data: function() { 11 return { 12 isPaused: false, 13 isEnded: false 14 } 15} 16

投稿2019/02/22 04:14

yu-smc

総合スコア610

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

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

aa316316

2019/02/22 04:55

> yu-smcさん ご回答ありがとうございます! すみません、質問内容の間違いで、正しくは使用したいmethodsはpaused()(停止状態の取得), ended()(終了状態の取得)でした。。 さらに詳細な実行したい動きは、上記paused, endedでビデオの状態(停止、終了)を取得し、その値がtrueの時にだけv-ifで「次へ」のようなボタンを表示させたいと思っています。 質問内容編集いたしましたので、よろしければ再度ご確認いただけますでしょうか? よろしくお願いいたします。 また、ご回答いただいた方法も試してみます!とてもたすかります。ありがとうございます!
yu-smc

2019/02/22 05:04

> さらに詳細な実行したい動きは、上記paused, endedでビデオの状態(停止、終了)を取得し、その値がtrueの時にだけv-ifで「次へ」のようなボタンを表示させたい これって、常にpaused, endedメソッドを発火させ続けないといけないということになりませんか? 先ほどの回答内容のように書いて、ボタンの要素にv-if="isPaused || isEnded" とか書けばいけそうですがどうでしょうか。 誤解があったらすみません。
aa316316

2019/02/22 05:17

ご返信ありがとうございます。 上記に回答していただいた内容ではうまく動きませんでしたが、video-playerに@pause="paused($event)"として、script内のmethodsにpaused() { this.isPaused = true;}というイベントを追加することによって停止状態の取得、dataの書き換えができました! playとendedも同じように書くことで動作いたしました! 自分がgithubの内容を理解できていなかったこともあり、大変参考になりました! 助かりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問