A previous question I asked has got me half way to where I need to be, I now have 1 function that fires off 2 functions. A 'loader' function (a spinner graphic) and playAudio which play a file.
function loadPlay(src, trackName) {
loader();
playAudio(src, trackName);
}
When a play button is clicked the load spinner is supposed to appear and when the audio plays the spinner should go away.
Play button:
<span class="play" onclick="loadPlay('http://a797.phobos.apple.com/us/r30/Music/72/89/b9/mzi.aytblawp.aac.p.m4a','t3')" id="t3">
But what is happening is after the play button is clicked there is a slight pause (as audio loads) and the audio and spinner appear at the same time? The loader should appear as the track loads and then go away when the audio plays?
How do I add a pause to make sure the loader appears BEFORE the audio plays?
Both Functions:
function loader() {
// make a loader spinner appear as track loads
$(".loading").addClass("loadingnow");
}
function playAudio(src,trackname) {
// for Android
if (audioPlaying === false) {
if (device.platform == 'Android') {
src = '/android_asset/www/' + src;
}
media = new Media(src, success, error_error);
media.play();
//add playing class so play button is replaced with stop button
document.getElementById(trackname).parentNode.className="playing";
// now track is playing remove the loader spinner
$(".loading").removeClass("loadingnow");
audioPlaying = true;
} else {
//audio is already playing
}
}
function success() {
// track has finished playing so remove the stop button put play button back
$(".playing").removeClass("playing");
audioPlaying = false;
}
function error_error(e) {
//alert('great error');
//alert(e.message);
}
function stopAudio() {
// stop playing track
if (media) {
media.stop();
audioPlaying = false;
}
}
You can use setTimeout to force jQuery to wait a amount of milliseconds
function loadPlay(src, trackName) {
loader();
setTimeout(function(){
playAudio(src, trackName);
}, 1000);
}
This will force the playAudio to wait for 1 second. Your loader will pop up, but your user will have to wait for an additional second because of this.
Related
I have a page with some videos. I want to implement the ability to click on a button to make a video play and if I click another button the current video will stop and the next video will start playing.
How can something like this be achieved?
My project is similar to Netflix's main page.
My Website:
https://capcom2store.com/mov4k.php
This is my JS:
<script>
var videoElement = document.getElementById("myVideo");
function playPause() {
if (videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
};
</script>
One of the things you can do is to do something similar to the following:
// Get all video elements on the current page
const videoElements = document.querySelectorAll("video");
for (const videoEl of videoElements) {
// Listen to clicks on every one of the videos
videoEl.onclick = () => {
if (videoEl.paused) {
for (const video of videoElements) {
// When starting to play one video, pause all others
video.pause();
}
videoEl.play();
} else {
videoEl.pause()
}
}
}
<video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
Although this is a very simple example, because it takes over all of the click events of the video elements. It would be better to detect clicks another way (like having an overlay element or a button)
I have images on my webpage that when clicked they play a sound.
The HTML looks like this:
<span div="2" class="sound" onclick="playSound(this,'sounds/activity_1/letter_m_a_1_correct_v2.mp3');">
<img src="../../images/rainforest/letter_m/activity_1/a1_monkey.png" width="324px" height="274px" alt="Monkey" onclick="showPanelGroup_2();" />
</span>
<span div="3" class="sound" onclick="playSound(this,'sounds/activity_1/letter_m_a_1_incorrect_b.mp3');">
<img src="../../images/rainforest/letter_m/activity_1/a1_butterfly.png" width="324px" height="274px" alt="Butterfly" />
</span>
I am currently using the following Javascript code to pause and play one sound at a time when clicked:
function playSound(el,soundfile) {
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
}
If both of the images are clicked the sounds will overlap. I need for first sound to stop playing as soon as the second image is clicked and for the second sound to play.
You are creating a new MP3 player for each element when you pass this to the function in your onclick.
You either need to use a single element to hold the player, in which case you can overwrite what is playing on each click, or you need to have each click send the pause signal to all the other players on the page.
The benefit of keeping a separate player for each one (as you are doing now) is that each one retains its progress, so that it will resume when you click it again, so that's the example that I will stay with.
Here's an example of pausing all of the other players when you click on any one of them:
function pauseOthers(elements, me) {
Array.prototype.forEach.call(elements, function(el) {
if (el == me) { return; }
if (el.mp3) {
el.mp3.pause();
}
});
}
function playSound(el, soundfile) {
var allPlayers = document.getElementsByClassName('sound');
pauseOthers(allPlayers, el);
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
}
I'm trying to make a function that when you click a play button, the video is showed center in page with lightbox effect. The problem is that i've set it to start playing, when you click the "open in lightbox play button" but the HTML5 video control show the play/pause button as "play" and not "pause". Is it possible to registrer if the video is playing it should add "pause" style from start etc.
link to live problem: http://instagib.dk/westring-kbh/
jsfiddle demo: http://jsfiddle.net/8rj09kL9/
I've tried something like this.
// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function() {
$(".video-popup-outer").show();
$('.toggle-play-pause').addClass('pause');
$("#showreel-video")[0].play();
});
// hide the popup outer
$(".close-video").click(function() {
$(".video-popup-outer").hide();
$("#showreel-video").load();
});
// toggle play / pause
$('#play-pause').click(function() {
$('.toggle-play-pause').toggleClass('play','pause'); //Adds 'a', removes 'b' and vice versa
});
// video functionality
window.onload = function() {
// Video
var video = document.getElementById("showreel-video");
// Buttons
var playButton = document.getElementById("play-pause");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
} else {
// Pause the video
video.pause();
}
});
}
I've changed something in your code, since you already use jquery, I converted it all to jquery.
$(document).ready(function () {
// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function () {
$(".video-popup-outer").show();
$('.toggle-play-pause').addClass('pause');
$("#showreel-video")[0].play();
});
// hide the popup outer
$(".close-video").click(function () {
$(".video-popup-outer").hide();
$("#showreel-video").load();
});
// Event listener for the play/pause button
$("#play-pause").click(function () {
$('.toggle-play-pause').toggleClass('play', 'pause'); //Adds 'a', removes 'b' and vice versa
var video = $("#showreel-video")[0];
if (video.paused) {
video.play();
} else {
video.pause();
}
});
});
DEMO http://jsfiddle.net/8rj09kL9/4/
Seems to work somehow.
How can I set up one image, that when clicked changes to another image and then when clicked again reverts back to the original image while still carrying out functions independently. In my example I want a Play button that when pressed turns to a pause button. However I need to have both play and pause functionalities when the correct button is pressed. These work on do different buttons but I would like the one button to have all the functionality. I have tried a few things but everytime, one of the play/pause functions are not letting the other work.
$('#startSlider').click(function (){
if (document.getElementById("startSlider").src = "Play.png"){
document.getElementById("startSlider").src = "Pause.png";
scrollSlider();
}
else if (document.getElementById("startSlider").src != "Play.png"){
clearTimeout(tmOt);
document.getElementById("startSlider").src = "Play.png";
}
});
<img src="Play.png" id="startSlider"/>
problem is in your if block,
you are using = not ==
if (document.getElementById("startSlider").src = "Play.png"){// you are assigning here not comparing
you are assigning play.png every times when the click calls on the image.
you are using jquery then why are you not using this to make it more simple.
$('#startSlider').click(function (){
if (this.src == "play.png"){
this.src = "pause.png";
}else{
this.src = "play.png";
}
});
check this fiddle
I like using classes in these situations as it makes the code a little easier to follow:
$('#startSlider').click(function (){
$(this).toggleClass('pause')
if ( $(this).hasClass('pause') ) {
// Button is paused change to play
$(this).attr('src', 'Play.png')
// Pause function goes here
} else {
// Button is play change to pause
$(this).attr('src', 'Pause.png')
//play function goes here
}
})
You can do this with a little state machine. You keep the states inside an object, and handle the next state in the event listener of the button:
var states = {
_next: 'play',
next: function() {
return this[this._next]()
},
play: function() {
img.src = 'pause.jpg'
button.textContent = 'Pause'
this._next = 'pause'
},
pause: function() {
img.src = 'play.jpg'
button.textContent = 'Play'
this._next = 'play'
}
}
button.addEventListener('click', states.next.bind(states))
This is more of a general answer to your problem, that you'd have to adapt to your code.
DEMO: http://jsbin.com/moxoca/1/edit *
* The images might take a second to load.
Hello wonderful web programmers. I need some help, and I believe there must be a simple answer.
The Goal
I need to be able to pause all Vimeo Videos on a WordPress webpage. I would really like it if I could just add a class "pause" to any tag (so I could use a div or anchor rather than just a button) and have that pause all playing videos.
The following code works if I have buttons, but it only works on the first video. Apparently I need to make a loop of some sort to have it work on all of the videos on a page:
The Code
<button class="simple">play</button> <button class="simple">pause</button>
<script>
//HERE IS THE SIMPLE CODE THAT WORKS
var f = $('iframe'),
url = f.attr('src').split('?')[0];
// postMessage
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
f[0].contentWindow.postMessage(JSON.stringify(data), url);
}
// Play & Pause
$('button').click(function() {
post($(this).text());
});
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
} else { // IE
window.attachEvent('onmessage', onMessageReceived, false);
}
</script>
The Question
Where would the loop go? Also, what should I change so that another element can pause? Here is some other code where a class is used:
/**
* Sets up the actions for the buttons that will perform simple
* api calls to Froogaloop (play, pause, etc.). These api methods
* are actions performed on the player that take no parameters and
* return no values.
*/
function setupSimpleButtons() {
var buttons = container.querySelector('div .simple'),
playBtn = buttons.querySelector('.play'),
pauseBtn = buttons.querySelector('.pause'),
unloadBtn = buttons.querySelector('.unload');
// Call play when play button clicked
addEvent(playBtn, 'click', function() {
froogaloop.api('play');
}, false);
// Call pause when pause button clicked
addEvent(pauseBtn, 'click', function() {
froogaloop.api('pause');
}, false);
// Call unload when unload button clicked
addEvent(unloadBtn, 'click', function() {
froogaloop.api('unload');
}, false);
}
setupSimpleButtons();
setupEventListeners();