search

backdrop / backdrop-issues

Issue tracker for Backdrop core.
144 stars 38 forks source link

Video: allow setting the `playsinline` attribute, to allow autoplay in certain browsers/OS that require it #6631

Open indigoxela opened 4 weeks ago

indigoxela commented 4 weeks ago

Description of the bug

This has been brought up in this thread in our Zulip chat: to get autoplay working in iOS (and possibly any Safari) it's required that the playsinline attribute is also present. However, that attribute is not available via field settings.

Steps To Reproduce

  1. In a vanilla installation of Backdrop, add a new file field to an existing content type (or crate a new content type). Make sure to allow some video extensions, such as mp4 (files default to just txt extension).
  2. Go the "Manage displays" for the content type, and edit the default display.
  3. Change the format of the video field from "Generic file" to "Video".
  4. Click on "Configure" for the video field, and enable the "Autoplay" option.
  5. Create a piece of content of that type, and add a video file to it.
  6. Save

Actual behavior

Expected behavior

Additional information

indigoxela commented 3 weeks ago

The spellchecker's acting again :shrug: , I'm ignoring it because it's both, unrelated code and a false positive.

Anyway, here's my attempt to add playsinline to video handling: https://github.com/backdrop/backdrop/pull/4819 Testing and feedback welcome.

argiepiano commented 3 weeks ago

I'm not sure if I'm not testing correctly, or perhaps I'm misunderstanding the issue. I tested the PR on a Tugboat preview site, on a borrow iPad using Chrome and Safari.

The playsinline="playsinline" attribute is present in the tag, and autoplay="autoplay" is also present, but the video still does not play automatically. Removing the playsinline attribute makes no difference.

indigoxela commented 3 weeks ago

@argiepiano many thanks for giving it a try. :pray:

Re autoplay: the client can still decide to not autoplay under circumstances.

Here's some more documentation: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability

klonos commented 3 weeks ago

Thank you for filing this and providing a PR for it @indigoxela 🙏🏼 (I had it on my to-do list when I read the thread in Zulip, but you beat me to it ❤️)

The code looks good, however in the Zulip thread it was suggested that this is a browser-specific or OS-specific thing and that it is required in order to auto-play in iOS:

Nope, removing the audio from the video did not work. It still does not autoplay.

Okay, I got it working but I had to hard code it. - the video tag "playsinline" is now required for all iOS versions 10.+ to enable autoplay. I could not use the video field at all because it doesn't include playsinline. ...

Can we please add a #description text to the checkbox, to clarify why this might be needed and the use cases like above? We don't have to be super-specific, something like "This setting might be needed for some browsers and/or operating systems in order for the autoplay setting to function."

We can use the description provided in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#playsinline for inspiration:

playsinline A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.

PS: noting that https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video indicates that playsinline is not supported in Firefox desktop or mobile. I was initially not sure if we should mention that in the description or not, but consider that it might save people time when troubleshooting.

Also, for the autoplay, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#browser_compatibility states for iOS + Safari v10 specifically:

10 (Released 2016-09-13) Only available for videos that have no sound or have the audio track disabled.

image

I think that the bottom line is that we are not managing user expectations correctly with the "Autoplay" checkbox. The users assume that this will make the video auto-play everywhere, but it doesn't in some cases, and then they think that it's a bug with Backdrop ...when it's actually not - it's OS/browser quirks or luck of (proper) support.

Perhaps what we need is to make sure that it is absolutely clear that all that this checkbox does is to add the autoplay attribute - not guarantee that the browser/OS will autoplay the video.

indigoxela commented 3 weeks ago

@klonos I only opened this issue, as I have been asked to do from a community member (in the chat). Personally, I'd never use autoplay.

I see that there's some upcoming UX discussion, so I jump out here.

klonos commented 3 weeks ago

I've added detailed steps to reproduce the problem in the issue summary, however I still don't think that this is a bug - it is an odd behavior with only a specific browser, only on a specific OS. When it comes to global usage, Safari has been below 10% on desktop, but around 25% on mobile. See:

The solution seems to be to add a new setting, which allows the playsinline attribute to be set, which seems like a feature/task rather than a bug.

Also noting that the playsinline attribute is not meant for this purpose, despite Safari using it that way. I've added that in the issue summary as well, along with details.

I'm also concerned about the UX with the addition of the "Plays inline" checkbox:

All other checkboxes are self-explanatory by their label, but this checkbox and "inline" do not make sense without context. How does a video play if not "inline" then? I think that this setting would make more sense and be more accurate if its was "Add the playsinline attribute" instead. I am still trying to make sense of what this means:

...the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.

...does it mean that if the playsinline attribute is set, then it is meant to not allow the video to be set to full-screen mode and restrict it only within the browser/page? That will need testing/confirmation, but if that is the case, then we certainly need to add some help text to it.

klonos commented 3 weeks ago

Some additional weirdness between how browsers behave (tested with vanilla Backdrop, on recent Mac OS with Safari vs. Chrome):

Does not relate directly to this issue here, but I thought I'd still mention it in case anyone notices it during their testing.

PS: Before anyone suggests it: I've tried enabling the "Loop" option, but that doesn't fix things in Chrome. The video does autoplay and it does loop when it finishes, however, as soon as you refresh the page, the autoplay and loop just stop 🤷🏼

PPS: OK, that seems to be a known issue with how videos on autoplay work in Chrome. See: https://stackoverflow.com/questions/69427603/autoplay-on-video-is-not-working-after-refreshing-page

If you have put the autoplay option in element. It will not play on refresh unless you put muted too. This is a special case in browsers which allows to prevent the video to be played out loud in case of just refresh.

...and if you are wondering, I was testing with a video that had no audio track. We already have an option for "Muted"; so after enabling that, I tested and confirmed that the page refresh works as expected in Chrome too. So there you have it - it's not just Safari that behaves oddly.

argiepiano commented 3 weeks ago

on recent Mac OS

I think the Zulip chat referred to iOS, not MacOS, so your testing above doesn't quite address the original issue?

klonos commented 3 weeks ago

@argiepiano yes, however in the Zulip chat chat Xela asked to test with Safari on Mac as well (when I mentioned that I don't have an Apple/iOS device). I'm assuming it was because of this:

Video elements that include <video autoplay> play automatically when the video loads in Safari on macOS and iOS, only if those elements also include the playsinline attribute.