דילוג לתוכן
  • דף הבית
  • קטגוריות
  • פוסטים אחרונים
  • משתמשים
  • חיפוש
  • חוקי הפורום
כיווץ
תחומים

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. תכנות
  3. בקשת code review... סקריפט המרת וידיאו ב-iframe

בקשת code review... סקריפט המרת וידיאו ב-iframe

מתוזמן נעוץ נעול הועבר תכנות
13 פוסטים 2 כותבים 248 צפיות 2 עוקבים
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
תגובה
  • תגובה כנושא
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • yossizY מנותק
    yossizY מנותק
    yossiz
    כתב ב נערך לאחרונה על ידי yossiz
    #4

    https://www.vishay.com/videos/mosfets/trenchfet174-mosfets-in-automotive-applications.html

    כאן יש בעיה אחרת - אלמנט הוידיאו יש לו left-margin: -999999, עד שלוחצים על ▶ ואז הוא מקבל left-margin: 0. מכיון שה-iframe נוצר לפני הלחיצה על ▶ ממילא הוא יורש את ההגדרה של left-margin: -999999.

    פתרון אפשרי: להאזין לשינויי attributes על הוידיאו ולפעול בהתאם.

    📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

    תגובה 1 תגובה אחרונה
    1
    • yossizY yossiz

      תגובה: שיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר

      קוד זה מבוסס על סקריפט שנכתב (כנראה על ידי @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();
                  }
              }
          }
      })();
      
      dovidD מנותק
      dovidD מנותק
      dovid
      ניהול
      כתב ב נערך לאחרונה על ידי
      #5

      @yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

      נ. ב. @dovid אני לא מנסה להתנצח או להראות לכולם ראו! הצלחתי לכתוב משהו יותר טוב!. רק שעבדתי על זה די קשה, ואני מאמין שעדיין אפשר לשפר את זה יותר. לכן אני מבקש ביקורות. אני מקווה שבסוף כל משתמשי נטפרי יהנו משיפור זה.

      ההתנצלות הזו קצת מעליבה אותי, אני לא הייתי בחיים בא בטענה על מישהו ש"מעיז" לשפר קוד שלי.
      ההערות שלך נכונות ולקחתי אותם בחשבון (לא היה לי פתרון וגם לא נלחצתי כי לא שאפתי מייד לשלמות - עד היום היה צריך הקלטה למי שלא יודע לחפש את הכתובת בקונסול).
      הפתרון שלך מצויין. אני חשבתי על כיוון של יצירת דיב עם אותם הגדרות של הוידאו ולהעביר את הוידאו לתוכו אבל אפילו לא ניסיתי את זה כי היה לי תחושה שניתוק מהDOM והחזרה אליו יעוררו את האירוע שוב ושוב - אולי אני טועה.

      • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
      • בכל נושא אפשר ליצור קשר dovid@tchumim.com
      yossizY תגובה 1 תגובה אחרונה
      3
      • dovidD dovid

        @yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

        נ. ב. @dovid אני לא מנסה להתנצח או להראות לכולם ראו! הצלחתי לכתוב משהו יותר טוב!. רק שעבדתי על זה די קשה, ואני מאמין שעדיין אפשר לשפר את זה יותר. לכן אני מבקש ביקורות. אני מקווה שבסוף כל משתמשי נטפרי יהנו משיפור זה.

        ההתנצלות הזו קצת מעליבה אותי, אני לא הייתי בחיים בא בטענה על מישהו ש"מעיז" לשפר קוד שלי.
        ההערות שלך נכונות ולקחתי אותם בחשבון (לא היה לי פתרון וגם לא נלחצתי כי לא שאפתי מייד לשלמות - עד היום היה צריך הקלטה למי שלא יודע לחפש את הכתובת בקונסול).
        הפתרון שלך מצויין. אני חשבתי על כיוון של יצירת דיב עם אותם הגדרות של הוידאו ולהעביר את הוידאו לתוכו אבל אפילו לא ניסיתי את זה כי היה לי תחושה שניתוק מהDOM והחזרה אליו יעוררו את האירוע שוב ושוב - אולי אני טועה.

        yossizY מנותק
        yossizY מנותק
        yossiz
        כתב ב נערך לאחרונה על ידי
        #6

        @dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

        ההתנצלות הזו קצת מעליבה אותי, אני לא הייתי בחיים בא בטענה על מישהו ש"מעיז" לשפר קוד שלי.

        סליחה...

        תודה על ההערות

        @dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

        כי לא שאפתי מייד לשלמות

        אני מסכים לגמרי שלא צריך שלמות מיד. רק מה, הסיבה שבכלל שמתי לב לסקריפט היתה כי זה שיבש דפים. אולי כדאי להשבית את הסקריפט עד שלפחות הוא לא ישבש דפים.

        📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

        תגובה 1 תגובה אחרונה
        3
        • dovidD מנותק
          dovidD מנותק
          dovid
          ניהול
          כתב ב נערך לאחרונה על ידי
          #7

          ראיתי ש@magicode אימץ את הקוד שלך.
          אבל @shraga הראה לי את הדף הזה https://developers.google.com/web/updates/2019/06
          הוידאו שמה ללא parent אישי, אלא ממש חלק מתוכן הדף ממילא הappend מוסיף רחוק מאוד מהמיקום המקורי (כאיבר אחרון במיכל).
          לכן אני חושב שצריך

          videoElement.outerHTML = newNode.outerHTML;
          
          • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
          • בכל נושא אפשר ליצור קשר dovid@tchumim.com
          yossizY תגובה 1 תגובה אחרונה
          2
          • dovidD מנותק
            dovidD מנותק
            dovid
            ניהול
            כתב ב נערך לאחרונה על ידי
            #8

            או אולי תקני יותר:

            parent.replaceChild(newNode, videoElement);
            
            • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
            • בכל נושא אפשר ליצור קשר dovid@tchumim.com
            תגובה 1 תגובה אחרונה
            1
            • dovidD dovid

              ראיתי ש@magicode אימץ את הקוד שלך.
              אבל @shraga הראה לי את הדף הזה https://developers.google.com/web/updates/2019/06
              הוידאו שמה ללא parent אישי, אלא ממש חלק מתוכן הדף ממילא הappend מוסיף רחוק מאוד מהמיקום המקורי (כאיבר אחרון במיכל).
              לכן אני חושב שצריך

              videoElement.outerHTML = newNode.outerHTML;
              
              yossizY מנותק
              yossizY מנותק
              yossiz
              כתב ב נערך לאחרונה על ידי yossiz
              #9

              @dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
              גם אני עושה כל שלוש שניות העתקה חוזרת של המאפיינים, בגלל בעיה שציינתי למעלה.
              עריכה אני רואה ש@magicode הוריד את זה... באמת לא היה פתרון אלגנטי...
              אולי כך:

              videoElement.after(newNode);
              

              אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל X-Frames-Options.

              ועוד בעיה מצאתי בזכות ההפניה לאתר זה, שחכתי להוסיף למערך התכונות שצריך להעתיק את התכונה float... (שם הוידיאו מקבל float: right והאייפרים עומד בצד שמאל)

              📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

              dovidD 2 תגובות תגובה אחרונה
              1
              • yossizY yossiz

                @dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
                גם אני עושה כל שלוש שניות העתקה חוזרת של המאפיינים, בגלל בעיה שציינתי למעלה.
                עריכה אני רואה ש@magicode הוריד את זה... באמת לא היה פתרון אלגנטי...
                אולי כך:

                videoElement.after(newNode);
                

                אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל X-Frames-Options.

                ועוד בעיה מצאתי בזכות ההפניה לאתר זה, שחכתי להוסיף למערך התכונות שצריך להעתיק את התכונה float... (שם הוידיאו מקבל float: right והאייפרים עומד בצד שמאל)

                dovidD מנותק
                dovidD מנותק
                dovid
                ניהול
                כתב ב נערך לאחרונה על ידי
                #10

                @yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

                @dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?

                לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".

                • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                yossizY תגובה 1 תגובה אחרונה
                0
                • yossizY yossiz

                  @dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
                  גם אני עושה כל שלוש שניות העתקה חוזרת של המאפיינים, בגלל בעיה שציינתי למעלה.
                  עריכה אני רואה ש@magicode הוריד את זה... באמת לא היה פתרון אלגנטי...
                  אולי כך:

                  videoElement.after(newNode);
                  

                  אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל X-Frames-Options.

                  ועוד בעיה מצאתי בזכות ההפניה לאתר זה, שחכתי להוסיף למערך התכונות שצריך להעתיק את התכונה float... (שם הוידיאו מקבל float: right והאייפרים עומד בצד שמאל)

                  dovidD מנותק
                  dovidD מנותק
                  dovid
                  ניהול
                  כתב ב נערך לאחרונה על ידי
                  #11

                  @yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

                  אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל X-Frames-Options.

                  אפשר במקרה זה לשים ישר html כמו a פשוט לשליחת פניה, אבל זה מקרי קצה.

                  • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                  • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                  תגובה 1 תגובה אחרונה
                  1
                  • dovidD dovid

                    @yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

                    @dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?

                    לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".

                    yossizY מנותק
                    yossizY מנותק
                    yossiz
                    כתב ב נערך לאחרונה על ידי
                    #12

                    @dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

                    לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".

                    התכוונתי לפתרון הראשון, אם אתה רק מחליף את ה-outerHTML, זה נשאר אותו node.

                    📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

                    dovidD תגובה 1 תגובה אחרונה
                    1
                    • yossizY yossiz

                      @dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

                      לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".

                      התכוונתי לפתרון הראשון, אם אתה רק מחליף את ה-outerHTML, זה נשאר אותו node.

                      dovidD מנותק
                      dovidD מנותק
                      dovid
                      ניהול
                      כתב ב נערך לאחרונה על ידי
                      #13

                      @yossiz תנסה את הקוד הבא:

                      var btn = document.querySelector("button");
                      btn.addEventListener('click', function(){
                        console.log(123);
                        btn.outerHTML = btn.outerHTML;
                      });
                      

                      האירוע יקרה רק פעם ראשונה, זה שיטה לסלק מאזינים של אלמנט להשים את הouterHTML שלו בעצמו.

                      • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                      • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                      תגובה 1 תגובה אחרונה
                      3
                      תגובה
                      • תגובה כנושא
                      התחברו כדי לפרסם תגובה
                      • מהישן לחדש
                      • מהחדש לישן
                      • הכי הרבה הצבעות


                      בא תתחבר לדף היומי!
                      • התחברות

                      • אין לך חשבון עדיין? הרשמה

                      • התחברו או הירשמו כדי לחפש.
                      • פוסט ראשון
                        פוסט אחרון
                      0
                      • דף הבית
                      • קטגוריות
                      • פוסטים אחרונים
                      • משתמשים
                      • חיפוש
                      • חוקי הפורום