How do i trigger the event on Play, Pause and end using Plyr.io in vue js

user_9075877 0
Viewed 4976

I am playing a video using vimeo in vue js app but i cant able to get the pause event and play event... Below i have given the code which i am using it, but it seems i missed the something or i am not getting the point to add. Video is getting through the API it is playing but i want to get pause event trigger on when video pause.

<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>
vue.js javascript
2 Answers

Vimeo has created a nice API wrapper that allows you to do this easily.

install using npm install @vimeo/player --save then import it into your component of choice

import Player from '@vimeo/player

Since you have an already existing iframe player all you need to do is add a ref to it and instantiate the Vimeo player constructor with the DOM element. You can then add event listeners to the instance and call any methods you like when the event is triggered.

Inside your mounted function add the following:

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)
  }
}

More information can be found at https://github.com/vimeo/player.js

Hope this helps

EDIT

Just realized that you were specifically asking for instructions using plyr.io.

Add these event listeners to the mounted hook. 

mounted() {
  this.player.on('pause', () => this.onVideoPause())
  this.player.on('play', () => this.onVideoPlay())
}
user_116436920

Add "pause" as an emit in :emit attribute in < vue-plyr > to get paused , use "ended" also to get action if player has finished, And assign this as an options inside vue-plyr element,

Ex:

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

Then, define the ActionController as a function of the methods {},

full example

<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>

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

user_17966190
Related