Manual Load() method does not work

[vikrantRajan]

I feel that the documentation is not clear about how to use the manual load, pause, play and restart methods.

I used the code snippet from here: https://bkwld.github.io/vue-visual/?path=/story/assets--video

However it seems that the load, pause, play and restart methods need to be manually created/defined in my component methods. In your example, all these methods are hidden, I don't know what they are supposed to be doing?

The documentation says to use load on a click event, but what is it supposed to do? how do I actually get the video/image to load after clicking on a button? It is not mentioned anywhere.

My assumption is that I have to add soemthing like this (see below). and then define what happens when you click on load. But i have no idea how to make it work. Please help?

methods: {
load() {
...
},
pause() {
...
},
play() {
...
},
restart() {
...
}
}

Your example code:

<div>
  <div style='margin-bottom: 0.5em'>
<!-- NONE OF THESE BUTTONS WORK CAUSE THE METHODS ARE NOT DEFINED, THE EXAMPLE ON THE WEBSITE DOES NOT SHOW HOW TO HANDLE THESE METHODS, HENCE IT IS NOT USEABLE -->
  <button @click='load'>Load</button>  
  <button @click='pause'>Pause</button>
    <button @click='play'>Play</button>
    <button @click='restart'>Restart</button>
  </div>
  <visual 
    ref='visual' 
    :video='video' 
    :autoload='autoload'
    :autoplay='autoplay'
    :loop='loop'
    muted
    width='100%' />
</div>

[weotch]

Here's how this is expected to work:

<template>
  <div>
    <button @click="$refs.visual.play()">Play</button>
    <button @click="$refs.visual.pause()">Pause</button>
    <visual
      video="https://bkwld.github.io/vue-visual/static/media/video.e6950ba2.mp4"
      ref="visual" />
  </div>
</template>

<script>
import VueVisual from "vue-visual";
import "vue-visual/index.css";
export default {
  components: {
    visual: VueVisual,
  },
};
</script>

Demo: https://codesandbox.io/s/vue-visual-play-pause-example-e6l3s