Video elements loaded in do not display or play in Safari

[krjo]

Test case: https://www.puravidabracelets.com/collections/test-collection

We use infinite-scroll to load in products as you scroll down the page. We have a video promo tile within the grid of products and these videos are blank when loaded in with infinite-scroll, on Safari only. I load in videos with Ajax on another site with no issue so the only thing I can think of is that it's related to infinite-scroll. The videos work fine when loaded on initial page load above the fold. On Chrome and Firefox this is not an issue.

The element is a simple video element. Removing the existing attributes below has no impact.

<video class="product-card__video" loop muted autoplay playsinline aria-hidden="true" tabindex="-1">
        <source src="https://cdn.shopify.com/s/files/1/0297/6313/files/All_Bracelets.mp4?806190" type="video/mp4">
        Your browser does not support modern video.
</video>

[desandro]

Thanks for reporting this issue.

Looking into it, you may need to trigger .play() on videos that are dynamically added to the page.

// jQuery
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
  $(items).find('video').each((i, video) => video.play())
});

// vanilla JS
infScroll.on( 'append', function( response, path, items ) {
  for ( let i = 0; i < items.length; i++ ) {
    let item = items[i];
    let videos = items.querySelectorAll('video');
    for ( var j = 0; j < videos.length; j++ ) {
      videos[j].play
    }
  }
});

[alex-esn]

any update on this?

[ghost]

Also experiencing this issue in Safari only (on both MacOS and iOS)...

Interestingly, videos initially loaded onto the page show fine but any videos added dynamically via the infinite scrolling show a blank space where the video should be. Inspecting the code shows you that the video is there but isn't being rendered.

[guochiscoding]

i also has this issue,have you over this?

[alex-esn]

my solution was to ditch this script altogheter and go for the most simple script for infinite scroll i was able to find: http://endless.horse

[guochiscoding]

我的解决方案是完全放弃这个脚本，转而使用我能找到的最简单的无限滚动脚本：http://endless.horse

my issue is video in iOS safari ,when the page scroll,the video turns blank. its seems different to your issue.

[alex-esn]

i was reffering that i had the same problem in 2021, and also i didn't find a fix.