diff --git a/README.md b/README.md index a838a68..799162c 100644 --- a/README.md +++ b/README.md @@ -235,6 +235,8 @@ Videos may also be rendered using the same `background` settings. Thus, you can This creates a Visual component with a 16:9 aspect ratio and immediately loads a low rez poster image. Once it loads completely, it will fade in. When the Visual enters the viewport, the `image` image will load in. When it completes, it will fade in and, if the Visual is still in the viewport, the `video` will load. Once enough has loaded that it can play without interruption, the video will fade in and begin playing (with looping) until it is scrolled out of the viewport. +This package sets [playsinline](https://webkit.org/blog/6784/new-video-policies-for-ios/) automatically and uses [iphone-inline-video](https://github.com/bfred-it/iphone-inline-video) to add support to iOS 8 and 9. Note, to autoplay inline on Android, make sure to also set the `muted` attribute. + ### Show a fallback on non-autoplaying devices diff --git a/examples/playsinline/index.html b/examples/playsinline/index.html new file mode 100644 index 0000000..9f28f1b --- /dev/null +++ b/examples/playsinline/index.html @@ -0,0 +1,18 @@ + + + + +
+ + + +

Note, there is no e2e test for this, but making this example for testing during devleopment.

+ +
+ + diff --git a/index.vue b/index.vue index 325d568..f0b3552 100644 --- a/index.vue +++ b/index.vue @@ -78,6 +78,7 @@ :controls='controls' :loop='loop' :muted='muted' + playsinline ref='video' preload='auto' :aria-label='alt') diff --git a/src/video.coffee b/src/video.coffee index e655d25..821b310 100644 --- a/src/video.coffee +++ b/src/video.coffee @@ -47,7 +47,7 @@ module.exports = return false # Test whether the device can autoplay video - canAutoplayVideo: -> !navigator.userAgent.match /Mobile|Android|BlackBerry/i + canAutoplayVideo: -> !navigator.userAgent.match /BlackBerry/i # Turn video sources into an array of URls videoSources: -> switch