vue-youtube-embed icon indicating copy to clipboard operation
vue-youtube-embed copied to clipboard

How pausePlayer() with custom btn?

Open hardusik opened this issue 4 years ago • 3 comments

How I can pausePlayer() with custom btn?

hardusik avatar Jul 29 '20 21:07 hardusik

Readme shows how to do it with pauseVideo(), but you hace to instantiate the player in a variable, take a look at https://github.com/kaorun343/vue-youtube-embed#example-code

jonalxh avatar Sep 01 '20 17:09 jonalxh

https://github.com/kaorun343/vue-youtube-embed#example-code

it's not clear for me. my main.js contain:

import VueYouTubeEmbed from 'vue-youtube-embed'; 
Vue.use(VueYouTubeEmbed);

in component.vue

<youtube :id="item.link" :video-id="item.link" player-width="100%" player-height="325px"></youtube>

i use v-for, because i have several video items

as i understand, i need to add @playing event listener on <youtube /> but i cant understand how works pause() method, can you help with it?

hardusik avatar Sep 23 '20 12:09 hardusik

Yeah, add playing event to your component instance and after that, assign the value to a variable:

<youtube :id="item.link" :video-id="item.link" player-width="100%" player-height="325px" @playing="createVideoElement"></youtube>

<button @click="pause()">Pause</button>

Then, In your JS do someting like this:

data() {
	return { 
                videoElem: ""
        }
},
methods: {
      getVideoElem(event) {
                this.videoElem = event
       },
       pause() {
                this.videoElem.pauseVideo()
       }
}

First you need a variable to save the video instance, having it you just need to apply the pauseVideo().

jonalxh avatar Sep 23 '20 21:09 jonalxh