`I have a video slider in my page all videos are in < video > tag in different .
So if i play 1 video and try to play other video both the video are playing same time i neeed to pause or stop the last video and when i play the second or any other video on the same screen. There should be only 1 video play at a time . Like if video 1 is playing when play video 2 video 1 should be pause/stop
$('video').on('click', function(e) {
let vids = $.makeArray($(this).siblings('video'));
vids.forEach(vid => {
vid.pause();
vid.classList.remove('active');
});
$(this).toggleClass('active');
if ($(this).is('.active')) {
this.play();
} else {
this.pause();
}
});
i tried this but when i click 1st video its not playing and acive class toggle working. Its not working like how i expected video not pause or active class not removing if i press other video `
Related
I'm coding a playlist.
I would like to create a button that would pause/play my audios. One button that would work for all my audios no matter which one is currently playing.
For now, I have a button that can pause the audio playing, but I can't manage to make a button that resumes the audio where it stopped.
On click on title, the audio starts playing.
On click on the button, I'd like to pause or resume the audio playing, and to change the text from Pause to Play and vis-versa.
If you click on a title again, I'd like the audio to play from beginnig.
Here is the html :
<div class="audio" onclick=
"playAudio('algebrasuicide_fathersbythedoor.wav')">algebra suicide father by the door
</div>
<div class="audio"onclick=
"playAudio('algebrasuicide_inbedwithboys.wav')">
algebra suicide in bed with boys
</div>
<div class="audio"onclick=
"playAudio('aprilmagazine_parade.wav')">
april magazine parade
</div>
<button onclick="pauseAudio()">
pause
</button>
Here is the js :
let audio;
function stopAudio() {
if (audio && !audio.paused) {
audio.pause();
audio.currentTime = 0;
}
}
function playAudio(src) {
stopAudio();
audio = new Audio();
audio.src = src;
audio.play();
}
function pauseAudio(){
audio.pause();
}
From what I understand I may need to change the inner html or to add a player but I tried a lot of codes from SO and can't manage to find how to make it work.
I hope you can help me ! It's probably simple but I'm very novice.
Thank you :)
I'm building a small video library web app targetting iOS, where the videos display in fullscreen.
I'm looking to do a Netflix style, "next video" 7 seconds before the end of the video that's playing.
To do that, I check the video currentTime against the duration and makes sure exitfullscreen hasn't already been triggered
video.addEventListener('timeupdate', () => {
let time = video.currentTime,
duration = video.duration
if (time > duration - 7 && !_exitfullscreen) {
video.webkitExitFullscreen()
_exitfullscreen = true
video.removeAttribute('controls')
video.style.height = '150px'
video.setAttribute('playsinline', 'playsinline')
}
})
After setting the playsinline attribute I tried doing video.play() to restart the playback but it doesn't work. Everything else is good, other than the play method.
What am I missing?
I have multiple audio players, each with a play and stop button, on one page. The only issue I have is when you click one play button, and then another, they play on top of one another. Can someone help me with the code I would need to stop whatever song is playing when another play button is clicked. Here's are my code. Thank you
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
}
function change() {
var image = document.getElementById('image');
image.src = "https://lms.testing.com/je_audio/html/button2.png"
}
#btn1 {
border: none;
padding: 0;
background: none;
}
<audio id="player">
<source src="https://lms.testing.com/els_audio/PATAudios/Q1.mp3" type="audio/mpeg">
Your browser has not support the audio element.
</audio>
<div>
<button id="btn1" onclick="document.getElementById('player').play('play'); disableButton(this)"><img src="https://lms.testing.com/je_audio/html/button1.png" width="95" height="28" alt="button" id="image" onclick="change();"></button>
</div>
Listen for the play event on all the <audio> elements.
Whenever one audio element starts playing, pause all the other ones.
// Get all <audio> elements.
const audios = document.querySelectorAll('audio');
// Pause all <audio> elements except for the one that started playing.
function pauseOtherAudios({ target }) {
for (const audio of audios) {
if (audio !== target) {
audio.pause();
}
}
}
// Listen for the 'play' event on all the <audio> elements.
for (const audio of audios) {
audio.addEventListener('play', pauseOtherAudios);
}
What you have to do is for all the elements first to stop the audio that was previously running audio and then change their images back to play, and try to play the audio for the current media button you are using. Using Class to detect all the Elements using
document.querySelectorAll('.playerButton')
this will help you find all the player button and similarly give a class like AudioFile to that audio that you are using and use the stop() function to stop the audio and then start the audio for the current button clicked using this function.
I hope this will help you, in executing the functionality you are trying to achieve.
you can use the below-given function as an example on how to stop the audio
function stopAudio(audio) {
audio.pause();
audio.currentTime = 0;
}
stopAudio(audio)
I am using the code in this codepen http://codepen.io/frytyler/pen/juGfk to make custom controls for my video player which works great except when I have the video set to "autoplay" like in the code below. It plays the video but I then have to press pause twice to pause it, how would I modify the code to solve this?
<video id="myVideo" autoplay controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
http://codepen.io/anon/pen/PZwxed
It's quick solution for screen, adding this snippet at last line of js inside of dom.ready().
//doubleclick
$('#myVideo').click(function () {
if ($("#myVideo").get(0).paused) {
$("#myVideo").get(0).play();
}
});
$('#myVideo').dblclick(function () {
$("#myVideo").get(0).pause();
});
there a problem, play/pause button may act weird when you click button after of click twice in screen, you need to assign play/pause button class to display properly or it would look best if you hide this button.
EDIT:
You may manipulate play/pause button in following code:
var vid = document.getElementById("myVideo");
vid.onplaying = function() {
//call when video is playing, it should show pause icon in button like .addClass and .removeClass
};
vid.onpause = function() {
//call when video is paused, it should show play icon in button like .addClass and .removeClass
};
I have a bunch of youtube urls which i would like to play. I want like to play only the audio content in a basic HTML player with user controls like Play, pause, next. I am unable to add user control functionality(Nor able to play the videos in a HTML player, i am embedding the youtube video), thus the user has to click on the play button of the next video every time a video is completed. Any help will be appreciated.
..continuing from the comments:
That's right you need to use js. I'll help you start: you can create an array with all your youtube urls:
var youtube_urls = ['https://www.youtube.com/watch?v=vpoi_l4jkyU', 'https://www.youtube.com/watch?v=Lml2SkB68ag', 'https://www.youtube.com/watch?v=awMiY-Ve1As'];
And then, using the api you listen for when a video is done playing and then start the next one:
Detect end video: How to detect when a youtube video finishes playing?
OR
Just create a playlist on youtube and embed the playlist. It'll loop through all the videos.
this should get you started:
// change this list to whatever you want
var urls = ['http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg',
'http://upload.wikimedia.org/wikipedia/commons/5/5b/Ludwig_van_Beethoven_-_Symphonie_5_c-moll_-_1._Allegro_con_brio.ogg'];
var idx=0;
var aud= document.getElementById('aud');
aud.src=urls[idx];
aud.addEventListener('ended', next); // for automatically starting the next.
function play(){
aud.play();
}
function pause(){
aud.pause();
}
function next(){
idx++;
if(idx === urls.length) idx=0;
aud.src = urls[idx];
aud.play();
}
<audio id = 'aud'></audio>
<button onclick="play();">play</button>
<button onclick="pause();">pause</button>
<button onclick="next();">next</button>