What Does `playsinline` Mean in Web Video?

Publikováno: 18.3.2020

I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite clear and I feel a little silly for not knowing it.

With it in place, like this:

<video src="..." controls playsinline</video

Mobile browsers, will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.

Here's what it looks like without… Read article “What Does `playsinline` Mean in Web Video?”

The post What Does `playsinline` Mean in Web Video? appeared first on CSS-Tricks.

Celý článek

With it in place, like this:

<video src="..." controls playsinline></video>

Mobile browsers, will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.

Here's what it looks like withoutplaysinline:

Here's what it looks like withplaysinline:

(If you're like me, you tried to play that video from the play button on the video in the video, only to realize it's not a real play button. 🤯)

(While we're getting meta, I'm making sure those videos above have playsinline on them right here in this blog post.)

Note that the user still has the ability to go fullscreen with the video even in the playsinline scenario, so I'd say it's probably a smart default choice. It's not literally the default — you have to add it, but you know what I mean.

One of the places this shows up regularly is in the attribute soup that is required to make video be a GIF-replacement:

<video autoplay loop muted playsinline src="..."></video>

If you have all four of those attributes, the video will actually autoplay (and loop) on mobile browsers, just like a GIF would, only with far better performance. You can skip loop if you don't want that, but all the other three are required if you want the autoplay attribute to work.

I also learned that the (only?) way to get a thumbnail to show up on mobile (at least for iOS) is to use a poster attribute. Even if you preload, you don't see anything but blank white unless you have a poster.

Without a poster:

With a poster:

<video
  src="movie.mov"
  poster="thumbnail.jpg" 
  controls
></video>mo

If you can't be troubled to deal with a poster, you might wanna toss a border or something on video elements to sort of visually block off that area. Otherwise, the floating play button is a little awkward.

The post What Does `playsinline` Mean in Web Video? appeared first on CSS-Tricks.