回答：
由于这些答案的字符限制，我不得不清除很多以前的更新。
我设法让它与多个 iframe 一起工作..
唯一的问题是，如果有人播放 2 个不同的视频，然后点击不同的标签（暂停所有视频）然后他们回来，它将播放所有视频...我可以尝试弄清楚解决这个问题，但现在应该这样做。
请务必查看上面更新后的演示网站。
只需将此脚本放在包含您希望使用 Page Visible API 暂停/播放的视频的任何页面上，其余部分应自行处理。
您将需要使用以下内容：
const THE_IFRAME_SELECTOR = 'iframe[id^="h5p-iframe-"]'; // matches all iframes with an id that starts with h5p-iframe-
const THE_VIDEO_SELECTOR = 'video.h5p-video'; // since all videos appear to have the same class you don't need to change this
因此，新脚本应如下所示：
// ====================================================================================================================
// ~~~ SECOND SCRIPT ~~~
// THIS WAITS FOR THE IFRAME AND THE VIDEO INSIDE OF THE IFRAME TO BE CREATED BEFORE INITIALIZING THE PAGE VISIBLE API
// ====================================================================================================================
// "Global" variables.
const THE_IFRAME_SELECTOR = 'iframe[id^="h5p-iframe-"]'; // matches all iframes with an id that starts with h5p-iframe-
const THE_VIDEO_SELECTOR = 'video.h5p-video'; // since all videos appear to have the same class you don't need to change this
waitForMultipleElements(document, THE_IFRAME_SELECTOR, () => {
let ALL_IFRAMES = document.querySelectorAll(THE_IFRAME_SELECTOR);
ALL_IFRAMES.forEach(FOUND_IFRAME => {
let FOUND_IFRAME_SELECTOR = `#${FOUND_IFRAME.id}`;
console.log("FOUND_IFRAME_SELECTOR:", FOUND_IFRAME_SELECTOR)
waitForElement(document, FOUND_IFRAME_SELECTOR, () => {
waitForVideoElement(FOUND_IFRAME_SELECTOR, THE_VIDEO_SELECTOR, () => {
initPageVisibleApi(FOUND_IFRAME_SELECTOR, THE_VIDEO_SELECTOR);
});
});
});
});
function waitForMultipleElements(parentEl, selector, callback) {
let theInterval = setInterval(() => {
console.log('still waiting for all elements: ' + selector);
let elements = parentEl.querySelectorAll(selector);
if (elements.length) {
console.log("elements: " + selector + " exist!");
clearInterval(theInterval);
callback();
}
}, 1000);
}
function waitForVideoElement(iframeSelector, videoElementSelector, callback) {
let theIframeElement = document.querySelector(iframeSelector);
let iframeEl = theIframeElement.contentWindow.document;
waitForElement(iframeEl, videoElementSelector, () => {
callback()
});
}
function waitForElement(parentEl, selectorOfElementToWaitFor, callback) {
let theInterval = setInterval(() => {
console.log("still waiting for " + selectorOfElementToWaitFor);
let element = parentEl.querySelector(selectorOfElementToWaitFor);
if (element) {
console.log(selectorOfElementToWaitFor + " exists!");
clearInterval(theInterval);
callback();
}
}, 100);
}
function initPageVisibleApi(iframeSelector, videoSelector) {
// This is the same code that builds out the Page Visible API
// event listeners.
// The only difference is I wrapped it in a function and added
// parameters to make it flexible.
const iframe = document.querySelector(iframeSelector);
const innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
const videoElement = innerDoc.querySelector(videoSelector);
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
// To tell if video has been played yet or not
let VIDEO_HAS_BEEN_PLAYED = false;
// If the page is hidden, pause the video;
// if the page is shown, play the video
function handleVisibilityChange() {
if (VIDEO_HAS_BEEN_PLAYED) {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// When the video pauses, set the title.
// This shows the paused
const defaultTitle = document.title;
videoElement.addEventListener("pause", function () {
document.title = 'Paused - ' + defaultTitle;
}, false);
// When the video plays, set the title.
videoElement.addEventListener("play", function () {
VIDEO_HAS_BEEN_PLAYED = true;
document.title = 'Playing - ' + defaultTitle;
}, false);
}
}
// ====================================================================================================================
// ---------- END SECOND SCRIPT ------------
// ====================================================================================================================