-1

I have some code to change the src attr of a video on mobile. It looks like this:

<div class="product-video--mobile swiper-slide">
   <video class="product-video"
     src="{{ variant.metafields.Details.videoMobileURL }}"
     width="100%"
     type="video/mp4"
     loop muted playsinline autoplay
     data-video-src="{{ variant.metafields.Details.videoMobileURL }}"
     alt="product-video"></video>
</div>

JS:

$(".product-video--mobile .product-video").attr("src", $(".active-video").data("mobile-video-variant"));

On desktop, this code seems to work fine but on iOS, it stops playing.

Per these answers:

Video autoplay doesn't work on all iphone

HTML5 Video autoplay on iPhone

HTML5 Video Background not playing Safari on iPhone

I have both playsinline and muted attributes on my video tag, but it still won't autoplay. Is it because I changed the source?

kawnah
  • 3,204
  • 8
  • 53
  • 103

1 Answers1

2

You can use the play() method in JS.

var vid = document.getElementById("myVideo");
vid.play();
Luke Storry
  • 6,032
  • 1
  • 9
  • 22
  • Interesting. I was under the impression those parameters just worked. But I guess if the src changes you gotta reboot it – kawnah Jul 23 '20 at 17:31
  • 1
    Whether those parameters work or not is very browser-specific, and sometimes battery-saving-mode on mobile changes things too. – Luke Storry Jul 23 '20 at 17:32