here in this blog I found an interesting effect that I put into practice programming using the footer attribute. The effect is to slide the footer as if it were like a tab for which to program I worked.
Now the problem is if I add an audio player above the tab, when I want to start the audio playback, the tab slides to click on my player for example click on PLAY or stop, what I want is that only this Activated the FOOTER tab to click on it to slide, instead the audio player that does not perform any action in sliding as a bullet and only play when I click on it.
Here the codes:
HTML
<span class="fTab">
<!- - AUDIO- - >
<section id="repro">
<audio controls="controls" autoplay>
<source src="music.mp3" type="audio/mpeg" />
</audio>
</section>
***CONTENT***
</span>
<footer>
<section class="credit">
<div id="slideout_inner">
**CONTENT**
</div>
</section>
</footer>
JAVASCRIPT
jQuery(function($){
$('.fTab').on('click', function(){
$(this).toggleClass('active');
});
})
The css is long because it is not very important. The important thing is the javascript since it is the one that will execute the effect of sliding the FOOTER.
I hope you understand what I say, I hope your help from everyone. Thank you
You can use stopPropagation. If #repro element is clicked then the $(this).toggleClass('active'); won't be fired.
The event.stopPropagation() method stops the bubbling of an event to
parent elements, preventing any parent event handlers from being
executed.
$("#repro").click(function(event){
event.stopPropagation();
});
Related
I have a play image with text 'Watch video', when clicked would open up a bootstrap modal window to play the video i put in. I've got the moday view to work. The problem I'm having with this is when I play the video and exit the screen while it is being played, the video continues to play in the background. If I click on the Watch Video link again, it would play the video from where it stopped off previously.
I need to have the video stop when the modal window is closed. It needs to then play the video from the start the next time I click the "Watch video" link. I'm still new to this and am not sure how to do this. Anyone know how I can achieve this?
<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal">
<img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video
</div>
<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I managed to get it to work with the link that #Leo provided. But it was slow as it reloaded the frame everytime the link was clicked. Tried #guillesalazar solution from Twitter Bootstrap Modal stop Youtube video and it worked perfectly. This was the solution I used.
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
Well you can simply remove the src of the iframe and the put back again like ;
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}
You just need to stop the video on the hidden.bs.modal event:
$('#myModal').on('hidden.bs.modal', function () {
player.stopVideo();
// or jQuery
$('#playerID').get(0).stopVideo();
// or remove video url
$('playerID').attr('src', '');
})
Here is a very similar (if not equal) to what you need to do: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal
They do not use the iframe API so everytime they close the modal they just delete the video url .attr('src', '');
For multiple modals with iframe videos, here is the solution:
$('#myModal').on('hidden.bs.modal', function(e) {
var $iframes = $(e.target).find('iframe');
$iframes.each(function(index, iframe){
$(iframe).attr('src', $(iframe).attr('src'));
});
})
On modal close, it goes through all the iframe videos and resets them instead of resetting all of them to the first video.
// Simple and clean
Try using class or ID before Iframe to refresh/reload the particular video. Otherwise, it will reload all iframe source.
$( id/class + 'iframe').attr('src', $('iframe').attr('src'));
**If you want to open modal with iframe and remove on close best and short answer**
test = function (){
$('#test_tutorial').modal('show').on('hidden.bs.modal', function (e) {
$("#test_tutorial iframe").attr("src", "");
}).on('show.bs.modal', function (e) {
$("#test_tutorial iframe").attr("src", $("#test
_tutorial iframe").attr("data-src"));
});
}
Late to the party, but some people may find this useful in the future. In my case I had a real struggle achieving this due to the video being embedded from a div with a video element in the iframe, not with the src directly in the iframe element, like this:
<iframe>
<div class="videoContainer">
<video src="#"></video>
</div>
</iframe>
I solved this with the following approach:
$('#myModal').on('hidden.bs.modal', function() {
$('iframe').contents().find('video')[0].pause();
});
It also pauses the video instead of refreshing the url/replacing the src attribute by the same value, as suggested in the accepted answer.
I'm using the toggle function to show and hide content, it works well, the only problem I have is that when I place a video the video continues to play even when it is hidden, is there any way to stop playing the video when it is hidden
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
<button>Toggle</button>
<p>the video is displayed here</p>
You can do:
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
if (document.getElementById('myVideo').paused)
document.getElementById('myVideo').play();
else
document.getElementById('myVideo').pause();
});
});
If video is paused, play it and if it is playing then pause it on the click.
I think you would want to check if your wrapping p element is visible, using $("p").is(":visible").
If it is visible, pause the video using document.getElementById("yourVideoId").pause(), obviously replacing "yourVideoId" with whatever you have in the id attribute on your <video> tag. Then, after you do that, you can call .toggle() on your p element.
If it is not visible, and the user clicks your toggle button, I would imagine you would just want to show the video, and not resume playing it, as that might be a little jarring to the user. If you do want that functionality, however, just add document.getElementById("video").play() in the else block in the example below.
Here is a working example to demonstrate the functionality:
$(document).ready(function() {
$("button").click(function() {
var p = $("p");
if (p.is(":visible")) {
document.getElementById("video").pause();
$(this).text("Show");
} else {
$(this).text("Hide");
}
p.toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<video id="video" controls width="40%">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</p>
<button>Hide</button>
Added width="40%" on the video so it fits in the snippet window.
I'm trying to make custom HTML5 audio event buttons. I know I can use the controls but I want to make my own my code is below:
<audio autoplay="true" loop src="vid/birth.mp3"></audio>
<button onclick="document.getElementsByTagName('audio').play()">Play</button>
<button onclick="document.getElementByTagName('audio').pause()">Pause</button>
When I load the page the audio starts but the controls won't work, I click them and nothing happens. What am I doing incorrectly?
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});
How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?
Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.
Here's what I got so far, which is not working...
IN HEAD OF DOM BETWEEN SCRIPT TAGS
document.getElementById("pauseX").onclick = function () {
document.getElementById('player2').pause();
};
TRIGGER TO REVEAL MODAL
Click here to reveal modal.
VIDEO + MODAL CONTAINER
<div id="vid-1" class="reveal-modal">
<div class="center">
<video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
<source type="video/mp4" src="../media/vid-1-480x320.mp4" />
<source type="video/webm" src="../media/vid-1-640x480.webm" />
<object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=../media/vid-1-480x320.mp4" />
<img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1"
title="No video playback. Update browser, enable Javascript, or install Flash." />
</object>
</video>
</div>
<a id="pauseX" class="close-reveal-modal">×</a>
</div>
Already tried many other solutions, including...
Javascript to stop HTML5 video playback on modal window close
...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?
Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)
if you have document.getElementById("pauseX").onclick... at the top of your document probably the code doesn't work because element with id pauseX is not already on the dom. Look at the javascript console, you should see some related error
Try to move these instructions on the bottom or on DOM ready event
Got it solved with this script...
<script>
$('.close-reveal-modal').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>
There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks #Fabrizio for suggesting I examine my ID attributes to begin with...)