We Keep Coding

Autoplay html5 video when another one end just once

I'm pretty sure this is a simple question, but I have no idea how to do it.
$(".options .option1").click(function() {
var video = $("#video1").get(0);
video.play();
return false;
});
$('#video1').bind('ended', function () {
$('.option-profesional').addClass('open');
setTimeout(function(){
var video = $("#video2").get(0);
video.play();
return false;
}, 4250);
});
And this:
$(".options .option2").click(function() {
var video = $("#video2").get(0);
video.play();
return false;
});
$('#video2').bind('ended', function () {
$('.option-personal').addClass('open');
setTimeout(function(){
var video = $("#video1").get(0);
video.play();
return false;
}, 4250);
});
So... I start one video "personal or profesional" by clicking a button. When this video ends start the second video and vice versa. Which it's basically a bucle.
What I'm looking for it's to stop that bucle. So when you already watched the first one don't start this one when the second one ends.
For dummys, because I'm pretty bad explaining this:
What I want:
video1 > video2 > END (by showing a text or something.)
video2 > video1 > END (by showing a text or something.)
What it's currently doing my code:
video2 > video1 > video2 > video1 > video2 > video1... and vice versa.
Thank you!

Since your checking with jQuery that if a video is ended by binding (ended), how about you make a Flag, when video2 is completed, change the flag to true and wrap the video playing script inside of an if statement. This way you can show a message or do whatever you like. Repeat for condition 2, video2 > video1> turn it to true when video1 is ended and wrap it inside of an if statement, then compare. Does this help a bit?
So something like this:
video_status = false;
if (video_status == false) {
$(".options .option1").click(function() {
var video = $("#personal").get(0);
video.play();
return false;
});
$('#video1').bind('ended', function () {
$('.option-profesional').addClass('open');
setTimeout(function(){
var video = $("#profesional").get(0);
video.play();
video_status = true; // < This condition should end this run. On refresh or reload the condition resets to false and repeats.
return false;
}, 4250);
});
}

Hide/Show top bar on mouse move and show when video on pause

i am working on a video player and on that video player i have a div called #caption, when i play the video i hide the div and when i pause the video i show the div. This all works fine. Now i added a small part of javascript that shows the div when i move the mouse and hides the div again if i stop moving the mouse with a timeout. This works fine as well. However, if i pause the video and i move the mouse the #caption also hides with the time out. How do i prevent this piece of javascript to fire when the player is in pause, so the #caption is always visible when the video is paused.
var video = $('#thevideo')[0];
video.addEventListener('pause', function () {
$('#caption').show();
})
video.addEventListener('playing', function () {
$('#caption').delay(2500).fadeOut();
})
var i = null;
$("#videoContainer").mousemove(function () {
clearTimeout(i);
$("#caption").fadeIn();
i = setTimeout(function () {
$("#caption").fadeOut();
}, 2500);
})
<video src="iamavideo.mp4" id="thevideo"></video>
<div id="caption">hi there!</div>

Modified your example to add in the #videoContainer, and put the elements above the script so they're found.
Added code to cancel the #caption fadeout timer if it's been set when the video pause button is pressed.
Added a test to the mousemove to only start the fadeout if the video is playing (not paused).
<div id="videoContainer">
<video controls muted src="BigBuck.mp4" id="thevideo"></video>
<div id="caption">hi there!</div>
</div>
<script>
var video = $('#thevideo')[0];
var i = null;
video.addEventListener('pause', function () {
$('#caption').show();
// video has paused, so if the caption fadeout timer has started, cancel it
clearTimeout(i);
})
video.addEventListener('playing', function () {
$('#caption').delay(2500).fadeOut();
})
$("#videoContainer").mousemove(function () {
clearTimeout(i);
// only start the timer if the video is not paused
if (!video.paused) {
$("#caption").fadeIn();
i = setTimeout(function () {
$("#caption").fadeOut();
}, 2500);
}
})
</script>

preload next song before end of the current song

i have one issue related jplayer. i am using jplayer for play song in my site right now i am fetching song using ajax call and add that song into jplayer playlist and now its working fine
my question is is there any option to ready next song before end of current song because when i try it with less then 1 minute song its working fine but when i have each song duration more then 4 minutes its take 3 to 4 seconds to load new song
this is my code for load song in jpalyer playlist
// for create jplayer and add song in playlist
function play_music(songobj) {
is_play = 1;
// $("#jquery_jplayer_1").jPlayer("destroy");
var playlist_length = songobj.length;
myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_N"
},songobj, {
playlistOptions: {
enableRemoveControls: true,
autoPlay: true
},
supplied: "oga, mp3",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
ended : function(){
if(playlist_length == currlength){
// alert('end playlist');
is_play = 0
location.reload();
}
else{
/*if( == ){
console.log('yesssssss');
}*/
// console.log(play_index[index_key]);
// console.log(playlist_obj[currlength]);
loop = 1;
currlength += 1;
var songindex = song_index[currlength - 1];
var listindex = playlist_obj[index_key];
if(song_index[currlength - 1] == playlist_obj[index_key]){
index_key += 1;
$("#jquery_jplayer_1").jPlayer("pause", 0);
console.log('playlist over start next');
setTimeout(function() {
$("#jquery_jplayer_1").jPlayer("play", 0);
}, $('#timeout').val()*1000);
}
}
},
});
}
also if there are any options for preload all song before play, please guide me this is very important for me
thanks

Behind the scenes their is only one audio source even for playlist. jPlayer & jPlaylist are just wrappers.
This means that you can't load the next song before the current ends because that would require changing the audio source which would change the song.
Their is no built in way to do this. Maybe their is a way such as having another hidden jPlayer on the page and load the next song and somehow copying the data over without having to load but I am not sure and you probably shouldn't even have to do this.
3-4 seconds to load seems weird though, it should only load the metadata as default and in the below example for a 5 min+ song it's 46KB...
Maybe their is something wrong with your .mp3, .ogg urls. Can you post them?
This loads instantly for example:
http://jsfiddle.net/Ls8p90y9/175/
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Bubble",
mp3: "http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"
});
},
timeupdate: function(event) {
$("#jp_container_1 .jp-ball").css("left",event.jPlayer.status.currentPercentAbsolute + "%");
},
supplied: "mp3",
});
Try messing with the preload option:
preload
String : (Default: "metadata") : Valid values are "none", "metadata" and "auto", which matches the HTML5 draft standard. Use "auto" to preload the file.
Preload is a hint to the user agent, not a command. Some browsers ignore this option.

How can you stop a Slick Slider animation when a YouTube video starts playing using the Google IFrame Player API?

I have a video that is included in my Slick Slider. According to the Slick documentation you need to initialize the slider when the document is ready, however, I am not able to add the Google Youtube Iframe Player API inside of this same document.ready statement. As these two are separated my console warns me that slider cannot be found (variable set to the slick slider). Below is an example of my code. My goal is to turn off the Slick Slider animation when starting the YouTube video and turn on the animation when the YouTube video stops. As it stands on the first video play the slider animation does not end and rotates to the next slide. How can I make the slider stop animating when playing the video but start when stopping the video?
===== JavaScript =====
$(document).ready(function(){
var slider = $('.mainSlider').slick({
slidesToShow: 1,
autoplay: false,
autoplaySpeed: 5000
});
slider.slickPlay();
$('.mainSlider').on('beforeChange', function(){
line.set(0);
line.animate(1.0);
});
});
/* youtube video in slider */
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '400',
width: '100%',
videoId: 'nisAy26sItM',
events: {
'onStateChange':onPlayerStateChange
}
});
}
//when the video starts to play move the introduction content down
var done = false;
function onPlayerStateChange(event) {
if ( event.data == 1)
{
//move the introduction content down
$('#introContent').animate({top: '0px' }, 500 );
$('#services').animate({'margin-top': '0px'}, 500);
// if you play the video then you need to get rid of bxSlider autoplay
console.log('pause');
slider.slickPause();
}
if ( event.data == -1 || event.data == 2)
{
$('#introContent').animate({top:'-165px'}, 500);
$('#services').animate({'margin-top': '-100px'}, 500);
line.stop();
$('.mainSlider').slick('slickPlay');
}
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
//when the video stops move the introduction content back to were it was

Fade out volume on pause for mediaelementJS

What is the best way to fade out volume on pause for mediaelementJS player?
It works fine to set media.volume = 0.0, and then use jQuery to animate the volume up for play listener. But for the pause listener, audio is paused before I get any chance to fade the audio out.
var volumeSet = 0.8; //Default volume
var player = new MediaElementPlayer('video,audio',{
success: function (media, domObject) {
//This works fine
media.addEventListener('play', function() {
media.volume = 0;
$('video,audio').animate({volume: volumeSet}, 1000, "swing");
}, false)
//This 'works', but lags as its needed to be re-played after pause
media.addEventListener('pause', function(e) {
if (media.volume>0) {
volumeSet = media.volume;
media.play();
$('video,audio').animate({volume: 0.0}, 1000, "swing", function(){
media.pause();
});
}
}, false);
}
});