בקשת code review... סקריפט המרת וידיאו ב-iframe
-
בעיה שמצאתי,
https://www.apple.com/mac-pro
אם לוחצים על:
יש שם סרטון שמכוסה על ידי הודעת שגיאה, הודעת השגיאה עולה על גבי אלמנט הוידיאו וה-iframe של נטפרי (גם אם ניתן לו z-index גבוה), מכיון שהםposition: staticוהודעת השגיאה הואposition: absolute.התיקון לכאורה הוא להוסיף אחרי שורה 59:
if (newNode.style.position == "static") newNode.style.position = "relative";האם זה יגרום לתופעת לוואי לא רצויות?
-
עוד מקרה,
https://www.vishay.com/videos/capacitorsconnectors/estaspring-connection-8211-product-overview.html
כאן אלמנט הוידיאו לא זורק שגיאה, מכיון שעוד לא קייםsrc, זאת מכיון שיש שגיאה קודמת של קריאת AJAX.
מה הפתרון?עריכה: לכאורה אין פתרון, כי גם אם נצליח לזהות את מצב החסימה, עדיין איננו יודעים מהו ה-
srcשל הוידיאו כדי לשלוח פניהעריכה2: פתחו את החסימה, מתברר שה-
srcשל הוידיאו הואblob... לכאורה במקרה כזה אין דרך אוטומטית לחלץ את ה-URL המקורי של הוידיאו, נכון? -
https://www.vishay.com/videos/mosfets/trenchfet174-mosfets-in-automotive-applications.html
כאן יש בעיה אחרת - אלמנט הוידיאו יש לו
left-margin: -999999, עד שלוחצים על
ואז הוא מקבל left-margin: 0. מכיון שה-iframe נוצר לפני הלחיצה על ממילא הוא יורש את ההגדרה של left-margin: -999999.פתרון אפשרי: להאזין לשינויי attributes על הוידיאו ולפעול בהתאם.
-
תגובה: שיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר
קוד זה מבוסס על סקריפט שנכתב (כנראה על ידי @dovid?) עבור נטפרי. הייעוד של הסקריפט הוא לזהות וידיאו חסום בדף ולהמיר כל אלמנט
videoחסום שנמצאה בלחצן "שלח בקשה לבדיקה". דרך הפעולה הוא על ידי טעינת הוידיאו בתוך iframe (זה גורם לקבלת דף חסימה), והכנסת ה-iframe לתוך הדף במיקום וגודל המדוייק של אלמנט הוידיאו המקורי.
בקוד המקורי היו ארבע בעיות שניסיתי לתקן:- לפעמים הקוד לא הצליח לזהות חסימה של וידיאו
- לפעמים ה-
iframeהיתה מכסה שטח הרבה יותר גדול מהודיאו המקורי. - כאשר מקור הוידיאו היתה ב-http לא היתה אפשרות להטעין אותו בתוך iframe בדפים לא מאובטחים.
- לפעמים ה-iframe היתה מוסתרת על ידי אלמנטים אחרים
דוגמאות לדפים בהם הסקריפט נכשלה: 1, 2, 3, 4, 5 (נכון לעכשיו אפשר לבדוק, למי שנמצא בנטפרי, הסקריפט הזה מוזרק בברירת מחדל לכל הדפים)
ישבתי די הרבה זמן על הקוד הזה... (נסיתי כמה דרכים עד שהחלטתי שזה לכאורה הכי טוב)
אשמח לביקורותנ. ב. @dovid אני לא מנסה להתנצח או להראות לכולם ראו! הצלחתי לכתוב משהו יותר טוב!. רק שעבדתי על זה די קשה, ואני מאמין שעדיין אפשר לשפר את זה יותר. לכן אני מבקש ביקורות. אני מקווה שבסוף כל משתמשי נטפרי יהנו משיפור זה.
(function () { var config = { attributes: false, childList: true, subtree: true }; var observer = new MutationObserver( function (mutationsList) { for (let mutation of mutationsList) for (let el of mutation.addedNodes) if (el.tagName == "VIDEO") el.addEventListener("error", function (e) { addButton(this) }, true); } ); observer.observe(document, config); var vs = document.querySelectorAll("video"); for (let v of vs) { // `HTMLMediaElement.error` doesn't get set when the video source is set in a child `source` element // https://stackoverflow.com/a/34239064/8997905 // https://stackoverflow.com/a/20704999/8997905 // https://stackoverflow.com/a/46508971/8997905 // https://stackoverflow.com/questions/9175415 if (v.error || v.networkState == 3) addButton(v); v.addEventListener("error", function (e) { console.trace(e); addButton(v); }, true); } function addButton(videoElement) { if (videoElement.buttonAdded) return; // don't run twice on error event - some pages seem to cause 2 errors videoElement.buttonAdded = 1; var src = new URL(videoElement.currentSrc); if (src.protocol == "blob:") return; src.protocol = document.location.protocol; // load http video over https var parent = videoElement.parentNode; var newNode = document.createElement("iframe"); // getComputedStyle will only return a percentage when display is none // https://stackoverflow.com/a/8406724/8997905 videoElement.style.display = "none"; newNode.src = src.toString(); newNode.style.border = "none"; newNode.style.background = "#fff"; newNode.style.zIndex = 9; function setProps(iframe) { [ "position", "top", "left", "bottom", "right", "height", "max-height", "max-width", "min-height", "width", "min-width", "max-width", "padding", "margin" ].map(prop => newNode.style[prop] = window.getComputedStyle(videoElement)[prop]); if (newNode.style.position == "static") newNode.style.position = "relative"; } setProps(newNode); setInterval(() => setProps(newNode), 3000); parent.appendChild(newNode); // mejs will overlay an error message when an error is detected, remove it. for (let overlay of document.querySelectorAll(".mejs__overlay.mejs__layer, .mejs-overlay.mejs-layer")) { for (let childElm of overlay.children) { if (childElm.classList.contains("mejs__overlay-error") || childElm.classList.contains("mejs-overlay-error")) overlay.remove(); } } } })();@yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:
נ. ב. @dovid אני לא מנסה להתנצח או להראות לכולם ראו! הצלחתי לכתוב משהו יותר טוב!. רק שעבדתי על זה די קשה, ואני מאמין שעדיין אפשר לשפר את זה יותר. לכן אני מבקש ביקורות. אני מקווה שבסוף כל משתמשי נטפרי יהנו משיפור זה.
ההתנצלות הזו קצת מעליבה אותי, אני לא הייתי בחיים בא בטענה על מישהו ש"מעיז" לשפר קוד שלי.
ההערות שלך נכונות ולקחתי אותם בחשבון (לא היה לי פתרון וגם לא נלחצתי כי לא שאפתי מייד לשלמות - עד היום היה צריך הקלטה למי שלא יודע לחפש את הכתובת בקונסול).
הפתרון שלך מצויין. אני חשבתי על כיוון של יצירת דיב עם אותם הגדרות של הוידאו ולהעביר את הוידאו לתוכו אבל אפילו לא ניסיתי את זה כי היה לי תחושה שניתוק מהDOM והחזרה אליו יעוררו את האירוע שוב ושוב - אולי אני טועה.- מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
- בכל נושא אפשר ליצור קשר dovid@tchumim.com
-
@yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:
נ. ב. @dovid אני לא מנסה להתנצח או להראות לכולם ראו! הצלחתי לכתוב משהו יותר טוב!. רק שעבדתי על זה די קשה, ואני מאמין שעדיין אפשר לשפר את זה יותר. לכן אני מבקש ביקורות. אני מקווה שבסוף כל משתמשי נטפרי יהנו משיפור זה.
ההתנצלות הזו קצת מעליבה אותי, אני לא הייתי בחיים בא בטענה על מישהו ש"מעיז" לשפר קוד שלי.
ההערות שלך נכונות ולקחתי אותם בחשבון (לא היה לי פתרון וגם לא נלחצתי כי לא שאפתי מייד לשלמות - עד היום היה צריך הקלטה למי שלא יודע לחפש את הכתובת בקונסול).
הפתרון שלך מצויין. אני חשבתי על כיוון של יצירת דיב עם אותם הגדרות של הוידאו ולהעביר את הוידאו לתוכו אבל אפילו לא ניסיתי את זה כי היה לי תחושה שניתוק מהDOM והחזרה אליו יעוררו את האירוע שוב ושוב - אולי אני טועה.@dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:
ההתנצלות הזו קצת מעליבה אותי, אני לא הייתי בחיים בא בטענה על מישהו ש"מעיז" לשפר קוד שלי.
סליחה...
תודה על ההערות
@dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:
כי לא שאפתי מייד לשלמות
אני מסכים לגמרי שלא צריך שלמות מיד. רק מה, הסיבה שבכלל שמתי לב לסקריפט היתה כי זה שיבש דפים. אולי כדאי להשבית את הסקריפט עד שלפחות הוא לא ישבש דפים.
-
ראיתי ש@magicode אימץ את הקוד שלך.
אבל @shraga הראה לי את הדף הזה https://developers.google.com/web/updates/2019/06
הוידאו שמה ללא parent אישי, אלא ממש חלק מתוכן הדף ממילא הappend מוסיף רחוק מאוד מהמיקום המקורי (כאיבר אחרון במיכל).
לכן אני חושב שצריךvideoElement.outerHTML = newNode.outerHTML;- מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
- בכל נושא אפשר ליצור קשר dovid@tchumim.com
-
ראיתי ש@magicode אימץ את הקוד שלך.
אבל @shraga הראה לי את הדף הזה https://developers.google.com/web/updates/2019/06
הוידאו שמה ללא parent אישי, אלא ממש חלק מתוכן הדף ממילא הappend מוסיף רחוק מאוד מהמיקום המקורי (כאיבר אחרון במיכל).
לכן אני חושב שצריךvideoElement.outerHTML = newNode.outerHTML;@dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
גם אני עושה כל שלוש שניות העתקה חוזרת של המאפיינים, בגלל בעיה שציינתי למעלה.
עריכה אני רואה ש@magicode הוריד את זה... באמת לא היה פתרון אלגנטי...
אולי כך:videoElement.after(newNode);אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל
X-Frames-Options.ועוד בעיה מצאתי בזכות ההפניה לאתר זה, שחכתי להוסיף למערך התכונות שצריך להעתיק את התכונה
float... (שם הוידיאו מקבלfloat: rightוהאייפרים עומד בצד שמאל)📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה
-
@dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
גם אני עושה כל שלוש שניות העתקה חוזרת של המאפיינים, בגלל בעיה שציינתי למעלה.
עריכה אני רואה ש@magicode הוריד את זה... באמת לא היה פתרון אלגנטי...
אולי כך:videoElement.after(newNode);אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל
X-Frames-Options.ועוד בעיה מצאתי בזכות ההפניה לאתר זה, שחכתי להוסיף למערך התכונות שצריך להעתיק את התכונה
float... (שם הוידיאו מקבלfloat: rightוהאייפרים עומד בצד שמאל)@yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:
@dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".
- מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
- בכל נושא אפשר ליצור קשר dovid@tchumim.com
-
@dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
גם אני עושה כל שלוש שניות העתקה חוזרת של המאפיינים, בגלל בעיה שציינתי למעלה.
עריכה אני רואה ש@magicode הוריד את זה... באמת לא היה פתרון אלגנטי...
אולי כך:videoElement.after(newNode);אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל
X-Frames-Options.ועוד בעיה מצאתי בזכות ההפניה לאתר זה, שחכתי להוסיף למערך התכונות שצריך להעתיק את התכונה
float... (שם הוידיאו מקבלfloat: rightוהאייפרים עומד בצד שמאל) -
@yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:
@dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".
@dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:
לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".
התכוונתי לפתרון הראשון, אם אתה רק מחליף את ה-outerHTML, זה נשאר אותו node.
📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה
-
@dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:
לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".
התכוונתי לפתרון הראשון, אם אתה רק מחליף את ה-outerHTML, זה נשאר אותו node.
@yossiz תנסה את הקוד הבא:
var btn = document.querySelector("button"); btn.addEventListener('click', function(){ console.log(123); btn.outerHTML = btn.outerHTML; });האירוע יקרה רק פעם ראשונה, זה שיטה לסלק מאזינים של אלמנט להשים את הouterHTML שלו בעצמו.
