I am trying to hide the video at the end and show up the image but its reloading every time. I tried all the possible way and i am very new with js.
here is my code
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
verticalCentered: true,
onLeave: function(index, nextIndex, direction){
//var img = document.getElementById("myImg");
var vid = document.getElementById("myVideo");
//var vidup = document.getElementById("yourVideo");
//var hide = document.getElementsById('yourVideo')[0].style.visibility = 'visible';
if(direction ==='down'){
$('video').each(function () {
//playing the video
$(this).get(0).play();
});
}
else if(direction ==='up'){
$('video').each(function () {
//playing the video
$(this).get(0).play();
});
}
},//onLeave END
afterRender: function () {
$('video').each(function () {
//playing the video
$(this).get(0).play();
});
}
});
});
</script>
I need help to load image after the video and evertime i comeback to the slide the video should autoplay and show the image at the end.
Related
Slider code is working OK.
But below mention code is the JS of slider which is not working because of which images are not being able to change automatically or manually
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval:3000,
pause: "false"
});
})(jQuery);
I am using the following code to play a video. What i want is to stop the video and when I rollover to start again. Now if I rollover after the video start it will continue from the point was paused
function hide_wrap () {
var wrap = $('#wrap');
if (wrap.data('hidden')) return;
wrap.animate({height: '-=250px'}, 'slow');
$('#videoContainer').hide();
$("video")[0].pause();
$("#button").hide();
wrap.data('hidden', true);
}
function show_wrap() {
var wrap = $('#wrap');
wrap.animate({height: '+=250'}, 'slow');
$('#videoContainer').css('display', 'block');
$("video")[0].play();
$('#button').css('display', 'block');
wrap.data('hidden', false);
}
You just need to set
$("video")[0].currentTime = 0;
and there you go.
I've a script that changes the play button on vimeo vids but it seems to activate all the videos on my site at the same time and not individually. I've added unique player_id=video player_id=video1, etc. You can see it live here (http://imdarrien.com/#modal2). Just click on a video and you can hear the audio play for all other videos I have.
https://jsfiddle.net/uxhxdcwp/5/
$(function () {
var iframe = document.getElementById('video');
var player = $f(iframe);
player.addEvent('ready', function () {
player.addEvent('finish', onFinish);
});
$('.playpause').click(function () {
player.api('paused', function (paused) {
if (!paused) {
player.api('pause');
$(".playpause").removeClass('pause');
} else {
player.api('play');
$(".playpause").addClass('pause');
}
});
});
function onFinish(id) {
$(".playpause").removeClass('pause');
}
});
Make sure you're only taking action on the relevant video with selectors!
$('.playpause').click(function () {
var el = $(this);
var player = $f( $(this).siblings('iframe')[0] );
player.api('paused', function (paused) {
if (!paused) {
player.api('pause');
el.removeClass('pause');
} else {
player.api('play');
el.addClass('pause');
}
});
});
I have a html5 audio player and I cant seem to figure out how to make my script automatically play the next song on the playlist after the current song has ended. Currently the player plays a song then stops. It would also be ideal that the player auto play a song if the user hits the fast forward button as well.
Here is my JS code:
jQuery(document).ready(function() {
// inner variables
var song;
var tracker = $('.tracker');
var volume = $('.volume');
function initAudio(elem) {
var url = elem.attr('audiourl');
var title = elem.text();
var cover = elem.attr('cover');
var artist = elem.attr('artist');
$('.player .title').text(title);
$('.player .artist').text(artist);
$('.player .cover').css('background-image','url(' + cover+')');;
song = new Audio(url);
// timeupdate event listener
song.addEventListener('timeupdate',function (){
var curtime = parseInt(song.currentTime, 10);
tracker.slider('value', curtime);
});
$('.playlist li').removeClass('active');
elem.addClass('active');
playAudio();
}
function playAudio() {
song.play();
tracker.slider("option", "max", song.duration);
$('.play').addClass('hidden');
$('.pause').addClass('visible');
}
function stopAudio() {
song.pause();
$('.play').removeClass('hidden');
$('.pause').removeClass('visible');
}
// play click
$('.play').click(function (e) {
e.preventDefault();
playAudio();
});
// pause click
$('.pause').click(function (e) {
e.preventDefault();
stopAudio();
});
// forward click
$('.fwd').click(function (e) {
e.preventDefault();
stopAudio();
var next = $('.playlist li.active').next();
if (next.length == 0) {
next = $('.playlist li:first-child');
}
initAudio(next);
});
// rewind click
$('.rew').click(function (e) {
e.preventDefault();
stopAudio();
var prev = $('.playlist li.active').prev();
if (prev.length == 0) {
prev = $('.playlist li:last-child');
}
initAudio(prev);
});
// show playlist
$('.pl').click(function (e) {
e.preventDefault();
$('.playlist').fadeIn(300);
});
// playlist elements - click
$('.playlist li').click(function () {
stopAudio();
initAudio($(this));
});
// initialization - first element in playlist
initAudio($('.playlist li:first-child'));
// set volume
song.volume = 0.8;
// initialize the volume slider
volume.slider({
range: 'min',
min: 1,
max: 100,
value: 80,
start: function(event,ui) {},
slide: function(event, ui) {
song.volume = ui.value / 100;
},
stop: function(event,ui) {},
});
// empty tracker slider
tracker.slider({
range: 'min',
min: 0, max: 10,
start: function(event,ui) {},
slide: function(event, ui) {
song.currentTime = ui.value;
},
stop: function(event,ui) {}
});
});
I wanted to do the same thing, but I wasn't able to for a long while. After looking up several event-listeners, I finally managed to make it work :D
function playAudio() {
song.addEventListener('ended', function () {
var next = $('.playlist li.active').next();
if (next.length == 0) {
next = $('.playlist li:first-child');
}
initAudio(next);
song.addEventListener('loadedmetadata', function () {
playAudio();
});
}, false);
tracker.slider("option", "max", song.duration);
song.play();
$('.play').addClass('hidden');
$('.pause').addClass('visible');
}
Put this as your playAudio function. The first eventlistener loops the song to the next song in the playlist. And the second event listener is for the song.duration which happens to be null (weird) if I don't use this eventlistener.
If you want to make the audio play right after you click the playlist element or the forward/rewind button, then add this to your click playlist function and fwd/rewind function.
song.addEventListener('loadedmetadata', function() {playAudio(); });
Hope this helps!!!! (My first answer to a post :D)
I think the key to this is to listen for (or "bind", in jQuery parlance), the "ended" event on your audio playback tag. This will fire as soon as the media playback has finished. The example that Mystic Magic refers to leverages this, so search that page for "ended" in order to see this in action.
I am building a site that has thumbnail based navigation and a large image or video as the background. See it here http://www.sarahnwatson.com.
Right now I have it so that if you click on a video the navigation menu animates out of the way so that you can see the video better. I want to make it so that on pause the menu animates back in.
Here is the code
//clicking on a thumb, replaces the large image or video
$list.find('.st_thumbs img').bind('click',function(){
var $this = $(this);
$loader.show();
var src = $this.attr('alt');
if (/\.(mp4|ogv)$/i.test(src)) {
var $currImage = $('#st_main').children('img,video').first();
$("<video class='st_preview' controls='controls' id='video' preload='auto'>").attr({ src: src }).insertBefore($currImage);
$('.st_overlay').hide();
setTimeout('playVid()', 5000);
$socialLinks.animate({ 'left': -($socialLinks.width()) }, 500);
hideThumbs();
$("video").bind("play", function() {
$list.children().each(function(i,el) { // loop through the LI elements within $list
$(el).delay(500*i).animate({'left':'-300px'},1000);
});
});
$("video").bind("pause", function() {
$list.children().each(function(i,el) { // loop through the LI elements within $list
$(el).delay(500*i).animate({'left':'300px'},1000);
});
});
$download.fadeOut(1000);
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}
else {
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img,video').first();
$this.insertBefore($currImage);
$loader.hide();
$('.st_overlay').show();
$socialLinks.animate({ 'left': '0px' }, 1000);
$download.fadeIn(2500);
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',src);
}
setTimeout('$("a.st_img_download").attr("href", "image_download.php?image="+$(\'#st_main\').children(\'img:first\').attr("src"))', 500);
});
if (video.paused) {
//show menu
}