I have made a modal layer that shows a html5 video. This works fine. I am having trouble making the video stop playing once I click the close modal button.
When I close the modal, the video keeps playing in the background. Can anyone help so when I close the modal layer, the video terminates.
Here is my html code, I use the Magnific Popup js for the modal popup
<div id="p1" class="mfp-hide">
<div class="some-element">
<video id="sampleMovie" width="100%" preload controls class="embed-responsive-item">
<!-- .mp4 or .mov -->
<source src="videos/sample2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
JS code -
* Private static constants
*/
var CLOSE_EVENT = 'Close',
BEFORE_CLOSE_EVENT = 'BeforeClose',
AFTER_CLOSE_EVENT = 'AfterClose',
BEFORE_APPEND_EVENT = 'BeforeAppend',
MARKUP_PARSE_EVENT = 'MarkupParse',
OPEN_EVENT = 'Open',
CHANGE_EVENT = 'Change',
NS = 'mfp',
EVENT_NS = '.' + NS,
READY_CLASS = 'mfp-ready',
REMOVING_CLASS = 'mfp-removing',
PREVENT_CLOSE_CLASS = 'mfp-prevent-close';
/**
if(mfp.st.showCloseBtn) {
// Close button
if(!mfp.st.closeBtnInside) {
mfp.wrap.append( _getCloseBtn() );
} else {
_mfpOn(MARKUP_PARSE_EVENT, function(e, template, values, item) {
values.close_replaceWith = _getCloseBtn(item.type);
});
_wrapClasses += ' mfp-close-btn-in';
}
}
if(mfp.st.showCloseBtn &&
(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
if(mfp.currTemplate.closeBtn)
mfp.currTemplate.closeBtn.detach();
}
appendContent: function(newContent, type) {
mfp.content = newContent;
if(newContent) {
if(mfp.st.showCloseBtn && mfp.st.closeBtnInside &&
mfp.currTemplate[type] === true) {
// if there is no markup, we just append close button element inside
if(!mfp.content.find('.mfp-close').length) {
mfp.content.append(_getCloseBtn());
}
} else {
mfp.content = newContent;
}
} else {
mfp.content = '';
}
_mfpTrigger(BEFORE_APPEND_EVENT);
mfp.container.addClass('mfp-'+type+'-holder');
mfp.contentContainer.append(mfp.content);
},
closeBtnInside: true,
showCloseBtn: true,
Any advice would be so appreciated
<div id="p1" class="mfp-hide">
<div class="some-element">
<video id="sampleMovie" width="100%" preload controls class="embed-responsive-item">
<!-- .mp4 or .mov -->
<source src="videos/sample2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
<script>
var video = document.getElementById("myVideoPlayer");
function stopVid(){
video.pause();
video.currentTime = 0;
}
//attach event handler to close button
$(".mfp-close").on('click', function(){
stopVid();
});
</script>
Related
I am still newbie
I'm studying,
help if you can I don't understand, I want to add 2 3 songs to the site I wrote the code but only 1 song works
how to make all songs play
but not simultaneously, but in turn,
For example
I am listening to music 1 and then I want to listen to play 2, when I press play 2, play 1 should stop
how to do it i don't understand can you help in advance thanks
I'll leave the code
var mySong = document.getElementById("mySong");
var icon = document.getElementById("icon");
icon.onclick = function() {
if(mySong.paused){
mySong.play();
icon.src = "img/pause-icon.png";
}else{
mySong.pause();
icon.src = "img/play-icon.jpg";
}
}
<img src="img/play-icon.jpg" alt="" id="icon" width="80">
<audio id="mySong">
<source src="Ганвест - Кайфули.mp3" type="audio/mp3">
</audio>
<img src="img/play-icon.jpg" alt="" id="icon" width="80">
<audio id="mySong">
<source src="Ганвест - Кайфули.mp3" type="audio/mp3">
</audio>
You need unique IDs or delegate, then you do not need IDs at all:
Note I changed icon id to icon class, wrapped each song in a div and all songs in a div too
const icons = {
play: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png",
pause: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/play-pause.png"
}
const isPlaying = audioElement => !audioElement.paused;
const container = document.getElementById("songs");
const songs = container.querySelectorAll(".song audio");
const controls = container.querySelectorAll(".song .icon");
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.matches(".icon")) {
const mySong = tgt.closest(".song").querySelector("audio");
// pause all other songs
songs.forEach((song,i) => {
if (isPlaying(song) && song != mySong) {
song.pause()
controls[i].src=icons.play;
}
});
if (mySong.paused) {
mySong.play();
tgt.src = icons.pause;
} else {
mySong.pause();
tgt.src = icons.play;
}
}
})
<div id="songs">
<div class="song">
<img src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png" alt="Toggle" class="icon" width="80">
<audio id="mySong1">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3"></audio>
</div>
<div class="song">
<img src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png" alt="Toggle" class="icon" width="80">
<audio id="mySong2">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mp3"></audio>
</div>
</div>
I have a button that when clicked, pops up a video that can played.
The problem is that if you close the popup while the video is playing, closing the popup does not stop the video, but it keeps playing in background.
<div>
<a id="click-me">Click Me</a>
</div>
<div id="popup-mpdal" style="display:none;">
<div class="">
<video id="videoplayer" controls poster='<?php echo $block->getUrl("pub/media/video/")?>whats-your-story.png'>
<source src='<?php echo $block->getUrl("pub/media/video/")?>this-is-chris-saint-long-version.mp4' type="video/mp4">
</video>
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
It's a little unclear as to what's going on here, but when the modal is being closed you aren't doing anything to either pause or reset the video. Here's a pretty simple way to stop it.
var video = document.getElementById("videoplayer");
function pauseVideo(){
video.pause();
}
Now if you call pauseVideo() inside the click handler for your buttons it should stop the video.
I added this pop up to my site, and try add autoplay, but the problem is even the pop dont come up each time you refresh your website, you can still hear the sound.how can i stop the autoplay when pop up doesn't show?
I tried to solve problem by doing this but is still not working
<script>
$( document ).ajaxComplete(function() {
$("#popup_87 flex-video iframe").attr("src","https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
});
</script>
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<iframe src="https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&showinfo=0&autoplay=1" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
</div>
/////
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>
Try
<script>
function LoadVideo() {
// If it's visible
if($("#popup_87").is(":visible"))
{
// Load the video and auto play
$("#popup_87 flex-video iframe").attr("src","http://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
}
}
</script>
EDIT since more code was added, put the trigger when they click on the link to load the video into the pop-up, otherwise don't load the video in the iframe:
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<!-- Removed the source -->
<iframe allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
I'm not sure if the following code works, but I just added LoadVideo to your script.
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
LoadVideo();
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>
I am working on a project using <video>, trying to make external HTML buttons play/pause, rewind slow, rewind fast, and fast forward control a video using JavaScript. I have the buttons appearing where I want them, but when I try to use them in the browser, they don't do anything to control the video, and the play button doesn't switch to pause and vice versa. I've tried for hours, looking all over the Web to find anything that I can use to help. Most solutions I find are using jQuery which I understand is easier, but it's not what I need. I just want to do it using pure JavaScript so I can better understand it. Included is my existing code. Any help on how I can get them to work would be appreciated!
HTML:
<script src="sample.js"></script>
<div class="jumbotron">
<div class="container">
<video id="video" poster="images/art/preview.png" width="100%" controls>
<source src="images/art/sample.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
<source src="images/art/sample.webm" type="video/webm; codecs="vp8, vorbis"">
<source src="images/art/sample.ogv" type="video/ogg; codecs="theora, vorbis"">
Your browser does not support HTML5 video
</video>
<div id="buttonbar">
<button type="button" id="fastBck">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" id="rew">
<span class="glyphicon glyphicon-backward"></span>
</button>
<button type="button" id="play-pause">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" id="fastFwd">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
</div>
</div>
JavaScript:
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
}
playButton.addEventListener("click", function(){
if (video.paused==true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
})
rewButton.addEventListener("click", function(){
//not sure exactly how to use currentTime to rewind, or fast forward
})
let the browser pick the right codecs for your video
you defined your variables out of scope (you've encapsulated them inside the onload function)
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
playButton.addEventListener("click", function(){
if (video.paused===true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
});
rewButton.addEventListener("click", function(){
//not sure exactly how to use currentTime to rewind, or fast forward
});
};
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
<div class="jumbotron">
<div class="container">
<video id="video" width="100%" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Your browser does not support HTML5 video
</video>
<div id="buttonbar">
<button type="button" id="fastBck"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" id="rew"><span class="glyphicon glyphicon-backward"></span></button>
<button type="button" id="play-pause"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" id="fastFwd"><span class="glyphicon glyphicon-fast-forward"></span></button>
</div>
</div>
</div>
Good luck with the fast forward and your other methods
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
playButton.addEventListener("click", function(){
if (video.paused==true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
})
rewButton.addEventListener("click", function(){
//not sure exactly how to use
currentTime to rewind, or fast forward
})
}
Move listeners inside onload function. Listeners won't be attached until the page is loaded. Respect for wanting to use vanilla JS, however unnecessary.
I have 2 videos in one page and each video have seek buttons but when I click on seek buttons on the first video the second video also effective. but when I click on the seek buttons in the second video it's working fine, so I want each self-contained independent video
flowplayer(function(api, root) {
$(".rewind").click(function (rebtn) {
if (api.playing) {
//var target = $(this).attr("id") == "forward" ? 3 : -3;
var target = document.getElementById(jQuery(rebtn).closest('div.video-container').find('video.myvideo').attr('id')) == "forward" ? -3 : -3;
api.seek(api.video.time + target);
}
});
$(".forward").click(function (fwtn) {
if (api.playing) {
//var target = $(this).attr("id") == "forward" ? 3 : -3;
var target = document.getElementById(jQuery(fwtn).closest('div.video-container').find('video.myvideo').attr('id')) == "forward" ? 3 : 3;
api.seek(api.video.time + target);
}
});
});
<div class="video-container">
<div class="flowplayer player">
<video class="myvideo" id="myvideo">
<source type="video/mp4" src="flow/1.mp4"/>
</video>
<div class="buttons">
forward
rewind
</div>
<div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div>
</div>
</div>
<div class="video-container">
<div class="flowplayer player">
<video class="myvideo" id="myvideo1">
<source type="video/mp4" src="flow/1.mp4"/>
</video>
<div class="buttons">
forward
rewind
</div>
<div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div>
</div>
</div>
Your flowerplayer function is running twice, once for each video; therefore, you are binding the click handler to all buttons with class .rewind/.forward twice.
You could make your binding more specific like this:
$(root).on("click", ".rewind", function (rebtn) {...
In this way, each time the function is run, it will only add a handler to the rewind/forward buttons that apply to this player.
You could also probably simplify to one handler:
flowplayer(function (api, root) {
$(root).on("click", ".rewind, .forward",function (rebtn) {
if (api.playing) {
var target = $(this).hasClass("forward") ? 3 : -3;
api.seek(api.video.time + target);
}
});
});
Working DEMO