I have a div that has a full width video with position:absolute, that plays when clicking an image, and some text on top of the video.
What I want is when I click the play button for the text on top to fade out and after the text fades out, for the video to fade in and as well when I click the pause button for the video to fade out and after for the text to fade in.
I achieved something close to what I want but for some reason I cannot delay the video fadein the first time I click the play button. After the second click it seems to work fine.
Here is my code:
`<video preload="none" id="myVideo" width="100%" >
<source src="wp-content/themes/quill/images/video.mp4" type="video/mp4">
</video>`
`<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
<script>
$("#play").click(function(){
$("#pause").fadeIn(1000);
$("#myVideo").delay(1500).fadeIn(2000);
$("#play").fadeOut(1000);
$(".toph1").fadeOut(1000);
$(".toph2").fadeOut(1000);
$(".introduction").fadeOut(1000);
$(".howitworks").fadeOut(1000);
$(".logo").fadeOut(1000);
});
</script>
<script>
$("#pause").click(function(){
$("#play").fadeIn(1000);
$(".toph1").fadeIn(1000);
$(".toph2").fadeIn(1000);
$(".introduction").fadeIn(1000);
$(".howitworks").fadeIn(1000);
$(".logo").fadeIn(1000);
$("#pause").fadeOut(1000);
$("#myVideo").fadeOut(0);
});
</script>`
I added the scripts at the bottom of the page.
If you want to have a delay, try to use timeout function:
setTimeout(function() {
// do here..
}, 750)
Fadeout has another optional parameter that can be passed for an on complete function:
$( "#div" ).fadeOut( "slow", function() {
setTimeout(function() {vid.play();}, 750)
});
the function in the above call will only be triggered once the fadeout animation has completed. You will need to change #div to the correct ID.
http://api.jquery.com/fadeout/#fadeOut-duration-complete
Related
I Want to Like This
<script>
$("video").on("click", function() {
// All but not this one - pause
$("video").not( this ).each(function() {
this.pause();
});
// Play this one
// this.play();
// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();
});
<video id=”myVideo” src="<?php echo $_REQUEST['video']; ?>"></video>
anyone can please help me please above is my code.
Thanks STACKOVERFLOW
Use the poster attribute and a class to add some style, and remove them on the canplay event.
$('video').on('loadstart waiting seeking stalled', function (event) {
$(this).addClass('loading');
});
$('video').on('canplay seeked play', function (event) {
$(this).removeClass('loading');
});
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video src="/videos/movie.mp4" poster="/images/poster.jpg" controls></video>
How can i Fadeout Youtube Video on click into video, without mute music background.?
jQuery(document).ready(function() {
jQuery("div.ytp-scalable-icon-shrink").click(function() {
jQuery("#auto_hide").delay(15000).fadeOut("slow");
});
});
Do not use fade out use opacity instead.
jQuery(document).ready(function() {
jQuery("div.ytp-scalable-icon-shrink").click(function() {
jQuery("#auto_hide").delay(15000).aniamte({
oapcity: "0"
}, 1000);
});
});
I have the following example of BXSlider, where I have 4 slides each having a Youtube video. The problem is that when I play a video and go to the next slide, it keeps on playing:
http://jsfiddle.net/isherwood/XWL9Y/
$(document).ready(function () {
$('.bxslider').bxSlider();
});
Can someone help out to make the youtube video pause when going to the next slide?
var slider = $("#gallery").bxSlider({
adaptiveHeight:true,
auto:true,
autoStart:true,
autoControls:true,
video:true,
onSlideAfter: function(slide){
if (slide.find("iframe:first").length) {
slider.stopAuto();
}
}
});
You might also be able to use something like slide.find("div.fluid-width-video-wrapper:first") if you use iframes for other things in the in the slider.
Source
----Update----
var slider = $('.bxslider').bxSlider({
onSlideAfter: function(slide, oldindex, currentSlide){
oldSlide = $( '.bxslider > li:nth-child(' + (oldindex+1) + ')');
youtubeVideo = oldSlide.find('iframe[src*=youtube]');
if ( youtubeVideo.length ) {
youtubeVideo.get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
}
}
});
Source
----Edit----
Also make sure to add ?enablejsapi=true to the the iframe src, otherwise the above JavaScript will not work (source).
After long search i found the solution. Try this:
onSlideAfter: function(){
jQuery("iframe").each(function() {
var src= jQuery(this).attr('src');
jQuery(this).attr('src',src);
});
}
This will stop all videos. It is basically resetting the video urls.
I am injecting a video element into a div on click.
However, I can't get any events to run on that video there after.
Specifically, I want a pause button and for it to fade out when ended.
I can get it to work if I just put in in the html normally - so it must be that it doesn't know it's there when injected?
$('#play-video').on( 'click', function() {
$(this).fadeOut();
$("#video-container").html("<video controls class='fillWidth' style='width:100%;' id='full-video'><source src='http://brightcove.vo.llnwd.net/yaddayadda'/><source src='http://sitedsfa.com/yaddayadda' type='video/webm' /></video>");
$('#close-video').fadeIn();
});
$('#close-video').on('click', function() {
$('#full-video').pause();
});
$('#full-video').bind('ended', function(){
alert('video is over');
});
In a codepen: HERE
Any experience with this? Thanks.
You cannot execute video element methods on the $-wrapped element.
var $video = $('#some-video');
//**NOT OK**
$video.play();
//**OK** - executing the method on the base html video element
var video = $video[0];
video.play();
Here is a working example
try this.
$('#play-video').on( 'click', function() {
$("#video-container").html("<video controls class='fillWidth' style='width:100%;' id='full-video'><source src='http://brightcove.vo.llnwd.net/yaddayadda'/><source src='http://sitedsfa.com/yaddayadda' type='video/webm' /></video>");
$(this).fadeOut('fast' , function() {
$("#full-video")[0].play();
$('#close-video').fadeIn();
});
});
$('#close-video').on('click', function() { $('#full-video')[0].pause(); });
$('#full-video').bind('ended', function(){ alert('video is over'); });
I want to hide iframe and show image thumbnail when iframe video
playback reaches the end. But none of the Vimeo player api event
working. Can anybody help me? Here is my code:
fiddle
$("#video .playBtnOrangeMid").click(function(){
$(this).hide();
$("#video1").attr("src","http://player.vimeo.com/video/69185765?color=de641b&autoplay=1&api=1&player_id=video1");
$("#video").css("background","none");
var iframe = $('#video1')[0],
player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', function(){
$("#video .playBtnOrangeMid").show();
$("#video1").attr("src","");
$("#video").css("background","url(../images/thumb1.png)");
});
});
});