Develop Reference

using popups for divi and the diviarea functions, need to add code to my code snippet to pause a background video when a popup is triggered

what I need help with is adding some code to a snippet I have that autoruns a video in a popup when the popup is triggered and it auto closes the popup when the video ends. However, I have a couple of pages that also have a divi section background video. and I'm seeing some performance glitches. so I am aiming to add some code that pauses the background video when the popup is triggered.
I did find this snippet that pauses a background video on mouse hover so I think I am on the right track.
window.onload = function() {
let videoBg = document.getElementsByClassName('mejs-mediaelement')[0].firstElementChild.firstElementChild;
let bg = document.getElementsByClassName('et_pb_section_video')[0];
videoBg.pause();
bg.addEventListener('mouseover', function() {
videoBg.play();
});
bg.addEventListener('mouseleave', function() {
videoBg.pause();
});
}
so this tests out good on my pages the video pauses when the mouse leaves the page.
here is my code snippet I currently have to control auto play and auto close.
jQuery(document).ready(function($) {
homeVideoElement1 = $("#divi-video-container1 video")[0];
homeVideoElement2 = $("#divi-video-container2 video")[0];
DiviArea.addAction('show_area', function(area) {
if (area.hasId('sim-intro')) {
homeVideoElement1.play();
}
if (area.hasId('libraryintro')) {
homeVideoElement2.play();
}
// console.log('im open');
});
$('video').on('ended', function() {
//console.log('Video has ended!');
$('a.da-close').trigger('click');
});
});
could someone help me with some code to add to my snippet to pause the background video? is someone familiar with divimode.com js API?
at the moment I am unsure how to proceed, divimode.com's documentation has some broken links
so halfway down the links to JS API Overview and Code Generator return a 404 error. I did leave a message with the customer support sales side of things on divimode.com I don't have access to their tech support side.

Youtube video autoplay with jquery

I wanted to make a website with Youtube video iframes, which starts to play on hover.
I've found this post Play youtube video on hover
This code works(video start to play on hover) but not all videos work (links seem to be broken).
The same thing happens when I use other videos so that's not broken links. I've found a post suggesting changing 'iframe' into 'embed' and this fixed broken links but then script stops working.
My script looks like below:
https://codepen.io/EwelinaWoloszyn/pen/dybQGWe
<script>$(document).ready(function(){
var nowPlaying = "none";
$('div').hover(function(){
nowPlaying = $(this).find('embed').attr('src');
$(this).find('embed').attr('src',nowPlaying+'&autoplay=1');
}, function(){
$(this).find('embed').attr('src',nowPlaying);
});
});
What should I change to make it work?
Many thanks in advance,
Neko

God forbid me for using W3Schools, but video elements in HTML5 have play() function in JavaScript
Documentation: https://www.w3schools.com/tags/av_met_play.asp
Your code:
$('div').hover(() => {
$(this).find('embed').play();
});

Simple pause with vimeo api Froogaloop

Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.
There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.
Here's a FIDDLE, and my current jquery script to hide the video
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#video').hide();
}
});
which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone

Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.
Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.
var iframe = $('#video iframe')[0];
var player = $f(iframe);
$('.showvideo').on('click', function(){
$('#video').show();
$('.image').hide();
player.api('play');
});
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
$('#video').hide();
$('.image').show();
player.api('pause');
}
});
Remember to append api=1 to the vimeo link. And the url must be https, not http.

froogaloop can be a pain in the arse.
The code to get you started is here:
https://developer.vimeo.com/player/js-api#universal-with-froogaloop
I've adapted that to get it working i think how you expect here:
https://jsfiddle.net/fLe5xs4v/
Setting it up like so:
var iframe = $('#video iframe')[0];
var player = $f(iframe);
Note that if you change the text in the play and pause buttons you will break this code:
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
Give it a shot it should get you going in the right direction at least. Good luck!

Pause all other players besides activated one. jQuery audio plugin for <audio> element

I've got this plugin which applies different style to html5 <audio> element and provides flash fallback to browsers that don't support .mp3 file format. Problem I encountered is that once you start playing one song, and then click play on any other song, all of them will play at the same time, which is bad user experience.
I was trying to figure out how to edit plugin to make it only play one song at a time, so say if user listens to one song and then click play on other, first one should pause, and so on.
I'm not entirely sure, but I think something need's to be edited along these lines:
playPause: function() {
if (this.playing) this.pause();
else this.play();
},
However, there are various places in the plugin which seem to deal with playing and pausing song, so I'm not sure that this is exact correct line for this. I'm still very new to jQuery, and can't entirely figure out how this big audio library works, I've been reading through code comment's , but still am unable to figure this out.
Full code of the plugin is available here: http://freshbeer.lv/mg/js/audio.min.js Official plugin website: http://kolber.github.io/audiojs/
You can visit my demo page to see the issue, just click play on several players and you will see that they all play at the same time: http://freshbeer.lv/mg/index.html

Use the addEventListener and the play event. This pauses all players except the one that the play button has been pressed on.
audiojs.events.ready(function () {
var as = audiojs.createAll();
$('audio').each(function () {
var myAudio = this;
this.addEventListener('play', function () {
$('audio').each(function () {
if (!(this === myAudio)) {
this.pause();
}
});
});
});
});

Using JQuery toggle feature to show/hide a youtube but can't get it to stop playing on hide

I am using the jquery function to toggle a youtube video element on my site. It works great and shows/hides its as needed. However I can't find a way to stop the video playing on hiding the div. I keep reading about destroying the element then recalling it on the toggle but I don't know enough about the code to know how or where to do that within the toggle functions. Any help would be amazing. I've added my code below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
.vidblock
{
background:#ccc;
width:430px;
height:320px;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.toggle').click(function(){
$('.vidblock').toggle("slow");
});
});
</script>
and
<h3>Click to view a video of how and where to enter <?=$merch_array['Name']?> <?=$merch_array['Term_Used']?>s</h3>

Okay! This one took me a little while to figure out, and when I tell you it's going to make sense.
Make sure you are calling the youtube api:
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
When hiding your div, use jquery to change the source of the video to the same video, without using autoplay. This stops the video from playing, and also sets it back up.
Another cool thing I found, is when opening my div, I turned it on autoplay.
You can see a demo on this page: http://advantageanywhere.com/index.aspx?sid=250
Click on the play link and it's going to open a lightbox (similar to what you are doing, showing and hiding the div. In it's original state I have it sitting there while hidden as a regular embed link. Once clicked, then it turns to autoplay, then when escape or X is clicked, it will close the lightbox and also change the video back to a normal embed (stops the playing)
We will take for example the following video:
The original embed from youtube [adding AN ID ( youtube ) to it to target in jquery, and the parm for youtube api ( ?enablejsapi=1 ) ]:
That is how you should have the image started off in it's hidden div.
Once the div is opened this is the jquery you need:
$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
Now, when the div is being hidden, this is the jquery you need:
$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
Below is the entire script I have setup. I tried throwing this together for you in a fiddle but I don't have the time right now and just stumbled upon your question when I am trying to punch out a deadline.
If you have any other questions I don't mind helping out, please.
$(window).load(function(){
var KEYCODE_ESC = 27;
$(document).keyup(function(e) {
if (e.keyCode == KEYCODE_ESC) { closeLightBox(); }
});
function closeLightBox() {
$("#lb1, #lb4").fadeOut();
$("#featureContent, #videoContent").hide();
$('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
}
/* ------------ Light Box 4 Video ------------- */
var lightBox4 = $('#lb4'),
videoContent = $('#videoContent');
$('#anywhereVideo').click(function() {
lightBox4.fadeIn(function() {
videoContent.show();
$('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
});
});
$('#close4').click(function() {
closeLightBox();
});
});

You don't have to destroy the element, just use the YouTube JavaScript API ( http://code.google.com/apis/youtube/js_api_reference.html ) to pause or stop the video.
You give the object a playerapiid, then you can target it with JavaScript.

You could use 'detach' -
$(function() {
var savedNodes;
$('.toggle').toggle(function() {
$('.vidblock').hide('slow', function() {
savedNodes = $('yourplayerid').detach();
});
}, function() {
$('.vidblock').append(savedNodes)
$('.vidblock').show('slow');
});
});
Demo - http://jsfiddle.net/Sf4LT/2/