Loop fade in and out on video using jquery
1
Im trying to fade in on a video once it starts, fade out once it has ended and restart after, but I cant seem to get the right result.
Here is what I have to far:
var video = $('.central-video-wrapper video');
video.on('ended', function() {
video.fadeOut('slow');
video.load( function(){
video.fadeIn('slow');
});
});
javascript jquery
asked Nov 20 '18 at 9:15
Giurgiteanu Paul Mihai
82
|
show 4 more comments
1
Im trying to fade in on a video once it starts, fade out once it has ended and restart after, but I cant seem to get the right result.
Here is what I have to far:
var video = $('.central-video-wrapper video');
video.on('ended', function() {
video.fadeOut('slow');
video.load( function(){
video.fadeIn('slow');
});
});
javascript jquery
asked Nov 20 '18 at 9:15
Giurgiteanu Paul Mihai
82
What do you mean by and restart after? Fade out when end and then restart video and fade in?
– Mohammad
Nov 20 '18 at 9:19
Basically fade in once the page loads and fade out once the video ends and also loops.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:22
Your code work on end. jsfiddle.net/q23dgthx
– Mohammad
Nov 20 '18 at 9:23
Any errors? what happens when you run your code?
– Colin Cline
Nov 20 '18 at 9:25
Well yeah but it doesnt restart the video after the fade out. :)
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:26
|
show 4 more comments
1
1
1
0
Im trying to fade in on a video once it starts, fade out once it has ended and restart after, but I cant seem to get the right result.
Here is what I have to far:
var video = $('.central-video-wrapper video');
video.on('ended', function() {
video.fadeOut('slow');
video.load( function(){
video.fadeIn('slow');
});
});
javascript jquery
asked Nov 20 '18 at 9:15
Giurgiteanu Paul Mihai
82
Im trying to fade in on a video once it starts, fade out once it has ended and restart after, but I cant seem to get the right result.
Here is what I have to far:
var video = $('.central-video-wrapper video');
video.on('ended', function() {
video.fadeOut('slow');
video.load( function(){
video.fadeIn('slow');
});
});
javascript jquery
javascript jquery
asked Nov 20 '18 at 9:15
Giurgiteanu Paul Mihai
82
asked Nov 20 '18 at 9:15
Giurgiteanu Paul Mihai
82
asked Nov 20 '18 at 9:15
Giurgiteanu Paul Mihai
82
asked Nov 20 '18 at 9:15
Giurgiteanu Paul Mihai
82
asked Nov 20 '18 at 9:15
Giurgiteanu Paul Mihai
82
82
What do you mean by and restart after? Fade out when end and then restart video and fade in?
– Mohammad
Nov 20 '18 at 9:19
Basically fade in once the page loads and fade out once the video ends and also loops.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:22
Your code work on end. jsfiddle.net/q23dgthx
– Mohammad
Nov 20 '18 at 9:23
Any errors? what happens when you run your code?
– Colin Cline
Nov 20 '18 at 9:25
Well yeah but it doesnt restart the video after the fade out. :)
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:26
|
show 4 more comments
What do you mean by and restart after? Fade out when end and then restart video and fade in?
– Mohammad
Nov 20 '18 at 9:19
Basically fade in once the page loads and fade out once the video ends and also loops.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:22
Your code work on end. jsfiddle.net/q23dgthx
– Mohammad
Nov 20 '18 at 9:23
Any errors? what happens when you run your code?
– Colin Cline
Nov 20 '18 at 9:25
Well yeah but it doesnt restart the video after the fade out. :)
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:26
What do you mean by and restart after? Fade out when end and then restart video and fade in?
– Mohammad
Nov 20 '18 at 9:19
What do you mean by and restart after? Fade out when end and then restart video and fade in?
– Mohammad
Nov 20 '18 at 9:19
Basically fade in once the page loads and fade out once the video ends and also loops.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:22
Basically fade in once the page loads and fade out once the video ends and also loops.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:22
Your code work on end. jsfiddle.net/q23dgthx
– Mohammad
Nov 20 '18 at 9:23
Your code work on end. jsfiddle.net/q23dgthx
– Mohammad
Nov 20 '18 at 9:23
Any errors? what happens when you run your code?
– Colin Cline
Nov 20 '18 at 9:25
Any errors? what happens when you run your code?
– Colin Cline
Nov 20 '18 at 9:25
Well yeah but it doesnt restart the video after the fade out. :)
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:26
Well yeah but it doesnt restart the video after the fade out. :)
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:26
|
show 4 more comments
2 Answers
2
active
oldest
votes
1
You should use play and ended event for your purpose and in event handler use fadeIn() and fadeOut()
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
});
But if you want to fadeOut video onend and then fadeIn it and play it again, you can use setTimeout() and in it function use .play() to playing video.
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
setTimeout(function(){
video[0].duration = 0;
video[0].play();
}, 1000)
});
Check result in jsfiddle
answered Nov 20 '18 at 10:10
Mohammad
15.3k123261
The second code is definitely what im looking for. However I get "Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>" once the video ends and also the fade in does not happen when page loads.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 10:38
@GiurgiteanuPaulMihai Check jsfiddle.net/kLra95h2/1
– Mohammad
Nov 20 '18 at 10:43
Once the video ends I get "TypeError: Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>'" . The fade in and out works alright :) but the loop doesnt happen. :(
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:02
@GiurgiteanuPaulMihai So removevideo[0].duration = 0;part of code, Video played from first automatically
– Mohammad
Nov 20 '18 at 11:06
It worked ! Thank you so much ! You saved me hours of attempting hours of workarounds.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:40
add a comment |
0
You need to do that in callback function
video.on('ended', function() {
video.fadeOut('slow',function(){
video.load( function(){
video.fadeIn('slow');
});
});
});
answered Nov 20 '18 at 9:17
Ahmad
8,19743463
I have tried this and i got "Uncaught TypeError: url.indexOf is not a function". I did change video.load(function() { to video.on('load', function() { which fixed the error but the looping still doesnt happen.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389691%2floop-fade-in-and-out-on-video-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You should use play and ended event for your purpose and in event handler use fadeIn() and fadeOut()
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
});
But if you want to fadeOut video onend and then fadeIn it and play it again, you can use setTimeout() and in it function use .play() to playing video.
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
setTimeout(function(){
video[0].duration = 0;
video[0].play();
}, 1000)
});
Check result in jsfiddle
answered Nov 20 '18 at 10:10
Mohammad
15.3k123261
The second code is definitely what im looking for. However I get "Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>" once the video ends and also the fade in does not happen when page loads.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 10:38
@GiurgiteanuPaulMihai Check jsfiddle.net/kLra95h2/1
– Mohammad
Nov 20 '18 at 10:43
Once the video ends I get "TypeError: Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>'" . The fade in and out works alright :) but the loop doesnt happen. :(
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:02
@GiurgiteanuPaulMihai So removevideo[0].duration = 0;part of code, Video played from first automatically
– Mohammad
Nov 20 '18 at 11:06
It worked ! Thank you so much ! You saved me hours of attempting hours of workarounds.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:40
add a comment |
1
You should use play and ended event for your purpose and in event handler use fadeIn() and fadeOut()
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
});
But if you want to fadeOut video onend and then fadeIn it and play it again, you can use setTimeout() and in it function use .play() to playing video.
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
setTimeout(function(){
video[0].duration = 0;
video[0].play();
}, 1000)
});
Check result in jsfiddle
answered Nov 20 '18 at 10:10
Mohammad
15.3k123261
The second code is definitely what im looking for. However I get "Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>" once the video ends and also the fade in does not happen when page loads.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 10:38
@GiurgiteanuPaulMihai Check jsfiddle.net/kLra95h2/1
– Mohammad
Nov 20 '18 at 10:43
Once the video ends I get "TypeError: Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>'" . The fade in and out works alright :) but the loop doesnt happen. :(
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:02
@GiurgiteanuPaulMihai So removevideo[0].duration = 0;part of code, Video played from first automatically
– Mohammad
Nov 20 '18 at 11:06
It worked ! Thank you so much ! You saved me hours of attempting hours of workarounds.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:40
add a comment |
1
1
1
You should use play and ended event for your purpose and in event handler use fadeIn() and fadeOut()
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
});
But if you want to fadeOut video onend and then fadeIn it and play it again, you can use setTimeout() and in it function use .play() to playing video.
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
setTimeout(function(){
video[0].duration = 0;
video[0].play();
}, 1000)
});
Check result in jsfiddle
answered Nov 20 '18 at 10:10
Mohammad
15.3k123261
You should use play and ended event for your purpose and in event handler use fadeIn() and fadeOut()
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
});
But if you want to fadeOut video onend and then fadeIn it and play it again, you can use setTimeout() and in it function use .play() to playing video.
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
setTimeout(function(){
video[0].duration = 0;
video[0].play();
}, 1000)
});
Check result in jsfiddle
answered Nov 20 '18 at 10:10
Mohammad
15.3k123261
answered Nov 20 '18 at 10:10
Mohammad
15.3k123261
answered Nov 20 '18 at 10:10
Mohammad
15.3k123261
answered Nov 20 '18 at 10:10
Mohammad
15.3k123261
15.3k123261
The second code is definitely what im looking for. However I get "Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>" once the video ends and also the fade in does not happen when page loads.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 10:38
@GiurgiteanuPaulMihai Check jsfiddle.net/kLra95h2/1
– Mohammad
Nov 20 '18 at 10:43
Once the video ends I get "TypeError: Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>'" . The fade in and out works alright :) but the loop doesnt happen. :(
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:02
@GiurgiteanuPaulMihai So removevideo[0].duration = 0;part of code, Video played from first automatically
– Mohammad
Nov 20 '18 at 11:06
It worked ! Thank you so much ! You saved me hours of attempting hours of workarounds.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:40
add a comment |
The second code is definitely what im looking for. However I get "Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>" once the video ends and also the fade in does not happen when page loads.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 10:38
@GiurgiteanuPaulMihai Check jsfiddle.net/kLra95h2/1
– Mohammad
Nov 20 '18 at 10:43
Once the video ends I get "TypeError: Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>'" . The fade in and out works alright :) but the loop doesnt happen. :(
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:02
@GiurgiteanuPaulMihai So removevideo[0].duration = 0;part of code, Video played from first automatically
– Mohammad
Nov 20 '18 at 11:06
It worked ! Thank you so much ! You saved me hours of attempting hours of workarounds.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:40
The second code is definitely what im looking for. However I get "Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>" once the video ends and also the fade in does not happen when page loads.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 10:38
The second code is definitely what im looking for. However I get "Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>" once the video ends and also the fade in does not happen when page loads.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 10:38
@GiurgiteanuPaulMihai Check jsfiddle.net/kLra95h2/1
– Mohammad
Nov 20 '18 at 10:43
@GiurgiteanuPaulMihai Check jsfiddle.net/kLra95h2/1
– Mohammad
Nov 20 '18 at 10:43
Once the video ends I get "TypeError: Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>'" . The fade in and out works alright :) but the loop doesnt happen. :(
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:02
Once the video ends I get "TypeError: Cannot assign to read only property 'duration' of object '#<HTMLVideoElement>'" . The fade in and out works alright :) but the loop doesnt happen. :(
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:02
@GiurgiteanuPaulMihai So remove
video[0].duration = 0; part of code, Video played from first automatically– Mohammad
Nov 20 '18 at 11:06
@GiurgiteanuPaulMihai So remove
video[0].duration = 0; part of code, Video played from first automatically– Mohammad
Nov 20 '18 at 11:06
It worked ! Thank you so much ! You saved me hours of attempting hours of workarounds.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:40
It worked ! Thank you so much ! You saved me hours of attempting hours of workarounds.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 11:40
add a comment |
0
You need to do that in callback function
video.on('ended', function() {
video.fadeOut('slow',function(){
video.load( function(){
video.fadeIn('slow');
});
});
});
answered Nov 20 '18 at 9:17
Ahmad
8,19743463
I have tried this and i got "Uncaught TypeError: url.indexOf is not a function". I did change video.load(function() { to video.on('load', function() { which fixed the error but the looping still doesnt happen.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:34
add a comment |
0
You need to do that in callback function
video.on('ended', function() {
video.fadeOut('slow',function(){
video.load( function(){
video.fadeIn('slow');
});
});
});
answered Nov 20 '18 at 9:17
Ahmad
8,19743463
I have tried this and i got "Uncaught TypeError: url.indexOf is not a function". I did change video.load(function() { to video.on('load', function() { which fixed the error but the looping still doesnt happen.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:34
add a comment |
0
0
0
You need to do that in callback function
video.on('ended', function() {
video.fadeOut('slow',function(){
video.load( function(){
video.fadeIn('slow');
});
});
});
answered Nov 20 '18 at 9:17
Ahmad
8,19743463
You need to do that in callback function
video.on('ended', function() {
video.fadeOut('slow',function(){
video.load( function(){
video.fadeIn('slow');
});
});
});
answered Nov 20 '18 at 9:17
Ahmad
8,19743463
answered Nov 20 '18 at 9:17
Ahmad
8,19743463
answered Nov 20 '18 at 9:17
Ahmad
8,19743463
answered Nov 20 '18 at 9:17
Ahmad
8,19743463
8,19743463
I have tried this and i got "Uncaught TypeError: url.indexOf is not a function". I did change video.load(function() { to video.on('load', function() { which fixed the error but the looping still doesnt happen.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:34
add a comment |
I have tried this and i got "Uncaught TypeError: url.indexOf is not a function". I did change video.load(function() { to video.on('load', function() { which fixed the error but the looping still doesnt happen.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:34
I have tried this and i got "Uncaught TypeError: url.indexOf is not a function". I did change video.load(function() { to video.on('load', function() { which fixed the error but the looping still doesnt happen.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:34
I have tried this and i got "Uncaught TypeError: url.indexOf is not a function". I did change video.load(function() { to video.on('load', function() { which fixed the error but the looping still doesnt happen.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:34
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389691%2floop-fade-in-and-out-on-video-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What do you mean by and restart after? Fade out when end and then restart video and fade in?
– Mohammad
Nov 20 '18 at 9:19
Basically fade in once the page loads and fade out once the video ends and also loops.
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:22
Your code work on end. jsfiddle.net/q23dgthx
– Mohammad
Nov 20 '18 at 9:23
Any errors? what happens when you run your code?
– Colin Cline
Nov 20 '18 at 9:25
Well yeah but it doesnt restart the video after the fade out. :)
– Giurgiteanu Paul Mihai
Nov 20 '18 at 9:26