Я только что понял это.
Squarespace создает своих собственных игроков, а также динамически создает фреймы, поэтому это немного сложно.Кроме того, получение проигрывателя с использованием элемента DOM, похоже, не работает, и все элементы iframe имеют одинаковый id = "player", так что это усугубляет проблему.
Приведенный ниже код - это то, к чему я пришел буквально 5 минут назад,Просто скопируйте / вставьте вставку кода заголовка в конфигурацию Squarespace.
Что он делает, так это как можно скорее получает все оригинальные плееры YouTube API и приостанавливает воспроизведение, чтобы избежать ужасной задержки, когда мой старый графический процессор пытается воспроизвести видео-декодировать все эти видео экземпляры.Затем у меня есть код, который воспроизводит видео, когда оно появляется на экране, и приостанавливает видео, которые больше не видны.Теперь это играет гладко, и я могу добавить еще больше видео.В моем случае вы можете видеть по одному полноэкранному видео за раз при прокрутке вниз.У меня есть 7x 720p видео сложены.Это выглядит круто, но я обнаружил, что мой GPU сильно отстает, когда используется более 5 видео, изначально я думал, что это проблема скорости сети, но мой диспетчер задач показал 100% кодирование видео на GPU.До сих пор работал над Firefox и Chrome.
Мне только что удалось сделать эту работу, так что предстоит много тестирования и настройки.
ИСПОЛЬЗУЙТЕ НА СВОЙ РИСК!:)
<script type="text/javascript">
// Prepare YouTube iframe API ..
// this is probably redundant, but works fine
var tag = document.createElement ('script');
tag.id = 'iframe-api';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName ('script')[0];
firstScriptTag.parentNode.insertBefore (tag, firstScriptTag);
// When Iframe is ready ..
var iframes = [];
var players = [];
function onYouTubeIframeAPIReady () {
// console.log ("onYouTubeIframeAPIReady");
var player_containers = document.querySelectorAll (".sqs-video-background.content-fill");
for (var i = 0; i < player_containers.length; i ++) {
player_containers [i].addEventListener ("DOMNodeInserted", function (e) {
var node = e.target;
if (node.tagName.toUpperCase () === "IFRAME") {
// console.log ("PLAYER : " + node.id + " TAG : " + node.tagName);
iframes.push (node);
// unfortunately it seems that we cannot catch the player creation event so
// the actual players are probably created after this code
// by calling this function we can catch previous players early on
// except the last one
initPlayers ();
}
}, false);
}
}
function initPlayers () {
// they have all the same id (!!!)
// however it seems it picks the last created one so not the same one over and over
// I didn't touched this, it works so far
var player = YT.get ("player");
if (player !== undefined) {
players.push (player);
pausePlayer (player);
}
}
function playPlayer (player) {
// this happends when player is not fully initialized yet
if (typeof player.pauseVideo === "function") {
player.playVideo ();
} else {
// if the player is not ready yet catch the event
player.addEventListener ('onReady', function (event) {
player.playVideo ();
});
}
}
function pausePlayer (player) {
// this happends when player is not fully initialized yet
if (typeof player.pauseVideo === "function") {
player.pauseVideo ();
} else {
// if the player is not ready yet catch the event
player.addEventListener ('onReady', function (event) {
player.pauseVideo ();
});
}
}
function isInViewport (element, edge) {
var h = window.innerHeight; // viewport height
var r = element.getBoundingClientRect (); // elements bounding rect in viewport coordinates
// console.log ("top : " + r.top);
// console.log ("bottom : " + r.bottom);
// console.log ("height : " + h);
// add extra margin to the viewport to ensure that
// big enough portion of the object is already visible
var e = h * Math.min (edge, 0.4); // relative viewport factor, max 40%
var top = r.top - e;
var bottom = r.bottom - e;
h = h - e*2;
return (!((top > h) || (bottom < 0)));
}
window.onload = function(e){
// console.log ("loaded");
initPlayers (); // to catch the last one !
// console.log ("players : " + players.length);
function onScroll () {
for (var i = 0; i < players.length; i ++) {
var player = players [i];
var iframe = player.getIframe ();
var container = iframe.parentNode;
if (isInViewport (container, 0.0)) {
playPlayer (player); } else {
pausePlayer (player);
}
}
}
// in the case object is already in the viewport
onScroll ();
window.addEventListener ("resize", onScroll);
window.addEventListener ("scroll", onScroll);
}
</script>