I feel that the documentation is not clear about how to use the manual load, pause, play and restart methods.
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() {
...
}
}
<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>