CODEWITHSUNDEEP
ioshtmlvideosafari
Gregory Magarshak
Gregory Magarshak

Reputation: 2209

How do some websites play video inline in iOS Safari?

Pretty incredible since I thought all videos expanded to play fullscreen in regular safari. Check this out for example:

https://entertainment.theonion.com/the-onion-reviews-rogue-one-1819596116

That video plays inline and doesn't even stop when I switch Safari tabs. What's happening there? Are they using js and HTML5 canvas to render the video or something? How do they sync the sound so well?

Upvotes: 14

Views: 28829

Answers (1)

Alan DeLonga
Alan DeLonga

Reputation: 484

Just constructing an answer based on the link @offbeatmammal posted in his comment.

Also based on new video policies for ios specifically that:

On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
<video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.

A note about the playsinline attribute:

this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline. Unfortunately, this change did not make the cut-off for iOS 10 Developer Seed 2. If you would like to experiment with this new policy with iOS Developer Seed 2, the prefixed attribute will work, but we would encourage you to transition to the unprefixed attribute when support for it is available in a future seed.

Lastly an example:

<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>

with a fall back that displays an image on video error

function fallback(video)
{
  var img = video.querySelector('img');
  if (img)
    video.parentNode.replaceChild(img, video);
}

Upvotes: 25

Related Questions