I realise this has been asked before and for that, I apologise but as it stands I can't get a pop up modal to stop playing a video when the close button is pressed.
Any help would obviously be grand.
Thank you!
HTML:
<div class="converseVideo">
<div class=textAnchor>
<h3 class=stickyConverseText>I was lost for language too</h3>
</div>
<video autoplay muted loop class="myVideo converseVideoContainer">
<source src="Media/converse.mp4" type="video/mp4">
</video>
<button onclick="toggleConversePopUp()" class="playButton conversePlayButton">
<img src="Media/playIcon.jpg" title="Play Icon">
</button>
<h2 class=videoTagsLeft>Converse</h2>
</div>
<div class="videoPopUp" id="popup-1">
<video class="conversePopUp" id="myVideo" controls>
<source src="Media/converse.mp4" type="video/mp4">
</video>
<button class="closeButton" onclick="toggleConversePopUp()" >×</button>
</div>
and this is the JS:
let modalOpen = false; // Default to closed
function openModal() {
setModal(true);
}
function closeModal() {
setModal(false);
}
function toggleModal() {
setModal(!modalOpen);
}
function setModal(value) {
modalOpen = value;
document.getElementById("popup-1").classList.toggle("active", value);
}
function pauseMedia() {
document.querySelector('video').pause()
}
function playMedia() {}
function toggleConversePopUp(){
document.getElementById("popup-1").classList.toggle("active");
}
The solution to this was actually quite simple. I think I needed to have JQuery which I hadn't set up and then it was a relatively simple piece of JS which is below.... for anyone that stumbles across this and has a similar issue!
function toggleConversePopUp(){
document.getElementById("popup-1").classList.toggle("active");
if($('.active').length === 0) {
document.getElementById('myVideo').pause();
}
}
Related
I'm facing some issues with my play/pause buttons. In ym HTMl I have multiple buttons with different sources:
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
This is my Javascript:
var buttons = document.getElementById("button");
var music = document.getElementById("player");
for (const buttons of button) {
buttons.addEventListener("click", function(){
if(music.paused){
music.play();
buttons.innerHTML = "Pause";
} else {
music.pause();
buttons.innerHTML = "Play";
}
});
}
But when I play music from the first button and then pause it, go over to the next button and toggle the button, the sound keeps playing from that point where I stopped it instead of playing the sound from the written source.
Anyone here that could help me?
Id attributes in HTML should be unique. The document.getElementById returns a single element (if found).
One solution to fixing your problem is to give each pair of button/audio elements different ids, for example:
<div>
<button class="button-53" id="button1">Play</button>
</div>
<audio id="player1">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button2">Play</button>
</div>
<audio id="player2">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
and then add event listeners for each pair:
function addListeners(buttonElement, audioElement) {
// ...add implementation
}
addListeners(
document.getElementById("button1"),
document.getElementById("player1")
);
addListeners(
document.getElementById("button2"),
document.getElementById("player2")
);
I'm trying to add sound effects to my website, a positive one when they click on the correct image and a negative one when they click on the wrong image. At the moment only the negative sound gets played for both clicks, or depending on what order i put the sounds in, the positive one gets played.
This is my html:
<audio controls autoplay hidden id="correct">
<source src="positive.mp3" type="audio/mpeg">
</audio>
<audio controls autoplay hidden id="wrong">
<source src="negative.mp3" type="audio/mpeg">
</audio>
<div class="popup" onclick="myFunction(); playPositive()"> <img src="true.png">
<span class="popuptext" id="myPopup">CORRECT</span>
</div>
<div class="popup" onclick="myFunction(); playNegative()"> <img src="false.png"
<span class="popuptext" id="myPopup">INCORRECT</span>
</div>
And this is my Javascript:
var myMusic= document.getElementById("correct");
function playPositive() {
myMusic.play();
}
var myMusic= document.getElementById("wrong");
function playNegative() {
myMusic.play();
}
Why does it only use the second sound for both function, even when I click on right image and wrong image?
that is because you are using the same variable name for both audio elements:
fix it like this:
var myCorrectMusic= document.getElementById("correct");
function playPositive() {
myCorrectMusic.play();
}
var myWrongMusic= document.getElementById("wrong");
function playNegative() {
myWrongMusic.play();
}
I have tried two version
The first one autoplay is working on Google Chrome but how can I control with button that I can play or pause the audio?
<embed name="pop" src="pop.mp3" loop="true" hidden="true" autostart="true">
The second one autoplay is not working on Google Chrome but I can control it with button in IE or FireFox
<audio id="myAudio">
<source src="pop.mp3" type="audio/mp3">
</audio>
The buttons
<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>
And the Javascript
var aud = document.getElementById("myAudio");
function playAud() {
aud.play(); }
function pauseAud() {
aud.pause(); }
So how can I deal with this problem?
I want the Audio autoplay in background
And then I can use button to play or pause it
You only have to trigger the play function on init:
var aud = document.getElementById("myAudio");
function play() {
aud.play();
}
function pause() {
aud.pause();
}
aud.play(); // this will do the trick :)
<audio id="myAudio">
<source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>
<button onclick="play()" type="button">Play</button>
<button onclick="pause()" type="button">Pause</button>
Old solution:
You could remove/add your embed-element like i did here. This might be hacky, but it could be a solution for you.
var audiowrapper = document.getElementById('audio-wrapper');
var audio = document.getElementById('audio');
function play() {
if (!audiowrapper.hasChildNodes()) audiowrapper.appendChild(audio);
}
function pause() {
if (audiowrapper.hasChildNodes()) {
while (audiowrapper.firstChild) {
audiowrapper.removeChild(audiowrapper.firstChild);
}
}
}
#audio-wrapper {
position: absolute;
top: -300px !important;
}
<div id="audio-wrapper">
<embed id="audio" name="pop" src="https://wiki.selfhtml.org/local/Europahymne.mp3" loop="true" hidden="true" autostart="true">
</div>
<button onclick="play();" type="button">Play</button>
<button onclick="pause();" type="button">Pause</button>
Try this:
<audio id="sound" src="sound.mp3" autoplay="0" autostart="0"></audio>
<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>
<script>
let aud = document.getElementById("sound");
function playAud() {
aud.play();
}
function pauseAud() {
aud.pause();
}
I'm trying to start and stop two videos with two separate buttons. I've simply copied the code and renamed the variables, yet one piece of code works and one doesn't. I get the error 'TypeError: video2.pause is not a function at HTMLButtonElement.c'. Both videos and buttons are placed in modals respectively. Why am I getting this weird error, especially when exactly the same code works?
Javascript:
var video = document.getElementById("video.mp4");
var playButton = document.getElementById("play-pause");
var video2 = document.getElementById("video2.mp4");
var play = document.getElementById("play-pause2");
playButton.addEventListener("click", function a () {
if (video.paused == true) {
video.play();
playButton.innerHTML = "Pause";
} else {
video.pause();
playButton.innerHTML = "Play";
}
});
play.addEventListener("click", function c () {
if (video2.paused == true) {
video2.play();
play.innerHTML = "Pause";
} else {
video2.pause();
play.innerHTML = "Play";
}
});
HTML:
<video width="900px" height="600px" id="Digital_Poster.mp4" />
<source src="assets/video.mp4" type="video/mp4" id="video.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px">
<source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
You should call .pause on the <video> elements, but the id is set on the <source> ones. Moving it to the <video> tags should make it work:
<video width="900px" height="600px" id="video.mp4">
<source src="assets/video.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px" id="video2.mp4">
<source src="assets/video2.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
By the way, I've corrected the /> to > in the first line. Also, declaring two elements with ID set to video-controls is illegal, consider using HTML classes (thanks #zer00ne for pointing out).
I have made attempts to create an overlay play button for my HTML 5 video. I have created an example on Jfiddle - click here-This works fine. I have tried to integrate my fiddle onto my site however i am receiving the error message Cannot read property 'paused' of undefined. Believe this has something to do with the structure of my code. Below is a snippet of how my code is set up.
$('.video').click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="/assets/casestudies/marketingandcomms/ukcoffeeweek/coffee-video-poster.gif">
<source src="/assets/videos/coffee-video.mp4" type="video/mp4">
</video>
<div class="playpause"></div>
Can anyone point me in the right direction ?
you use two different html structures with wrong JQuery Selectors.
try the Following html and Jquery Codes:
DEMO: https://jsfiddle.net/9ewogtwL/150/
<div class="wrapper">
<video class="video">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
with this JQuery Code:
$('.wrapper').click(function () {
var videoEl = $(this).find("video").get(0);
if( videoEl.paused ){
videoEl.play();
$(this).find(".playpause").fadeOut();
}else{
videoEl.pause();
$(this).find(".playpause").fadeIn();
}
});
DEMO URL: JSBIN-DEMO
JQUERY
$('.video').on('click',function () {
$player=$(this).find("video")[0];
if($player.paused){
$player.play();
$(this).find('.playpause').fadeOut();
}
else{
$player.pause();
$(this).find('.playpause').fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<div class="playpause">PLAY</div>
<div>