Make WordPress Core

Opened 4 years ago

Closed 18 months ago

Last modified 17 months ago

#51564 closed defect (bug) (duplicate)

Unable to autoplay + loop off-screen videos using Chrome

Reported by: kentallenduke's profile kentallenduke Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.4.2
Component: Media Keywords: has-screenshots reporter-feedback
Focuses: Cc:

Description

Hi there,

To move away from using heavy GIFs, I am trying to autoplay and loop multiple mp4 video files (without sound) on WordPress. However, even with the autoplay and loop tags, the videos that aren’t in view after clicking refresh are not autoplaying or looping. This unintended behavior is reproducible on Chrome 86.0.4240.75, 87.0.4280.20, and 88.0.4291.2, but not on Firefox 83.

Expected: With the appropriate tags, all videos should show autoplay and loop regardless if they’re off-screen on Chrome (Firefox works as expected). Alternatively, to save resources, videos off-screen should start autoplaying and looping once they are in view.

Actual: Off-screen videos aren’t autoplaying or looping after I hit the refresh key, even when I scroll down to view them.

See attached Google Drive video link below. Being able to autoplay and loop MP4s will solve multiple problems with GIFs:

– Much lower file size (6x less, sometimes 10x smaller) than GIFs, meaning less time uploading and much faster page load.
– File quality will appear much better as an mp4 compared to the pixel-y look from GIFs.
– To add to the second point, 60 FPS mp4 is ~2-3 times smaller than 30 FPS GIF.

Google Drive video link:
https://drive.google.com/file/d/1abH4We1Qj_qWk2ECwzdeaSDLYKrvwIep/view?usp=sharing

Attachments (1)

Multiple auto-play + loop videos test - Google Chrome 2020-10-13 16-49-18.mp4 (7.6 MB) - added by kentallenduke 4 years ago.
Video illustrating the issue

Change History (13)

#1 @kentallenduke
4 years ago

  • Keywords reporter-feedback removed
  • Resolution set to invalid
  • Status changed from new to closed

#2 @kentallenduke
4 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


3 years ago

#4 @antpb
3 years ago

  • Keywords reporter-feedback added

Hello @kentallenduke ! Thanks for this report! Do you by chance have a live link of a page that this is happening on? I suspect this might be a Chrome performance feature that is proving inconsistent but would like to dig in to confirm.

I have some ideas on how to test this on my end, but a link to yours would be very helpful!

Thanks for your first ticket btw!!

#5 @joelyoder
3 years ago

@kentallenduke can you test and see if this issue persists if you add the muted attribute to the video tags? Chrome has a number of different policies limiting when and where a video will autoplay, and marking a video as muted usually is the best solution for videos without audio.

#6 @joelyoder
3 years ago

I've tested this in Chrome using the video block with autoplay and loop enabled. With mute toggled on, all of the videos autoplay as expected. With mute toggled off, any video that is not fully in the viewport on load does not autoplay.

Last edited 3 years ago by joelyoder (previous) (diff)

#7 @kentallenduke
3 years ago

Hi @antpb @joelyoder , thanks for getting back to me.

Here's a live link to the webpage:
https://www.androidpolice.com/?p=716050&preview=1&_ppp=f7701e0961

@joelyoder I tried adding muted, autoplay, and loop attribute to the embedded videos, but the clips outside of the viewport are still not loading after refreshing the page. Weirdly enough, all videos autoplay as intended on the Android version of Chrome.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


20 months ago

#9 @antpb
20 months ago

Hi @kentallenduke ! In WordPress 6.1 a new property of muted was added to video items which should fix the behavior reported here. Would it be possible to try with the WordPress Beta Tester plugin to see if on 6.1 this still exists?

Related: #54788

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.


18 months ago

#11 @joedolson
18 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

Just tested this with a set of autoplaying, muted videos, and it worked as expected in Chrome in current trunk. Both the on-screen and off-screen videos played as expected. Closing as fixed in r54128.

#12 @desrosj
17 months ago

  • Milestone Awaiting Review deleted
  • Resolution changed from fixed to duplicate

Duplicate of #54788.

Note: See TracTickets for help on using tickets.