Skip to content

Commit

Permalink
Merge pull request #63 from adobe/autoplay-placeholder
Browse files Browse the repository at this point in the history 
Autoplay placeholder
  • Loading branch information
@shsteimer
shsteimer authored Jun 13, 2024
2 parents 98b7b86 + 765cb81 commit b8e26a5
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 54 deletions.
16 changes: 8 additions & 8 deletions blocks/video/video.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
.video {
width: unset;
text-align: center;
max-width: 800px;
margin: 32px auto;
}

.video.lazy-loading {
.video[data-embed-is-loaded="false"]:not(.placeholder) {
/* reserve an approximate space to avoid extensive layout shifts */
aspect-ratio: 16 / 9;
}
Expand All @@ -19,12 +18,6 @@
max-width: 100%;
}

.video video[data-loading] {
/* reserve an approximate space to avoid extensive layout shifts */
width: 100%;
aspect-ratio: 16 / 9;
}

.video .video-placeholder {
width: 100%;
aspect-ratio: 16 / 9;
Expand All @@ -39,6 +32,13 @@
inset: 0;
}

.video[data-embed-is-loaded="true"] .video-placeholder,
.video[data-embed-is-loaded="false"] .video-placeholder + * {
visibility: hidden;
height: 0;
width: 0;
}

.video .video-placeholder picture img {
width: 100%;
height: 100%;
Expand Down
107 changes: 61 additions & 46 deletions blocks/video/video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@
* https://www.hlx.live/developer/block-collection/video
*/

function embedYoutube(url, replacePlaceholder, autoplay) {
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

function embedYoutube(url, autoplay, background) {
const usp = new URLSearchParams(url.search);
let suffix = '';
if (replacePlaceholder || autoplay) {
if (background || autoplay) {
const suffixParams = {
autoplay: '1',
mute: autoplay ? '1' : '0',
controls: autoplay ? '0' : '1',
disablekb: autoplay ? '1' : '0',
loop: autoplay ? '1' : '0',
playsinline: autoplay ? '1' : '0',
autoplay: autoplay ? '1' : '0',
mute: background ? '1' : '0',
controls: background ? '0' : '1',
disablekb: background ? '1' : '0',
loop: background ? '1' : '0',
playsinline: background ? '1' : '0',
};
suffix = `&${Object.entries(suffixParams).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')}`;
}
Expand All @@ -32,13 +34,13 @@ function embedYoutube(url, replacePlaceholder, autoplay) {
return temp.children.item(0);
}

function embedVimeo(url, replacePlaceholder, autoplay) {
function embedVimeo(url, autoplay, background) {
const [, video] = url.pathname.split('/');
let suffix = '';
if (replacePlaceholder || autoplay) {
if (background || autoplay) {
const suffixParams = {
autoplay: '1',
background: autoplay ? '1' : '0',
autoplay: autoplay ? '1' : '0',
background: background ? '1' : '0',
};
suffix = `?${Object.entries(suffixParams).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')}`;
}
Expand All @@ -52,22 +54,18 @@ function embedVimeo(url, replacePlaceholder, autoplay) {
return temp.children.item(0);
}

function getVideoElement(source, replacePlaceholder, autoplay) {
function getVideoElement(source, autoplay, background) {
const video = document.createElement('video');
video.setAttribute('controls', '');
video.dataset.loading = 'true';
video.addEventListener('loadedmetadata', () => delete video.dataset.loading);
if (autoplay || replacePlaceholder) {
video.setAttribute('autoplay', '');
if (autoplay) {
video.setAttribute('loop', '');
video.setAttribute('playsinline', '');
video.removeAttribute('controls');
video.addEventListener('canplay', () => {
video.muted = true;
video.play();
});
}
if (autoplay) video.setAttribute('autoplay', '');
if (background) {
video.setAttribute('loop', '');
video.setAttribute('playsinline', '');
video.removeAttribute('controls');
video.addEventListener('canplay', () => {
video.muted = true;
if (autoplay) video.play();
});
}

const sourceEl = document.createElement('source');
Expand All @@ -78,50 +76,67 @@ function getVideoElement(source, replacePlaceholder, autoplay) {
return video;
}

const loadVideoEmbed = (block, link, replacePlaceholder, autoplay) => {
if (block.dataset.embedIsLoaded) {
const loadVideoEmbed = (block, link, autoplay, background) => {
if (block.dataset.embedIsLoaded === 'true') {
return;
}
const url = new URL(link);

const isYoutube = link.includes('youtube') || link.includes('youtu.be');
const isVimeo = link.includes('vimeo');
const isMp4 = link.includes('.mp4');

let embedEl;
if (isYoutube) {
embedEl = embedYoutube(url, replacePlaceholder, autoplay);
const embedWrapper = embedYoutube(url, autoplay, background);
block.append(embedWrapper);
embedWrapper.querySelector('iframe').addEventListener('load', () => {
block.dataset.embedIsLoaded = true;
});
} else if (isVimeo) {
embedEl = embedVimeo(url, replacePlaceholder, autoplay);
} else if (isMp4) {
embedEl = getVideoElement(link, replacePlaceholder, autoplay);
const embedWrapper = embedVimeo(url, autoplay, background);
block.append(embedWrapper);
embedWrapper.querySelector('iframe').addEventListener('load', () => {
block.dataset.embedIsLoaded = true;
});
} else {
const videoEl = getVideoElement(link, autoplay, background);
block.append(videoEl);
videoEl.addEventListener('canplay', () => {
block.dataset.embedIsLoaded = true;
});
}
block.replaceChildren(embedEl);

block.dataset.embedIsLoaded = true;
};

export default async function decorate(block) {
const placeholder = block.querySelector('picture');
const link = block.querySelector('a').href;
block.textContent = '';
block.dataset.embedIsLoaded = false;

const autoplay = block.classList.contains('autoplay');
if (placeholder) {
block.classList.add('placeholder');
const wrapper = document.createElement('div');
wrapper.className = 'video-placeholder';
wrapper.innerHTML = '<div class="video-placeholder-play"><button type="button" title="Play"></button></div>';
wrapper.prepend(placeholder);
wrapper.addEventListener('click', () => {
loadVideoEmbed(block, link, true, false);
});
wrapper.append(placeholder);

if (!autoplay) {
wrapper.insertAdjacentHTML(
'beforeend',
'<div class="video-placeholder-play"><button type="button" title="Play"></button></div>',
);
wrapper.addEventListener('click', () => {
loadVideoEmbed(block, link, true, false);
});
}
block.append(wrapper);
} else {
block.classList.add('lazy-loading');
}

if (!placeholder || autoplay) {
const observer = new IntersectionObserver((entries) => {
if (entries.some((e) => e.isIntersecting)) {
observer.disconnect();
loadVideoEmbed(block, link, false, block.classList.contains('autoplay'));
block.classList.remove('lazy-loading');
const playOnLoad = autoplay && !prefersReducedMotion.matches;
loadVideoEmbed(block, link, playOnLoad, autoplay);
}
});
observer.observe(block);
Expand Down

0 comments on commit b8e26a5

Please sign in to comment.