第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我如何在 vue js 中使用 Plyr.io 觸發(fā)播放、暫停和結束事件

我如何在 vue js 中使用 Plyr.io 觸發(fā)播放、暫停和結束事件

慕妹3146593 2021-11-18 17:17:08
我正在 vue js 應用程序中使用 vimeo 播放視頻,但我無法獲得暫停事件和播放事件......下面我給出了我正在使用它的代碼,但似乎我錯過了一些東西或者我沒有得到要添加的點。視頻正在通過它正在播放的 API,但我想在視頻暫停時觸發(fā)暫停事件。<template>  <div style="max-height: 560px">    <h1 class="title is-size-3" style="text-align: center;">{{ videoTitle }}</h1>    <vue-plyr ref="plyr">      <div class="plyr__video-embed">        <iframe          v-bind:src="videoUrl"          allowfullscreen          allowtransparency          allow="autoplay"          height="100%"          width="100%"        ></iframe>      </div>    </vue-plyr>    <div class="vimeoPlayer"></div>  </div></template><script>import { GET_VIDEO } from "../utils/endpoint.js";const axios = require("axios");export default {  name: "Vimeo",  data() {    return {      videoUrl: "",      videoTitle: "",      videoVimeoId: ""    };  },  computed: {    player() {      return this.$refs.plyr.player;    }  },  methods: {    onVideoPause: function() {      console.log("Video is Paused");    }  },  mounted() {    this.video_id = this.$route.query.video_id;    axios      .get(api)      .then(response => {        this.videoUrl =          response.data.data.video_url +          "?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media";        this.videoTitle = response.data.data.title;        this.videoVimeoId = response.data.data.video_url.split("/")[4];      })      .catch(e => {        console.log(e);      });  }};</script>
查看完整描述

2 回答

?
慕妹3242003

TA貢獻1824條經(jīng)驗 獲得超6個贊

Vimeo 已經(jīng)創(chuàng)建了一個很好的 API 包裝器,可以讓您輕松地做到這一點。


使用安裝npm install @vimeo/player --save然后將其導入到您選擇的組件中


import Player from '@vimeo/player


由于您已經(jīng)有一個 iframe 播放器,您需要做的就是向它添加一個 ref 并使用 DOM 元素實例化 Vimeo 播放器構造函數(shù)。然后,您可以向?qū)嵗砑邮录陕犉?,并在觸發(fā)事件時調(diào)用您喜歡的任何方法。


在您掛載的函數(shù)中添加以下內(nèi)容:


mounted() {

  const player = new Player(this.$refs.iframe)

  player.on('play', (data) => this.onPlay(data))

  player.on('pause', (data) => this.onPause(data))

}


methods: {

  onPlay(data) {

    console.log("Video is playing", data)

  },

  onPause(data) {

    console.log("Video is paused", data)

  }

}

更多信息可以在https://github.com/vimeo/player.js找到


希望這可以幫助


編輯


剛剛意識到您特別要求使用 plyr.io 的說明。


將這些事件偵聽器添加到掛載的鉤子。


mounted() {

  this.player.on('pause', () => this.onVideoPause())

  this.player.on('play', () => this.onVideoPlay())

}


查看完整回答
反對 回復 2021-11-18
?
萬千封印

TA貢獻1891條經(jīng)驗 獲得超3個贊

在< vue-plyr>中添加“ pause ”作為emit in:emit屬性來暫停,如果玩家已經(jīng)完成,也可以使用“ ended ”來獲取動作,并將其分配為vue-plyr元素中的選項,


前任:


<vue-plyr :emit="['pause','ended']" @pause="ActionController" @ended="endedAction"> <div data-plyr-provider="youtube" data-plyr-embed-id="nM2Da70XfEs"></div> </vue-plyr>

然后,將 ActionController 定義為方法 {} 的函數(shù),


完整示例


<script>

export default {

        methods: {

          ActionController: function(event) {

            console.log(event.detail.plyr.currentTime) // to get current time, DON'T FORGET REMOVE IT, just for check ??

          },

          endedAction: function(event) {

            console.log('end')

          }

        }

}

</script>

<template>

<vue-plyr :emit="['pause','ended']" @pause="ActionController" @ended="endedAction">

              <div data-plyr-provider="youtube" data-plyr-embed-id="nM2Da70XfEs"></div>

  </vue-plyr>

</template>

參考 => https://github.com/sampotts/plyr#events


查看完整回答
反對 回復 2021-11-18
  • 2 回答
  • 0 關注
  • 972 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號