Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Video player preload settings + lazyload videos

Video player preload settings + lazyload videos

Scheduled Pinned Locked Moved General Discussion
7 Posts 2 Posters 210 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    monoflop
    wrote on Apr 27, 2023, 12:53 PM last edited by monoflop Apr 27, 2023, 9:26 AM
    #1

    Hi,
    I'm using Fullscreen Slider with quite a lot of HTML5 embedded videos and video backgrounds and I was wondering if there is a way to change how these videos are preloaded, because it slows down the pageload a lot.
    My main concern are videos that don't autoplay (unchecked) and which the user has to start playing by clicking on them (which he never might). They are embedded with the setting preload="auto", which means most browsers will preload the entire video (which can be huge) and in the end, maybe for no reason. I would prefer preload="metadata" for these videos. Maybe this could be a setting to choose or would happen automatically if autoplay is unchecked and Standard Controls are checked. That would help a lot and speedup the whole pageload.
    Also:
    I understand that autoplay videos have to be preloaded, but if there is no video on the first slide, maybe the preloading could start after the first slide has been rendered or in some form of lazyloading? Is there a way to influence this behaviour? At the moment the preloading of a few videos at the same time seems to block the rendering of the page significantly and nothing is shown for a long time, while the videos are loading and blocking bandwidth. I came across a few JS based exemples of lazyloading videos like this one https://web.dev/lazy-loading-video/ but to be able to use them I would need to add a class to the video tag, which I can't at the moment.

    I hope there is a solution to this. Thanks.

    1 Reply Last reply
    0
    • M Offline
      M Offline
      monoflop
      wrote on Apr 29, 2023, 7:03 AM last edited by
      #2

      I did a bit more testing (this time in Chrome), and it seems that Chrome behaves very different than Firefox in terms of preloading autoplay videos. In Chrome I didn't really see a need vor Lazyloading Videos, because the browser itself seems to take care of this and does it quite efficient.
      But being able to set the preload tag by yourself would be good for Chrome too and especially for the mobile versions of the page, because random preloads aren't really necessary for all videos and being able to decide that would be great.
      Thanks

      1 Reply Last reply
      0
      • A Offline
        A Offline
        arminunruh
        Global Moderator
        wrote on May 2, 2023, 7:54 PM last edited by
        #3

        hey can u please post a link to the page with the videos?
        im totally down to code improvements for loading behaviour!

        M 1 Reply Last reply May 4, 2023, 7:51 AM
        0
        • A arminunruh
          May 2, 2023, 7:54 PM

          hey can u please post a link to the page with the videos?
          im totally down to code improvements for loading behaviour!

          M Offline
          M Offline
          monoflop
          wrote on May 4, 2023, 7:51 AM last edited by
          #4

          @arminunruh
          Here is the link to the website, that I'm developing at the moment:
          https://develop.uber.space/

          This page has several different videos (autoplay, as row-background and non-autoplay), and depending on the browser, they sometimes load at the beginning of the page-load (even if they aren't needed) and block other content to be loaded faster.
          Thanks for looking into it.

          1 Reply Last reply
          0
          • A Offline
            A Offline
            arminunruh
            Global Moderator
            wrote on May 7, 2023, 1:26 PM last edited by
            #5

            hey there thanks!

            looking at my code i see i already lazyload videos

            however i will take a closer look at this soon

            1 Reply Last reply
            0
            • M Offline
              M Offline
              monoflop
              wrote on May 8, 2023, 11:12 AM last edited by
              #6

              Thanks for looking into it @arminunruh,
              Lazyloading videos seems to work well in Chrome, but it doesn't in Firefox.

              1 Reply Last reply
              0
              • A Offline
                A Offline
                arminunruh
                Global Moderator
                wrote on May 20, 2023, 7:04 PM last edited by
                #7

                yea lazyloading in firefox created some bugs for firefox, so i disabled it for firefox

                1 Reply Last reply
                0
                Reply
                • Reply as topic
                Log in to reply
                • Oldest to Newest
                • Newest to Oldest
                • Most Votes


                I also code custom websites or custom Lay features.
                💿 Email me here: 💿
                info@laytheme.com

                Before you post:
                1. When using a WordPress Cache plugin, disable it or clear your cache.
                2. Update Lay Theme and all Lay Theme Addons
                3. Disable all Plugins
                4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                This often solves issues you might run into

                When you post:
                1. Post a link to where the problem is
                2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                Online Users
                Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                laytheme.com
                • Login

                • Don't have an account? Register

                • Login or register to search.
                • First post
                  Last post
                0
                • Recent
                • Tags
                • Popular
                • Users
                • Search