Possible to trigger on Vimeo video click? - javascript

Is it possible to trigger an action on click if a video is set to background=1 (no controls)?
This is a Vimeo video, plus account (where background=1 is permitted).
Essentially, I have a Vimeo video with no controls set to loop and autoplay with a volume of 0. My implementation has an icon overlayed on top of the video, in the center. When clicked, it is set to full volume and the icon is hidden.
Once the volume is set to 1 and the icon is hidden, the person viewing should have the option of clicking the video so as to mute it (set volume to 0).
The problem is that I am not able to figure out how to target this click. I have tried attaching an .on('click') to the iframe, its parent, and as far up the chain as I can go but beyond that first click of the icon, the click is never registered.
Can anyone please offer any pointers on how to target a click on a Vimeo iframe video (or its parent container, etc)?
Here is my code thus far:
var iframe = document.getElementById('vimeo-video');
var player = new Vimeo.Player(iframe);
player.ready().then(function() {
var volume = 0
player.setVolume(volume);
$('#vimeo-video-play').on('click', function(event) {
if (volume > 0) {
player.setVolume(0);
} else {
player.setVolume(1);
}
$('#vimeo-video-play').hide();
});
});

Vimeo Promises
It appears that if you use Vimeo API, you must return a Promise. If you just want to do a simple task such as controlling the volume, the documentation gives this example:
player.setVolume(0.5).then(function(volume) {
// volume was set
}).catch(function(error) {
switch (error.name) {
case 'RangeError':
// the volume was less than 0 or greater than 1
break;
default:
// some other error occurred
break;
}
});
Not simple, and it's overkill. It's not apparent by looking at it but if you see then(), await async, new Promise you can say with 99.9% certainty that a Promise will be returned. I haven't looked deep enough into player.js but I think each method is wrapped in a Promise so as far as I could tell, we can just return the method without using all of that extra crap. So compare the above code to the following:
var sVol = player.setVolume(1); return sVol;
So I believe when invoking a Vimeo API method, we can return the function as a value. There's no work involving what exactly that value is because it's going to be either resolved or rejected. A Promise is also immutable so returning the function itself should be a guaranteed resolve (concerning Vimeo methods, not Promises in general).
Overlay Layout
Instead of clicking an iframe which is filled with a video player that will do 100 other tasks except your custom callback, you need to click an element outside of the iframe. As a background video without controls, you are very limited. I suggest an element that covers the iframe player edge to edge so that the user clicks it and nothing else. The following are the steps to setup an overlay:
Wrap the iframe player (#vFrame0 in the demo) in a relpos🞳 parent container (a.k.a. .box)
Place an older sibling🗡 abspos🞳 element (a.k.a. .overlay) inside the parent with the iframe player.
Set the older sibling "above" the player by setting its z-index at l more than the iframe player and the necessary CSS properties (see demo CSS for .overlay) to ensure that the older sibling covers the iframe player edge to edge completely.
Register the click event to the overlay element so when the player ignores the click event, the event will bubble back to the older sibling overlay element. The overlay element is now a proxy of sorts and will run the callback:
var sVol = player.setVolume(1); return sVol
Demo
This Demo does not function because there are conflicts between Vimeo's connections and SO's security measures. For a functioning Demo review this Plunker or this Plunker.
<!DOCTYPE html>
<html>
<head>
<base href="https://player.vimeo.com/api/demo">
<meta charset='utf-8'>
<style>
.box {
display: table;
border: 3px dashed red;
position: relative;
}
.overlay {
cursor: pointer;
display: table-cell;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-height: 100%;
z-index: 1;
}
.overlay::before {
position: absolute;
cursor: pointer;
display: block;
content: '🕪';
font-size: 2em;
width: 2em;
height: 2em;
color: cyan;
opacity: 0;
transition: opacity .5s ease 3s;
}
.overlay:hover::before {
opacity: 1;
transition: .5s ease;
}
.mute.overlay::before {
content: '🕩';
}
</style>
</head>
<body>
<figure class='box'>
<figcaption class='overlay mute'></figcaption>
<div id='vFrame0' data-vimeo-id="76979871" data-vimeo-autoplay data-vimeo-background></div>
</figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://player.vimeo.com/api/player.js'></script>
<script>
var player = new Vimeo.Player('vFrame0', options);
var options = {
mute: true
};
$('.overlay').on('click', function(e) {
var state = $(this).hasClass('mute') ? player.setVolume(1) : player.setVolume(0);
$(this).toggleClass('mute');
return state;
});
</script>
</body>
</html>
🞳relpos: position: relative | abspos position: absolute
🗡older sibling an element that is positioned before the element being referred to.

$('.button-trigger').click(function (e) {
let element = $('iframe').attr('src');
element = element.replace("autoplay=0", "autoplay=1");
$('iframe').attr('src', element);
});

Related

Buggy snap-scrolling while DOM changes

I have a feed of photos that are scrolled vertically in my app and I'm using snap scroll.
The feed is a virtual scroller, i.e. - only X elements are actually on the DOM, and elements above and below are removed/inserted as needed.
Important to note that this is a mobile web app.
However, when I scroll and DOM changes happen while scrolling, I'm getting the following buggy behaviors:
The previous photo flickers while transitioning to the next photo
The feed scrolls to the previously seen photo (doesn't repro 100% of the times)
I created a simulation in Codepen to repro the issues; a div is added to the DOM every 0.5secs, and trying to scroll while on mobile view repros both issues - [link to Codepen], please use a mobile view.
HTML:
<div class="snap-scroll-container"></div>
JS:
const snapScrollContainer = document.querySelector(".snap-scroll-container");
[
"https://media.istockphoto.com/photos/gray-british-cat-kitten-picture-id1086004080?k=20&m=1086004080&s=612x612&w=0&h=tvQKNjBGIsfCmUPR8YVJYfjLrTZ9JINbisKRjMj87IY=",
"https://images.unsplash.com/photo-1595433707802-6b2626ef1c91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80",
"https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
"https://images.unsplash.com/photo-1574144611937-0df059b5ef3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",
"https://www.warrenphotographic.co.uk/photography/bigs/08483-Ginger-kitten-portrait.jpg",
"https://img.freepik.com/premium-photo/kitten-portrait-beautiful-fluffy-gray-kitten-cat-animal-baby-british-blue-kitten-with-big-eyes-sits-beige-plaid-looking-camera-blue-background_221542-1665.jpg?w=740",
"https://libreshot.com/wp-content/uploads/2018/02/cute-kitten-portrait-861x1292.jpg",
"https://www.warrenphotographic.co.uk/photography/bigs/35147-Portrait-of-tabby-kitten-8-weeks-old.jpg",
].forEach((src) => {
const image = document.createElement("img");
const div = document.createElement("div");
div.setAttribute("class", "snap-scroll-child");
image.setAttribute("src", src);
div.appendChild(image);
snapScrollContainer.appendChild(div);
});
const addEmptyDiv = () => {
const div = document.createElement("div");
div.innerHTML = "bla";
snapScrollContainer.appendChild(div);
}
setInterval(addEmptyDiv, 500);
CSS:
body {
margin: 0;
padding: 0;
}
.snap-scroll-container {
scroll-snap-type: y mandatory;
height: 100vh;
overflow-y: scroll;
}
.snap-scroll-child {
scroll-snap-stop: always;
scroll-snap-align: end;
}
img {
object-fit: cover;
height: 100vh;
width: 100vw;
}
Unfortunately giving up on the virtual scroller is not an option as the perf hit will be large.
Going over SO and docs (including docs about restoring scroll position automatically after DOM changes), I couldn't find any plausible solution, other than maybe:
Implementing snap scroll in JS (I would rather not)
Deferring DOM changes until scrolling is complete (not optimal)
[Link to GIF showing the issue]

Getting the (final) height of an element while its dimensions are being transitioned via CSS

When requesting the dimensions of an element currently in a CSS transition, jQuery will return the current value of the element's height at the given time of when the dimensions are requested.
While this is right and well, it often isn't what's needed. I have many cases in which I'd like to retrieve the final dimensions that the element will have after the transition, but while the transition is still in progress.
How can I reliably retrieve the dimensions of an element while its still in transition?
$(document).ready(function() {
$('#one').on('click', function() {
$(this).addClass('trans');
$('#output').text($(this).height());
var self = $(this);
setTimeout(function() {
$('#output').text(self.height());
}, 200);
});
});
#output {}
#one {
width: 200px;
height: 200px;
background: red;
transition: all 1s linear;
}
#one.trans {
height: 600px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="output">...</div>
<div id="one"></div>
See this codepen example
The thing about using setTimeout is that you're forced to use a somewhat arbitrary value. You can use requestAnimationFrame, which should force the code to execute after the transition
A lot of times, you need to wait until the second animation frame, so:
requestAnimationFrame(function() {
requestAnimationFrame(function() {
$('#output').text(self.height());
});
});

When to start deleting video elements to prevent browser lag?

I'm trying to make a website which will keep on adding video players to the page as the page is being scrolled down. Though I have some concerns that large amount of video players on a page can cause lag on the website and cause the website to slow down. I think I have experienced slow down during some tests of my website. So is it possible to detect whether the website is being slowed down due of the amount of elements on the web and so I can start deleting the video elements from the top of the page?
index.html:
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
timeout = undefined;
for (var x=0;x<50;x++) {
var video = document.createElement("video");
video.style.backgroundColor = "orange";
video.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg";
video.src = "https://dash.akamaized.net/akamai/bbb/bbb_3840x2160_60fps_18000k.mp4";
video.controls = true;
content.appendChild(video);
}
window.addEventListener("scroll", function () {
var $this = this;
window.clearTimeout(timeout);
timeout = setTimeout(function() {
var content_margin_top = $this.innerHeight * 0.11;
var last_player = content.children[content.querySelectorAll("video").length - 1];
if (last_player.offsetTop - content_margin_top <= $this.scrollY) {
for (var x=0;x<10;x++) {
var video = document.createElement("video");
video.style.backgroundColor = "orange";
video.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg";
video.src = "https://dash.akamaized.net/akamai/bbb/bbb_3840x2160_60fps_18000k.mp4";
video.controls = true;
content.appendChild(video);
}
}
}, 250);
});
body {
margin: 0;
}
#nav {
width: 100%;
height: 10%;
position: absolute;
top: 0;
background-color: rgb(108, 171, 247);
}
#content {
height: 100%;
width: 98%;
position: absolute;
top: 11%;
left: 1%;
}
video {
width: 100%;
height: 75%;
border: 1px solid black;
}
<html>
<head>
<title></title>
</head>
<body>
<div id="nav"></div>
<div id="content"></div>
</body>
</html>
I would think about the issue in a slightly different way: What should I do to make that page work as fast as possible, downloading as little data as possible and render only necessary containers when needed?
My recommendations:
1) Don't append and init video containers on during scroll. Render only thumbnails for future video containers using img tags. Making lazy loading for these images should be considered as well. Add "play" button to the center of preview container. Once user clicks on the button - render video tag with a proper src and play it.
2) Don't use a scroll event listener to detect containers offsets and lazy loading. Use Intersection API instead.

Trigger jQuery events one after another

Hi I am trying to create an animation where one class is added only after the one before it is finished triggered.
$('.flipper').click(function(){
$('#first').addClass('first-flip');
$('#second').addClass('second-flip');
$('#fourth').addClass('fourth-flip');
});
so
$('#second').addClass('second-flip');
would only trigger when
$('#first').addClass('first-flip');
has finished its process.
so another way of explaining this would be.
Block A has a rotate effect added to it, after Block A is rotated, only then will Block B move 20 px right.
I basically just want to know how to create Jquery effects that trigger in sequential order.
You want to tie into transitionend or animationend. Here is an example using transitionend. After the box has finished moving, a new class is added which begins the next transition to turn the box blue.
var mydiv = document.querySelector("#mydiv");
document.querySelector("button").addEventListener("click", buttonHandler);
mydiv.addEventListener("transitionend", onEndHandler)
function buttonHandler() {
mydiv.classList.add("move-left");
}
function onEndHandler() {
mydiv.classList.add("turn-blue");
}
#mydiv {
background: red;
width: 10em;
height: 10em;
transition: 1s;
}
#mydiv.move-left {
transform: translateX(100px);
}
#mydiv.turn-blue {
background: blue;
}
<div id="mydiv"></div>
<button>Move div</button>
If you need the jQuery version, it's here:
var mydiv = $("#mydiv");
$("button").on("click", buttonHandler);
mydiv.on("transitionend", onEndHandler)
function buttonHandler() {
mydiv.addClass("move-left");
}
function onEndHandler() {
mydiv.addClass("turn-blue");
}
Nice resource: https://davidwalsh.name/css-animation-callback

How do you listen for a HTML element moving in JavaScript?

I have an HTML element that I need to track another element. Specifically, I need to have the top left and top right corners of both elements be positioned the same. When a window gets resized, the resize event gets triggered and I can adjust the position of the dependent element. However, if the element being tracked is repositioned (but not resized), I do not see any DOM event.
How can we find out if a DOM element has been moved? We are using the latest jQuery.
Here is a code sample.
Note that elementOne and mouseTracking divs are there to show elements that get moved for "some" reason that is outside the control of my code.
This code works for the elementOne case.
MouseTrackingTracker does not track a moving element.
ResizerTracker does not put the border around the complete text in the overflow case.
I would like the trackingDivs to move and resize no matter the reason for the tracked element's reasons for changing.
This code relies on the window resize being the hooked event. Hooking some event that fires when the element changes its dimensions is closer to what I need.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<style type="text/css">
#elementOne { float : right;width : 200px; display:inline-block}
#resizer { float : left; display:inline-block}
.trackedDiv { width:50px; height:50px; background-color: blue }
.trackingDiv { position:absolute; z-index: 1; border:3px green; border-style: solid;}
</style>
<script>
$(function() {
$( window ).bind("resize",function(){
$("#elementOne").trigger("reposition");
$("#mouseTracking").trigger("reposition");
$("#resizer").trigger("reposition");
});
var repositionFunction = function(selfish, element){
var self = $(selfish);
var offset = self.offset();
var selfTop = offset.top;
var selfLeft = offset.left;
var selfWidth = self.width();
var selfHeight = self.height();
$(element).css({
top: selfTop,
left: selfLeft,
width : selfWidth,
height : selfHeight
});
}
$(document).mousemove(function(ev){
$("#mouseTracking").position({
my: "left bottom",
of: ev,
offset: "3 -3",
collision: "fit"
});
});
var timedShort = function() {
$('#resizer').html("Really short").resize();
setTimeout(timedLong, 10000);
}
var timedLong = function() {
$('#resizer').html("Really longggggggggggggggggggggggggggggggggggggggggggggggggggg text").resize();
setTimeout(timedShort, 10000);
}
setTimeout(timedLong, 10000);
$("#elementOne").bind("reposition",
function() { repositionFunction(this, "#elementOneTracker"); });
$("#mouseTracking").bind("reposition",
function() { repositionFunction(this, "#mouseTrackingTracker"); });
$("#resizer").bind("reposition",
function() { repositionFunction(this, "#resizerTracker"); });
});
</script>
</head>
<body>
<div class="trackedDiv" id="mouseTracking">tracks mouse</div>
<div class="trackingDiv" id="mouseTrackingTracker"></div>
<div style="clear:both;"></div>
<div class="trackedDiv" id="resizer">resizer: resizes</div>
<div class="trackingDiv" id="resizerTracker"></div>
<div class="trackedDiv" id="elementOne">elementOne: floats to the right</div>
<div class="trackingDiv" id="elementOneTracker"></div>
</body>
</html>
You can fire custom events with jquery whenever you reposition the element.
$( window ).bind("resize",function(){
$("#elementOne").css({
top: 200,
left: 200
}).trigger("reposition");
});
// and now you can listen to a "reposition event"
$("#elementOne").bind("reposition",function(){
var self = $(this);
$("#elementTwo").css({
top: self.css("top"),
left: self.css("left")
});
});
So you can provide event hooks yourself with some manual coding, which is useful since cool events like DOMAttrModified and so on, are not fully supported in all browsers. The downside, you have to do it all yourself.
Unfortunately, there are no reliable events to tell you when an element moves or is resized. You could resort to polling the element, though that won't necessarily be the most performant solution:
setInterval(repositionElement, 10);
Another option is to make your element "track" the other element purely through CSS. For this to work, you'll need a "wrapper" around the element you're tracking, and the other element:
#wrapper-around-element-to-track
{
position: relative;
}
#tracked-element
{
position: absolute;
/* set top and left to position, if necessary */
}
#tracking-element
{
position: absolute;
/* set top and left to position, if necessary */
}
Since you're already using jQuery, you can also use the resize event plugin to simulate the resize event on any element, but if I recall the last time I looked at it, it simply does the polling like I mentioned.
There is the DOMAttrModified event, but its only impleneted in Firefox and Chrome. But as you need a JavaScript function to start the element moving, you can firing a custom event with Jquery in this place.

Categories