I am after a very basic music player, I have the following basics working now, however;
1) How to make both the Play and Pause buttons in one button? That appears first as Pause and on click It toggles Play and on click again it Toggle Pause?
2) Also Is there anyway to add a progress counter? not a bar, but numbers i.e. 0.3/4.0min
Here is the fiddle: www.jsfiddle.net/tjHhY
And here is the code as well here:
var audio = new Audio("http://dp0169.free.fr/Musique/Air/Air%20-%20Talkie%20Walkie/02%20Cherry%20Blossom%20Girl.mp3");
$(".play").click(function () {
audio.play();
})
$(".pause").click(function () {
audio.pause();
})
I'd recommend you to use JQueryUI. It have nice variety of widgets to create clean interface :)
Also check this demo it shows how to create toggle play & pause button.
Hope it helps.
Why don't you check this Demo. Hope it helps :)
Related
I am using the code from the QuickQuiz https://github.com/UrbanInstitute/quick-quiz and have modified the code to use an embedded video (mp4) instead of an img, which loads from a json file- and also to use the SweetAlert2 library instead of the first SweetAlert, which was originally implemented. I want to pause the playback of each video when any one of the four
quiz-btn btn
buttons are clicked. The buttons all trigger the SweetAlert2 dialog using swal.Fire.
I have tried including script on the page like this:
document.querySelector("#quiz > div > div.item.active > div.quiz-answers > div:nth-child(1)").addEventListener("click",function() {
document.querySelector("#quiz > div > div.item.active > div.ncc.text-center > video").pause();});
and I have also tried
$('.quiz-button btn').on('click', function() {
$('#video').attr('src', ''); });
directly in the code. The only thing I was successful with was getting the first video to stop playing when clicking the buttons- but none of the following videos would stop playing. Please help, thank you so much in advance.
This is actually a common issue, you will want to change your click function as follows:
change
$('.quiz-button btn').on('click', function() {
to
$(document).on('click','.quiz-button btn', function() {
When I set the tittle of the video, it appears for a few seconds, then disappears after each video has played. Everything works fine without the play-next/prev buttons. If I hit either button quickly, many times, the tittle reappears and disappears seemingly forever. Please check the complete code from JSfiddle.
function nextVideo(){
$('#videotittle').hide();
play(vidIndex + 1);
}
function prevVideo(){
$('#videotittle').hide();
play(vidIndex - 1);
}
Did you try to add .stop( true, true ) to your animation ?
Your fiddle updated :
http://jsfiddle.net/hftgmuLy/
The setTimeout that is called to delay the initial showing of the title is never cancelled (Cleartimeout)
a reference to the setTimeout needs to be kept that can be cancelled e.g.:
curTimeout =setTimeout( ....
and on play: clearTimeout(curTimeout);
Fiddle
PS, the fiddle is based on the older fiddle in the comments of the previous answer. It might be somewhat different than the new version
I'm a bit of a novice when it comes to Jquery.
I'm trying to pause/play a video by clicking the video itself and also by click a play/pause button.
Now, I've managed to get it working as desired when the user clicks the video.
But I can't get it to work using the button as well.
This what I've tried so far:
$("video").trigger("play");//for auto play
$('video, #pausebutton').click(function() {
if ($('video').hasClass('pause')) {
$("video").trigger("play");
$(this).removeClass('pause');
$("#artwork").removeClass('fadein')
$(this).addClass('play');
$("#pausing").html("▐▐");
} else {
$("video").trigger("pause");
$(this).removeClass('play');
$(this).addClass('pause');
$("#artwork").addClass('fadein');
$("#pausing").html("►");
}
});
The pause button does actually pause the video, but it doesn't resume play when clicked for a second time. It also ignores the other attributes such as add and removing classes etc. Just to clarify, all these things work when the video is clicked directly.
Any help would be appreciated.
Cheers
It's the use of this inside the event handler, when the button is clicked this is the button, not the video, and the classes are set on the button instead of the video
$("video").trigger("play"); //for auto play
$('video, #pausebutton').click(function () {
if ($('video').hasClass('pause')) {
$("video").trigger("play");
$('video').removeClass('pause');
$("#artwork").removeClass('fadein')
$('video').addClass('play');
$("#pausing").html("▐▐");
} else {
$("video").trigger("pause");
$('video').removeClass('play');
$('video').addClass('pause');
$("#artwork").addClass('fadein');
$("#pausing").html("►");
}
});
FIDDLE
i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dominic Green helped me to get it nearly started.
the problem is: the video already starts to play (even if it is hidden) in autoplay-mode right after the pageload (you can hear the sound in the background) but i want to have the autoplay to start right after click on the preview-image...
in this example i already added "autoplay=1" manually but i want to add this line via javascript to the video-URL right after the click!
here's the example how i did it so far (click on the flower-images will make the video visible): http://brayaz.de/test/example.html
i'm absolutely not into javascript so any help would be great!
thanks!
Just change the source of the iframe to include the autoplay :
$(document).ready(function(){
$(".video").hide();
$(".loader").on('click', function(){
$(this).hide();
elm = $(this).siblings(".video")
elm.show();
var iframe = elm.find('iframe');
iframe.prop('src', iframe.prop('src')+'&autoplay=1');
});
});
FIDDLE
HTML Code
<param name="myvideo" value="http://www.youtube.com/v/v_MVwUqrwDc?rel=0">
JQuery
$('param[name="myvideo"]').val(function(i, oldVal) {
return oldVal + (oldVal.indexOf('?') ? '&autoplay=1' : '?autoplay=1');
});
I have a slider on my site but unfortunately it doesn't have an auto mode.
Is it possible to write a function that simulates a link being clicked at certain time intervals so that the slide rotates?
There is a click function that does just that.
var link = $('#your-slider-link');
window.setInterval(function() {
link.click();
}, 100); // every 100ms.
If understood it right, you could make use of Nivo Slider http://nivo.dev7studios.com/ or use one from this list http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials or from this one http://webdesignfan.com/jquery-slider-tutorials-and-plugins/ or search for jquery slider on google, as I did. hehe :).
I use Nivo and it is very good but search again for this I found many others. I am going to try some of them.