We Keep Coding

how can i show loading gif when video loading from database like youtube

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>

Loop fade in and out on video using jquery

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');
});
});

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

You need to do that in callback function
video.on('ended', function() {
video.fadeOut('slow',function(){
video.load( function(){
video.fadeIn('slow');
});
});
});

Delay video after clicking play button

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

BXSlider Pause Youtube Video When Switching Slides

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.

vimeo player events not working

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)");
});
});
});