Here is A Button , A Video Player and some code with a link to an example here. https://iammany71.wixsite.com/mysite-1
When the button is clicked , a video appears and then plays. When the video is finished, it loads a new page. I’m looking for code to pause the video on the Last Frame before it loads the next page that I chose.
This is the code:
import wixlocation from "wix-location";
$w.onReady(function () {
});
export function button1_click(event) {
$w("#videoPlayer1").show(); // un-hides the videoplayer
$w("#videoPlayer1").play(); // plays the video
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
export function videoPlayer1_ended(event) {
//Right here is where i need the code to pause the video on the last frame
wixlocation.to("https://iammany71.wixsite.com/mysite-1/next-page-that-loads-after-video-he"); // loads next url
}
URL to Example Page
https://iammany71.wixsite.com/mysite-1
Thank you
Marc 
This could work in a combination with setTimeout().
setTimeout(function() {$w("#myVideoPlayer").pause();}, 5000);
Pause myVideoPlayer after 5-sec.
Therefore you would have to put in the exact playing/stoping time.
As @russian-dima said you could use setTimeout().
" Therefore you would have to put in the exact playing/stoping time."
So, to get the exact stopping time, you can make use of duration
let duration = $w("#myVideoPlayer").duration
The above function ‘Gets the total play time of the current video, in seconds.’
→ Be sure that you convert the variable duration into milliseconds because →
The setTimeout() method calls a function or evaluates an expression after a
specified number of milliseconds.
So, for converting seconds to milliseconds → multiply the time value by 1000
Something like this →
let duration = $w("#myVideoPlayer").duration;
let timeOut = Number(duration) * Number(1000);
setTimeout(function() {$w("#myVideoPlayer").pause()}, timeOut);
Well done Ajit! Good idea!
Just one more suggestion…
If this should not work properly…
let duration = $w("#myVideoPlayer").duration;
let timeOut = Number(duration) * Number(1000);
setTimeout(function() {$w("#myVideoPlayer").pause();}, timeOut);
…then —> timeOut - 1
i do not know the exact behaviour of the player. Will it pause at the very last frame, or will it already end. So, to be sure that the video will not end completely, you subtract 1-millisecond (just to be sure).
@russian-dima Also there is an error in the code →
We should change this →
let duration = $w("#myVideoPlayer").duration;
let timeOut = Number(duration) * Number(1000);
setTimeout(function() {$w("#myVideoPlayer").pause();}, timeOut);
to this →
let duration = $w("#myVideoPlayer").duration;
let timeOut = Number(duration) * Number(1000);
setTimeout(function() {$w("#myVideoPlayer").pause()}, timeOut);
There is no need for the ; in the setTimeout() (just after the pause() function)
Thank you both of you.
I’ve made the changes. It’s pausing too early.
https://iammany71.wixsite.com/mysite-1
Current Issue is that the video pauses too early and on random frames. If connection is too slow
it will cause the video to temporarily freeze , but the timer keeps ticking causing for an early pause in the
video. I think this is why the inconsistent destination of frames
Here an example which will show you how the player works and which are the time-differences between played-time and setted time.
Test it by yourself…
https://www.media-junkie.com/video-stop
$w.onReady(function () {
let duration = $w("#videoPlayer1").duration;
console.log(duration)
$w('#TXT1').text = duration.toString()
});
export function BTNset_click(event) {
$w('#TXTplaytime').text = ""
$w('#TXTdifference').text = ""
$w('#TXTresttime').text = ""
let duration = $w("#videoPlayer1").duration;
let difference
let playtime
let restTime
let timeOut = Number($w('#input1').value) * Number(1000);
$w('#TXTtimeout').text = timeOut.toString()
setTimeout(function() {
playtime = $w("#videoPlayer1").currentTime * 1000
difference = timeOut - playtime
restTime = duration * 1000 - playtime
$w("#videoPlayer1").pause(),
$w('#TXTplaytime').text=playtime.toString()
$w('#TXTdifference').text=difference.toString()
$w('#TXTresttime').text=restTime.toString()
console.log("Play-Time = " + playtime)
console.log("Difference = " + (timeOut - playtime))
}, timeOut);
$w("#videoPlayer1").play()
}
After you have done some testings, you will see that the player pause before the setted TimeOut comes. And its not just 1-millisecond as expected, it’s a little bit more.
@russian-dima Wow !! Good job man. Thank you.
I repeated the test three times with the number 29 and got different results. Is this due to a poor internet connection ?
Yes it could be the reason.
Awesome I got it working. Thanks guys.
Example https://iammany71.wixsite.com/mysite-1
import wixlocation from "wix-location";
$w.onReady(function () {
let duration = $w("#videoPlayer1").duration;
console.log(duration)
});
export function button1_click(event) {
$w("#videoPlayer1").show(); // un-hides the videoplayer
$w("#videoPlayer1").play(); // plays the video
let timeOut = Number(8) * Number(1000);
setTimeout(function() {$w("#videoPlayer1").pause()}, timeOut);
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
export function videoPlayer1_pause(event) {
wixlocation.to("https://iammany71.wixsite.com/mysite-1/next-page-that-loads-after-video-he"); // loads next url
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
Well done. There are sure some more options which you can do,
for example to take another multiplier and change the multiplier for milliseconds from 1000 to 1100 for example. This would balance your weak connection.
I hope you understand what i mean.
Therefore you could create a SLIDER with options like (900/1000/1100/1200).
Moving slider to left would reduce the multiplier, moving the slider to the right, would set a higher multiplier.
I wanted to implement it also to my example, but i think you will also be able to do it, if you are interessted in it.
Good luck with your project!
@russian-dima Hell yeah , I’m interested. That’s a cool idea.
@russian-dima Is there a way to test a user’s connection speed ? If so then maybe i could use that number to calculate the best multiplier number for the job and then apply it to a variable in the timeout.
@iammany71
Perhaps this one…
@russian-dima Oh man, Wix just keeps getting better and better. I’m new to Wix so my mind is still getting blown. Thanx man.
@iammany71
You are welcome.
Hello, this is exactly what I would like to have on my website as well. I am not a coder, : (
Which parts of the above are the code to embed so that when my video stops it loads a static image (the last frame of the video). Thank you in advance for your help.
